Project with 360 image

Hey everyone,

I have just started Babylon. I’m going to start a project like virtual tour which have number of 360 images and many components inside image as hotspot.

My question is which would be good either to have more scenes like 100 scenes(for 100 360 images as photo dome each having parent as 1 scene) or just having 1 scenes with disabling and enabling of each component while switching.

As of now I have checked both the approaches with 10 360images and couldn’t find any flow, but I’m eager to now which will be a better practice when a project grows says 100 to 1000 images.

Thanks in advance,

It’s common practice to project 360 images onto the inside of spheres or cubes. So you would, in theory, only need one actual Babylon scene with multiple spheres/cubes in.

Your navigation would just place the camera within the relevant sphere/cube depending on which hotspot has been clicked.

Depending on how you want to map out your space, you could store an array of objects that detail the 3d coordinate of your hotspots and the relevant image to load. Then, programmatically position the hotspots in the 3d space. For each hotspot, you would map a Babylon.GUI element to represent the clickable part, and then a sphere around each hotspot with the 360 image mapped onto the inside.

Hope that helps.

Thanks for the reply,

I have just started Babylon and really don’t understand what this actually means “project 360 images onto the inside of spheres or cubes and Your navigation would just place the camera within the relevant sphere/cube”. Is there any documents or pg regarding this, as I couldn’t find one.I have been trailing the project with below docs 360 Photo Domes | Babylon.js Documentation , Using Multiple Scenes | Babylon.js Documentation and seems I have been in wrong direction.

There isn’t any out-of-the-box documentation for exactly what you’re after (switching between different 360 views), but the best place to start would be what you have shared with the photo domes.

I have put this Playground together too though. It’s not perfect as I’m not entirely sure how the camera controls work with PhotoDomes, but it does show how you can switch between them with hotspots assigned to each to click:

https://playground.babylonjs.com/#14KRGG#521