What does it take to create a 360 tour like this?

I’m a student of video game development and systems engineering, I have some knowledge in C# and Java programming, also I’m new here and I would like to learn how to use this framework to tour and games, I think the best way to learn is to make projects, with this in mind I want to create a tour like the link below, I have some experience with tours, but only creating a few with software like pano2vr.

I came across this tour that looks pretty cool to me and I would like to learn how to make it, can you help me figure out what I need to learn (obviously in relation to Babylon) to create something like this, I really appreciate your time and help.

link: https://ekooweb.s3.amazonaws.com/ekoonav/ekoonav-kaizen/index.html#/nav/Tipo48

Hey hey and welcome!
The best way to start is probably here:
360 Photo Domes | Babylon.js Documentation (babylonjs.com)

To get started from the ground up for Babylon, I would recommend starting there:
Your Journey Starts Here | Babylon.js Documentation (babylonjs.com)

That being said, if you go to this PG you can also use the download button to get a complete and autonomous web page to start learning :slight_smile:
Babylon.js Playground (babylonjs.com)



A couple of links - Search results for 'photodome order:latest' - Babylon.js

A lot of different Babylon demos - GitHub - Symbitic/awesome-babylonjs: A curated list of awesome things related to Babylon.js

1 Like

thank you so much!

Great, thank you!

For transitioning between points of view, I recommend keeping the camera where it is and replacing the photodome. You can use a simple blur effect or a fade to back to hide the switch from the user. Or you can use an animation as I did in this PG I used a motion animation effect where I create a photosphere behind the hotspot and then animate it toward the camera while animating the current photosphere to a position opposite the hotspot. I throw in a little blur and it creates a nice effect tat gives a sense of moving toward the new location. Something else I recommend for transitions that isn’t in this PG is to only translate the photosphere part of the distance. The reasons is that if you get to close to the edge of the sphere it can look wonky. So we just give a little sense of motion and then pop the new sphere a little distance from the camera, hide the old sphere and animate the new sphere towards the camera with an ease out.