Rendering dynamic panoramic images

Hello, I am trying to create a project using react and threejs. this would allow the user to upload an equirectangular image using a form, this image would be saved to cloudinary which would provide a secure_url that I would use to dynamically set the threejs environment. Is this something that i achievable given the mentioned technologies?

yes :mermaid:

Would you be so kind to elaborate how something like this be done?

Ha, well, okay. You did ask a very broad and loaded yes/no question. I suggest keeping your questions focused in the future. Otherwise you risk doing this.

So… there’s something called “environment map” in three.js - read documentation to learn what it is and how to use it - you will be 90% there in terms of technology.

If you need to edit the images in any way before you can submit them to a cube texture (that’s what environment map is basically) - you can dig around for a good image manipulation library on NPM, or you can just use canvas - if that suits you.

Loading images cross-domain - you will need to set up cors (Cross-Origin Resource Sharing)

that’s about all, things like camera and camera controller - that stuff you can learn by checking out examples.

have fun.

1 Like

TextureLoader can load textures by url, you just need set up cors as Usnul said.