How can we use a equirectangular image for WebXR using three.js?

Question

I am creating a web app using Three.js in which I have to use equirectangular images for Pano tours. I want to add a feature to switch between normal mode to VR mode as React360 and AFrame does. I don't want to use React360 and AFrame as my application is already using Three.js.

I checked the three.js example but none of the examples is using the equirectangular image for VR. Is there a way to convert equirectangular image to CubeMap, So, that I can use it to switch between normal and VR Mode?

Answer 1

Is there a way to convert equirectangular image to CubeBox

Assuming you refer with "CubeBox" to the cube map format, you can perform the conversion with WebGLCubeRenderTarget.fromEquirectangularTexture() .