How to add and display layers in a panoramic image using three.js?

Hi. I have a few panoramic images, one is the main, and the other should be used as layers.





I found this example, but it just shows the panorama. I need somehow to dynamically change the textures of the surfaces from the interface.

Is there a way to display two such panoramic images on the same scene at the same time?
The question that is less related to three.js: Is there an application or service that can glue the main image and the layer together?

I can think of 2 options:

  • Option A. Add 2 concentric spheres to the scene, the outer sphere has the environment equirectangular, the inner sphere has the masked tables so they’re in front of the background. Then you can bind an .alphaMap to the inner material so you get the transparency you need.
  • Option B. You could do the texture layering in a 2D <canvas> context, and then pass the resulting texture to a single sphere. Although this might be much more cumbersome to build and modify.
2 Likes

1st option *