Creating 360 Virtual Tour with 360 images and 3d model using Three.js

Hi, I’m new to Three.js and I’m trying to create a 360 virtual tour using Three.js and the 3d constructed obj models and the corresponding 360 images. I’ve been able to load the 3d model. I have the desired 360 images of the 3d space. Now what I want to achieve is overlay the 360 images on the 3d space if its the correct way. I do not want to make the virtual tour independent of the 3d model, because I need to use the different 3d planes made by different objects in the space.

Currently, I’m trying to load the 360 images in a sphere and loading that sphere in the 3d model of the whole building. I also did the same by loading the 6 different faces in a cube. But I’m really not sure, this is the correct way to create the virtual tour. Basically, I’m seeking advice on how to render 360 images on top of 3d model (theoretically as well technically), so that by clicking on the hotspots (where the camera was placed while taking the photos), the user should be able to tour the whole building.

Thanks in advance.

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.

Hi @amitlzkpa, Thank you very much for the detailed answer, I did exactly the same thing, but I chose to use the Sphere mapping rather than the cubemap. Do you think using cubemap any advantage over Sphere map?

It would depend on what kind of images you have for the source. If you have them as cubemaps it might be easiest to set them up so.
They might also give better quality.

@udhgita We have created website which creates virtual tours using Three.js. we have used panolen. js for this. let me know if you need any help.

@yogita Hi! Thank you for your help. How did you make the button to the next scene on the 3d model like in this example(red colored in the center)?
And can it be done with 3d object not with an image?

Hi @Yaroslav_Matushevych.
Yes, This is gif file. I am not sure if it can be used as 3d Model but I am also researching annd trying to use 3d Models. I will let you know once i have created it.

1 Like