# THREEjs Virtual Tours Engine

**URL:** <https://discourse.threejs.org/t/threejs-virtual-tours-engine/42748>\
**Category:** Showcase\
**Tags:** background, textures\
**Created:** [September 20, 2022, 6:02pm UTC](https://discourse.threejs.org/t/threejs-virtual-tours-engine/42748 "2022-09-20T18:02:01Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Umbawa\_Sarosong](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/umbawa_sarosong/32/30107_2.png) [@Umbawa\_Sarosong](https://discourse.threejs.org/u/Umbawa_Sarosong)\
**Post date:** [September 20, 2022, 6:02pm UTC](https://discourse.threejs.org/t/threejs-virtual-tours-engine/42748/1 "2022-09-20T18:02:02Z")

</div>

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:**

_Office_

 ![sc14](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/6/0/60c035a48c58da6dd81ebfdc8821e6570c5c298f.jpeg)

_Lobby_

 ![sc15](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/7/6/760b2246663708052b9caf3f2fceb756061b754a.jpeg)

_Old Eco City_

 ![oldecocity](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/d/3/d3f08bc56e214deee79220fc788ec3dcfd3fe5ce.jpeg)

This [project](https://theneoverse.web.app/#virtualtour&&tours=oldecocity) 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

 ![sc 01](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/0/a/0a21e4afe02a91708967707f2d0cfe3a0e52e357.jpeg)

[Retail congress 360 tours](https://theneoverse.web.app/#vctour&&tours=retailcongressevent)

[Download source code](https://theneoverse.web.app#pSN20251022007)

---

<div class="post-metadata">

**Author:** ![Umbawa\_Sarosong](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/umbawa_sarosong/32/30107_2.png) [@Umbawa\_Sarosong](https://discourse.threejs.org/u/Umbawa_Sarosong)\
**Post date:** [December 13, 2022, 4:39am UTC](https://discourse.threejs.org/t/threejs-virtual-tours-engine/42748/2 "2022-12-13T04:39:34Z")

</div>

[THREEjs Virtual Tours](https://theneoverse.web.app/#virtualtour&&tours=vqrjcKr) 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.

---

<div class="post-metadata">

**Author:** ![dllb](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/dllb/32/19191_2.png) [@dllb](https://discourse.threejs.org/u/dllb)\
**Post date:** [December 13, 2022, 11:41am UTC](https://discourse.threejs.org/t/threejs-virtual-tours-engine/42748/3 "2022-12-13T11:41:22Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Umbawa\_Sarosong](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/umbawa_sarosong/32/30107_2.png) [@Umbawa\_Sarosong](https://discourse.threejs.org/u/Umbawa_Sarosong)\
**Post date:** [December 13, 2022, 3:12pm UTC](https://discourse.threejs.org/t/threejs-virtual-tours-engine/42748/4 "2022-12-13T15:12:54Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![rocky\_scube](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/rocky_scube/32/35361_2.png) [@rocky\_scube](https://discourse.threejs.org/u/rocky_scube)\
**Post date:** [April 14, 2023, 11:17am UTC](https://discourse.threejs.org/t/threejs-virtual-tours-engine/42748/5 "2023-04-14T11:17:29Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Umbawa\_Sarosong](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/umbawa_sarosong/32/30107_2.png) [@Umbawa\_Sarosong](https://discourse.threejs.org/u/Umbawa_Sarosong)\
**Post date:** [April 14, 2023, 11:59am UTC](https://discourse.threejs.org/t/threejs-virtual-tours-engine/42748/6 "2023-04-14T11:59:48Z")

</div>

I used 360 photos on a three.scene.background, there is a sample in [threejs.org](http://threejs.org) i tweaked and add animated gif on a plane

---

<div class="post-metadata">

**Author:** ![rocky\_scube](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/rocky_scube/32/35361_2.png) [@rocky\_scube](https://discourse.threejs.org/u/rocky_scube)\
**Post date:** [April 14, 2023, 12:17pm UTC](https://discourse.threejs.org/t/threejs-virtual-tours-engine/42748/7 "2023-04-14T12:17:29Z")

</div>

Can I get you GitHub repo or access

---

<div class="post-metadata">

**Author:** ![Umbawa\_Sarosong](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/umbawa_sarosong/32/30107_2.png) [@Umbawa\_Sarosong](https://discourse.threejs.org/u/Umbawa_Sarosong)\
**Post date:** [April 28, 2023, 1:48am UTC](https://discourse.threejs.org/t/threejs-virtual-tours-engine/42748/8 "2023-04-28T01:48:16Z")

</div>

This is the THREEjs Tours [Github](https://github.com/VeinSyct/ThreeJSTours), few bugs, errors and improvements needs to be address.

---

<div class="post-metadata">

**Author:** ![Umbawa\_Sarosong](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/umbawa_sarosong/32/30107_2.png) [@Umbawa\_Sarosong](https://discourse.threejs.org/u/Umbawa_Sarosong)\
**Post date:** [May 25, 2023, 3:35am UTC](https://discourse.threejs.org/t/threejs-virtual-tours-engine/42748/9 "2023-05-25T03:35:07Z")

</div>

#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.

[Demo](https://theneoverse.web.app/#virtualtour&&tours=playarea)

---

<div class="post-metadata">

**Author:** ![Umbawa\_Sarosong](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/umbawa_sarosong/32/30107_2.png) [@Umbawa\_Sarosong](https://discourse.threejs.org/u/Umbawa_Sarosong)\
**Post date:** [July 17, 2023, 3:23pm UTC](https://discourse.threejs.org/t/threejs-virtual-tours-engine/42748/10 "2023-07-17T15:23:22Z")

</div>

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

Sample: [Hotel Lobby](https://theneoverse.web.app/#virtualtour&&tours=vqrjcKr)

---

<div class="post-metadata">

**Author:** ![Umbawa\_Sarosong](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/umbawa_sarosong/32/30107_2.png) [@Umbawa\_Sarosong](https://discourse.threejs.org/u/Umbawa_Sarosong)\
**Post date:** [August 13, 2023, 5:58am UTC](https://discourse.threejs.org/t/threejs-virtual-tours-engine/42748/11 "2023-08-13T05:58:36Z")

</div>

![Screenshot 2023-08-13 095720](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/6/1/617c16d77de11661bbdedf96d74095877489fc18.jpeg)

You can now upload your 360 photos

Demo [School Lobby](https://theneoverse.web.app/#virtualtour&&tours=schoollobby)

---

<div class="post-metadata">

**Author:** ![Umbawa\_Sarosong](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/umbawa_sarosong/32/30107_2.png) [@Umbawa\_Sarosong](https://discourse.threejs.org/u/Umbawa_Sarosong)\
**Post date:** [August 25, 2023, 11:57pm UTC](https://discourse.threejs.org/t/threejs-virtual-tours-engine/42748/12 "2023-08-25T23:57:12Z")

</div>

ThreeJs Virtual Tours Engine Updated to r155

 ![Screenshot 2023-08-26 035307](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/4/b/4bd980967f0b0ed4e996350ee5f193676eee3b74.jpeg)

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

[Demo](https://theneoverse.web.app/#virtualtour&&tours=office)

---

<div class="post-metadata">

**Author:** ![Umbawa\_Sarosong](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/umbawa_sarosong/32/30107_2.png) [@Umbawa\_Sarosong](https://discourse.threejs.org/u/Umbawa_Sarosong)\
**Post date:** [September 1, 2023, 1:35am UTC](https://discourse.threejs.org/t/threejs-virtual-tours-engine/42748/13 "2023-09-01T01:35:14Z")

</div>

![Screen Shot 2023-08-31 at 9.03.20 AM](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/9/0/90e1fea003d5cddf9cd1d48887d747e6f87ff4c3.jpeg)

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.

 ![PANO0001-Pano-19](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/f/a/faab10ba6659024fb8f36745d33a84a27515e98d.jpeg)

Al Wahbah Crater Site photo

[Visit Al Wahbah Crater](https://theneoverse.web.app/#virtualtour&&tours=oldecocity)

---

<div class="post-metadata">

**Author:** ![Umbawa\_Sarosong](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/umbawa_sarosong/32/30107_2.png) [@Umbawa\_Sarosong](https://discourse.threejs.org/u/Umbawa_Sarosong)\
**Post date:** [January 13, 2025, 1:56am UTC](https://discourse.threejs.org/t/threejs-virtual-tours-engine/42748/14 "2025-01-13T01:56:26Z")

</div>

Updated threejs r172, the imafe swithing is much smoother.

 ![Screenshot_2025-01-15-16-42-28-816_com.android.chrome](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/3/c/3cd64ddc1223c3bc05483f54e9f9d1f32a64ebe8.jpeg)

 ![Screenshot 2025-01-16 224758](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/5/6/56bb08aa43dfab8aceb99ee3877263781e147530.jpeg)

1. [Hotel Lobby](https://theneoverse.web.app/#virtualtour&&tours=vqrjcKr)

 ![Screenshot 2025-01-16 224512](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/c/9/c9f3c837b3c578ae1022fa136f0fcecf0c6fd33f.jpeg)

1. [Old Residence](https://theneoverse.web.app/#realtours&&tours=PqTIkmS)

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/6/1/6127f4c09baa18551dd3eedebced8876027fb39d.jpeg)

1. [Condo Flat](https://theneoverse.web.app/#realtours&&tours=tRWSGYg)

 ![Screenshot 2025-01-16 224229](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/d/6/d60a7eb1bb1478747db1b74667a4e4f7b19dbf56.jpeg)

1. [Private Residence](https://theneoverse.web.app/#realtours&&tours=oUOupSr)

---

<div class="post-metadata">

**Author:** ![Umbawa\_Sarosong](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/umbawa_sarosong/32/30107_2.png) [@Umbawa\_Sarosong](https://discourse.threejs.org/u/Umbawa_Sarosong)\
**Post date:** [February 4, 2025, 9:28pm UTC](https://discourse.threejs.org/t/threejs-virtual-tours-engine/42748/15 "2025-02-04T21:28:59Z")

</div>

![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/7/6/7674d4deb63da62e9f838ad92711188c6393ae7b.jpeg)

Updated THREEjs Virtual Tours r157

[Live Demo](https://theneoverse.web.app#threeviewer&&load=0)

---

<div class="post-metadata">

**Author:** ![Parisa\_Shahbazi](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/parisa_shahbazi/32/43776_2.png) [@Parisa\_Shahbazi](https://discourse.threejs.org/u/Parisa_Shahbazi)\
**Post date:** [September 18, 2025, 2:56pm UTC](https://discourse.threejs.org/t/threejs-virtual-tours-engine/42748/16 "2025-09-18T14:56:35Z")

</div>

Hi

Is it available now?

---

<div class="post-metadata">

**Author:** ![Umbawa\_Sarosong](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/umbawa_sarosong/32/30107_2.png) [@Umbawa\_Sarosong](https://discourse.threejs.org/u/Umbawa_Sarosong)\
**Post date:** [September 18, 2025, 6:38pm UTC](https://discourse.threejs.org/t/threejs-virtual-tours-engine/42748/17 "2025-09-18T18:38:16Z")

</div>

what is available now?

---

<div class="post-metadata">

**Author:** ![phil\_crowther](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/phil_crowther/32/64202_2.png) [@phil\_crowther](https://discourse.threejs.org/u/phil_crowther)\
**Post date:** [September 19, 2025, 2:23am UTC](https://discourse.threejs.org/t/threejs-virtual-tours-engine/42748/18 "2025-09-19T02:23:32Z")

</div>

Just a personal preference. I tried to view the crater and found the method of navigation maddening.

I prefer a interface that allows you to walk (or, even better, to float) to places using your mouse. Some people like the good old WASD keys.

But in that demo you had to click on a series of dots. I gave up after just a few. Life is too short, even though your picture of crater looked interesting. It looked like the Meteor Crater in Arizona which I visited while a child and flew over in a light plane many decades later.

Fortunately, I know that you know how to create walking characters. So if you ever have the time, I would suggest adding that option.

---

<div class="post-metadata">

**Author:** ![phil\_crowther](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/phil_crowther/32/64202_2.png) [@phil\_crowther](https://discourse.threejs.org/u/phil_crowther)\
**Post date:** [September 19, 2025, 1:54pm UTC](https://discourse.threejs.org/t/threejs-virtual-tours-engine/42748/20 "2025-09-19T13:54:30Z")

</div>

It could be 3rd person like that, where you follow an animated person. Or first person, like this [example](https://threejs.org/examples/?q=controls#misc_controls_pointerlock).

My ideal control setup would be a variation of that example, where you use the mousewheel to set forwards and backwards speed and use the mouse movement to control rotation. You could use the same setup for a vehicle, where you use the mousewheel to adjust acceleration or deceleration and the mouse motion for pitch and bank. You could use the left/right mouse buttons control strafing (i.e. sideways or lateral motion).

My preferred WASD setup would be one where those keys control rotation and you use another group of keys on the right side (e.g. the arrow keys) to control acceleration and strafing. Or you could flip that setup and have the arrow keys control rotation and the WASD keys control acceleration.

The reason I prefer the mouse is because you can have all those controls in a single place and because the mouse and mousewheel provide variable inputs.

---

<div class="post-metadata">

**Author:** ![Umbawa\_Sarosong](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/umbawa_sarosong/32/30107_2.png) [@Umbawa\_Sarosong](https://discourse.threejs.org/u/Umbawa_Sarosong)\
**Post date:** [September 20, 2025, 4:16am UTC](https://discourse.threejs.org/t/threejs-virtual-tours-engine/42748/21 "2025-09-20T04:16:51Z")

</div>

Checkout [demo](https://theneoverse.web.app/#serini&&serini) of first and third person.

[Gaming map 3d model](https://www.renderhub.com/thebeachmarket/serini-suron-island-cities)