Interior virtual tour demo with bananas

Showcase
, , , ,
1

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: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. :monkey_face:

9 Likes
2

This has a definite “Swiss” feel to it. Remarkable :+1:

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

1 Like
3

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.

4

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

5

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

6

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

I guess option is a really good idea :slight_smile: .

1 Like
7

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

1 Like
8

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.

1 Like
9

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

1 Like
10

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

11

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 ?

12

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

13

It’s hard to say - I never used this method, preferring control with clock.
Btw, Firefox gives the same result a Chrome.

14

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

1 Like
15

To my pleasure !

1 Like
16

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

image
image1024×573 36.3 KB

This one is for the kids

image
image1024×574 45.9 KB

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

2 Likes
17

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

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.

1 Like