I came across the website, with a bit of tinkering it became obvious that this was made using cube maps, but I fail to understand how the hotspots are added to the cube maps and how the videos(the fireplace and the TV) are placed?
Can anyone with the knowledge about this help me understand.
Thank you.
There are commercial solutions for this available, like
that looks like a software, i’m looking for ways to implement it using 3.js for web.
What you call hotspots are simply CSS2 or CSS3 labels. The same applies to the TV and fireplace, they’re just planes with a VideoTexture.
Once you’ve created your cube or equirectangular panorama, you can add and position any object you want.
For the transitions, create multiple panoramas and switch between them using a transition animation when the labels are clicked.
So those are precisely placed css2’s and planes with video textures. Nice.
I came across amazons virtual store. and things are bit more interesting here:
In this experience you can see a toy train going around the room on a track, digging through the network i found out that the only train is a 3d model and all the tracks and stuff are cube map. Yet there is this masking effect:
The track that you see is a cube map.
Is there any way to render in layers in 3js.
such that i can render bg cube map first, then model then foreground cubemap?
Thats the only way i can think of.
Yep. Background is a simple cubemap. The “track” is part of the image
Yes, it’s one of several glb assets being downloaded
You would get such results by masking out the hidden part of the train, you just need a mask for that, a couple of suggestions:
2 Likes