THREEjs Virtual Tours Engine

This is a THREEjs Virtual Tours Engine that uses scene.background to switch equirectangular image by fading out the THREEjs render canvas to white so that loading of the next image is not seen, when the texture loader THREE.TextureLoader() completes the THREEjs render canvas is then fade in to show the scene rendering.

Screen shots:



Old Eco City

This project uses orbit control THREE.OrbitControls to look around and animated gif textured on a plane geometry mesh to move from location to the next.

360 photographs using Nikkon 4k camera

360 photos virtual tours

Download source code


THREEjs Virtual Tours using 360 photos, the images are 4k and photoshoped to doubled the size to 8k.

Anyone can create your account and upload your 360 photos here, to create the tours you need to specify the camera positions and orientation, the size of the marker.

You need to make the transition seamless and instant to have appeal. Those white whole-screen-flashes and lags are annoying.

In the first case (real life env) pre-loading a bunch of nearby hotspots at lower-res to make the transition instant, and load the high-res version after the user has clicked to one spot would be a better user-experience.

In the second case (virtual env), you don’t need 360 textures, you can run it in 3D if you optimize enough the code eg using instances, etc.

1 Like

thanks so much, u just give me the best solution, load a low res then load the high res when its loaded, cheers :slight_smile:

How did you achieve rendering 360 image to scene that can be controlled and creating hotspot to render next image?

1 Like

I used 360 photos on a three.scene.background, there is a sample in i tweaked and add animated gif on a plane

Can I get you GitHub repo or access


This is the THREEjs Tours Github, few bugs, errors and improvements needs to be address.

#ThreejsTours DevLog

Texture cascading in the memory bugs are fixed by adding garbage collection function to remove far locations that are not in immediate views.

Accounts can be created to upload your 360 photos, you just need to specify the camera positions.


You can create your account and upload your 360 photos and create your virtual tours

Sample: Hotel Lobby

You can now upload your 360 photos

Demo Virtual Tours

ThreeJs Virtual Tours Engine Updated to r155

The virtual tours can be wrap inside any website template for integration


Old Eco City Mars City, Al Wahbah Crater, KSA - Development Plan for space exploration training site for the future space colonies of mars and asteroid mining operations.

Al Wahbah Crater Site photo

Visit Al Wahbah Crater

1 Like