Currently, I have a equirectangular viewer: https://guyd.me/en/locations/show/chicago-bean

If I use it to display a panoramic, the top and bottom don’t look good. This task is to create a new viewer ( src/components/locations3/Panoramic.jsx ) that creates a scene, with a cylinder, the texture is mapped to the cylinder, and top/bottom are just light blue (top, like the sky) and dark brown (bottom, like the ground).

You can probably use this tutorial: http://norikdavtian.github.io/ThreeJS-360-Panorama/ (However! we must use PointerLockControls and not re-implement mouse capture.) Some excellent tutorials are located here: https://threejsfundamentals.org/

You can take any off-the-shelf solution if one is available. We like minimal code (using as little bandwidth, memory, and compute as possible) but if a reasonable component is available elsewhere, you can use it.

Example panoramic textures that you can use: