If it works fine for you I don’t imagine why it can’t be the ‘correct’ way.
I worked on a similar project once (not threejs) and using the scene objects (cubes/spheres) and mapping spherically projection mapped images for textures.
Few things I learnt in the process:
- Finding the right size of the spheres. You don’t want them to occlude the user when moving around, nor make it so big it becomes wieldy to manage multiple spheres on the start intersecting. Best method I would say is to use to keep only one such sphere active when the user is inside.
- Using multiple buffers to separately render the 360 image and the rest of the scene and overlay as you need it if you need to overlay 360 and scene information.
- If the 360 image perfectly lines up with the 3D scene, you can use intersections on the surface of the image to get world vectors and use it however you need it. If not, converting coordinates on the image surface to spherical coordinates to world position of the corresponding point(to accommodate for object rotation) and using that for raycasting is not too difficult.
- If performance is important switching to a WebGL system when inside the 360 experience might be the best option.
I was using it for maps, so using a 360 image as material texture on a sphere worked fine for me. You may need it inside out.
Came across this useful resource on this discourse channel few weeks ago. Never used it. Might be helpful for cubes.