# Interior virtual tour demo with bananas

**URL:** <https://discourse.threejs.org/t/interior-virtual-tour-demo-with-bananas/80292>\
**Category:** Showcase\
**Tags:** loaders, baked, textures, materials, geometry\
**Created:** [March 28, 2025, 8:07pm UTC](https://discourse.threejs.org/t/interior-virtual-tour-demo-with-bananas/80292 "2025-03-28T20:07:47Z")\
**Posts on this page:** 17\
**Page:** 1

<div class="post-metadata">

**Author:** ![CarloBu](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/carlobu/32/58287_2.png) [@CarloBu](https://discourse.threejs.org/u/CarloBu)\
**Post date:** [March 28, 2025, 8:07pm UTC](https://discourse.threejs.org/t/interior-virtual-tour-demo-with-bananas/80292/1 "2025-03-28T20:07:47Z")

</div>

I made a Matterport-style virtual tour demo with progressive texture loading in Three.js and Astro.

The project has quite a long story. About eight years ago, when I was working in architecture and architectural visualization, I was tasked with creating a 3D interior model with baked textures using the lowest possible polygon count. The project involved an extremely aggressive polygon optimization process.

After completing the initial model, the project was simply archived without any further use. Years later, when I transitioned to web development, I remembered my old 3D project and rekindled my desire to create an interactive walkthrough experience—something that Sketchfab does not offer.

I developed a simple walkthrough demo. As the project evolved, I added a not so serious 🍌banana mode because children wanted to interact with the interior more like a game. I provided bananas for them to shoot, and they absolutely loved it.

Interestingly, kids seemed particularly entertained by filling toilets with bananas. 🐵

> **[Interior Scene](https://vr-interior.oaksun.studio/)**
>
> Mobile VR architecture visualization, featuring a highly optimized 230m² apartment model reduced to 70,000 polygons while maintaining visual fidelity.

---

<div class="post-metadata">

**Author:** ![vielzutun.ch](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/vielzutun.ch/32/21366_2.png) [@vielzutun.ch](https://discourse.threejs.org/u/vielzutun.ch)\
**Post date:** [March 28, 2025, 8:18pm UTC](https://discourse.threejs.org/t/interior-virtual-tour-demo-with-bananas/80292/2 "2025-03-28T20:18:08Z")

</div>

This has a definite “Swiss” feel to it. Remarkable 👍

Even though I acknowledge that Matterport is a California based enterprise.

---

<div class="post-metadata">

**Author:** ![CarloBu](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/carlobu/32/58287_2.png) [@CarloBu](https://discourse.threejs.org/u/CarloBu)\
**Post date:** [March 28, 2025, 8:20pm UTC](https://discourse.threejs.org/t/interior-virtual-tour-demo-with-bananas/80292/3 "2025-03-28T20:20:55Z")

</div>

Thank you!  
Yeah, it’s just Matterport really nailed the UX of virtual tour navigation with a mouse. Everyone is copying them—I’m no exception.

---

<div class="post-metadata">

**Author:** ![yesbird](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/yesbird/32/46097_2.png) [@yesbird](https://discourse.threejs.org/u/yesbird)\
**Post date:** [March 28, 2025, 10:03pm UTC](https://discourse.threejs.org/t/interior-virtual-tour-demo-with-bananas/80292/4 "2025-03-28T22:03:47Z")

</div>

Very well done, but moving is too fast for me, I’d prefer more slow, not running 🙂 .

---

<div class="post-metadata">

**Author:** ![CarloBu](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/carlobu/32/58287_2.png) [@CarloBu](https://discourse.threejs.org/u/CarloBu)\
**Post date:** [March 28, 2025, 10:12pm UTC](https://discourse.threejs.org/t/interior-virtual-tour-demo-with-bananas/80292/5 "2025-03-28T22:12:42Z")

</div>

Are you referring to FPS, aka ‘bananas’ mode?  
Interesting, I hadn’t considered that.  
I assumed everyone would prefer faster movement. Maybe adding an option to toggle between fast and slow movement would be a good idea

---

<div class="post-metadata">

**Author:** ![yesbird](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/yesbird/32/46097_2.png) [@yesbird](https://discourse.threejs.org/u/yesbird)\
**Post date:** [March 28, 2025, 10:29pm UTC](https://discourse.threejs.org/t/interior-virtual-tour-demo-with-bananas/80292/6 "2025-03-28T22:29:34Z")

</div>

I mean movement at “Point and Go”. Some people have a very sensitive vestibular system - VR content even has special marks for this category. I’ve explored this when I started to work with XR, and in some cases experts even advise to use teleport instead of movement.

Although your project does not use XR mode, I am feeling something similar to [VR seakness](https://en.wikipedia.org/wiki/Virtual_reality_sickness) phenomena.

I guess option is a really good idea 🙂 .

---

<div class="post-metadata">

**Author:** ![CarloBu](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/carlobu/32/58287_2.png) [@CarloBu](https://discourse.threejs.org/u/CarloBu)\
**Post date:** [March 28, 2025, 10:51pm UTC](https://discourse.threejs.org/t/interior-virtual-tour-demo-with-bananas/80292/7 "2025-03-28T22:51:36Z")

</div>

Oh, you have a point! In this case, I could respect the `prefers-reduced-motion` setting and disable movement entirely when it’s enabled

---

<div class="post-metadata">

**Author:** ![CarloBu](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/carlobu/32/58287_2.png) [@CarloBu](https://discourse.threejs.org/u/CarloBu)\
**Post date:** [March 28, 2025, 11:19pm UTC](https://discourse.threejs.org/t/interior-virtual-tour-demo-with-bananas/80292/8 "2025-03-28T23:19:34Z")

</div>

Ok, done!  
It’s easier than I thought. I just added a simple `if` statement to check if the OS has `prefers-reduced-motion: reduce`. If it does, the camera transition to the target is skipped, and the walking speed is reduced with a 0.5 multiplier.  
Thank you for the awareness of this topic.

---

<div class="post-metadata">

**Author:** ![yesbird](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/yesbird/32/46097_2.png) [@yesbird](https://discourse.threejs.org/u/yesbird)\
**Post date:** [March 28, 2025, 11:23pm UTC](https://discourse.threejs.org/t/interior-virtual-tour-demo-with-bananas/80292/9 "2025-03-28T23:23:52Z")

</div>

You are welcome !  
Did you already published improved version ? I just checked it and did not found any changes.

---

<div class="post-metadata">

**Author:** ![CarloBu](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/carlobu/32/58287_2.png) [@CarloBu](https://discourse.threejs.org/u/CarloBu)\
**Post date:** [March 28, 2025, 11:26pm UTC](https://discourse.threejs.org/t/interior-virtual-tour-demo-with-bananas/80292/10 "2025-03-28T23:26:39Z")

</div>

Do you use Mac?  
because I checked my Windows 11 and my app respects prefers-reduced-motion in Windows.

---

<div class="post-metadata">

**Author:** ![yesbird](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/yesbird/32/46097_2.png) [@yesbird](https://discourse.threejs.org/u/yesbird)\
**Post date:** [March 28, 2025, 11:35pm UTC](https://discourse.threejs.org/t/interior-virtual-tour-demo-with-bananas/80292/11 "2025-03-28T23:35:34Z")

</div>

I did it under Windows 7 and Ubuntu 24.04 - the result is the same.  
Maybe it’s better not to rely on OS-specific features, making content more independent ?

---

<div class="post-metadata">

**Author:** ![CarloBu](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/carlobu/32/58287_2.png) [@CarloBu](https://discourse.threejs.org/u/CarloBu)\
**Post date:** [March 28, 2025, 11:49pm UTC](https://discourse.threejs.org/t/interior-virtual-tour-demo-with-bananas/80292/12 "2025-03-28T23:49:00Z")

</div>

I don’t get it why the matchMedia doesn’t work in yours, but works on mine.

the oneliner  
const prefersReducedMotion = window.matchMedia(‘(prefers-reduced-motion:reduce)’).matches;

I guess I will need to add a boolean in UI in this case to reduce motion manually

---

<div class="post-metadata">

**Author:** ![yesbird](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/yesbird/32/46097_2.png) [@yesbird](https://discourse.threejs.org/u/yesbird)\
**Post date:** [March 28, 2025, 11:53pm UTC](https://discourse.threejs.org/t/interior-virtual-tour-demo-with-bananas/80292/13 "2025-03-28T23:53:47Z")

</div>

It’s hard to say - I never used this method, preferring control with [clock](https://threejs.org/docs/#api/in/core/Clock).  
Btw, Firefox gives the same result a Chrome.

---

<div class="post-metadata">

**Author:** ![CarloBu](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/carlobu/32/58287_2.png) [@CarloBu](https://discourse.threejs.org/u/CarloBu)\
**Post date:** [March 28, 2025, 11:58pm UTC](https://discourse.threejs.org/t/interior-virtual-tour-demo-with-bananas/80292/14 "2025-03-28T23:58:46Z")

</div>

thank you for your time on this issue. I will check tomorrow what I can do

---

<div class="post-metadata">

**Author:** ![yesbird](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/yesbird/32/46097_2.png) [@yesbird](https://discourse.threejs.org/u/yesbird)\
**Post date:** [March 29, 2025, 12:06am UTC](https://discourse.threejs.org/t/interior-virtual-tour-demo-with-bananas/80292/15 "2025-03-29T00:06:11Z")

</div>

To my pleasure !

---

<div class="post-metadata">

**Author:** ![Fennec](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/fennec/32/59265_2.png) [@Fennec](https://discourse.threejs.org/u/Fennec)\
**Post date:** [March 29, 2025, 12:58am UTC](https://discourse.threejs.org/t/interior-virtual-tour-demo-with-bananas/80292/16 "2025-03-29T00:58:42Z")

</div>

Add a fancy vignette, with a fisheye filter, and you’ve got a hyper-realistic bodycam FPS 😈 — (Made with Google studio)

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/b/e/be7f0363513b2f523b5a55f519a0d7e9ef9ec703.jpeg)

This one is for the kids

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/6/5/650abdfd0c44e7cf3500dfa7df623276b1f597c5.jpeg)

Ps: If you’re thinking about a Ghibli version, please don’t.

---

<div class="post-metadata">

**Author:** ![CarloBu](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/carlobu/32/58287_2.png) [@CarloBu](https://discourse.threejs.org/u/CarloBu)\
**Post date:** [March 29, 2025, 10:20am UTC](https://discourse.threejs.org/t/interior-virtual-tour-demo-with-bananas/80292/17 "2025-03-29T10:20:36Z")

</div>

OMG! You just memed my project! 😃 This is insanely good—I love the kid-friendly version! 😃

Originally, I imagined a hand holding a banana and throwing bananas, but after considering what it takes to execute that joke, I decided a simple yellow pointer would be enough.

P.S. Yeah, the internet is overflowing with Ghibli slop right now. My favorite is the one with Miyazaki holding his head in despair with the Ghibli AI slop filter. Meta \> meta \> meta.