How to create a Virtual 360 showroom with hotspots

[aenc_randyc]

Hi, can SU/VRay combo create virtual 360 showrooms with clickable hotspots? kind of like this: https://consultation.ai/demo/

TIA.

[konstantin_chaos]

Hi aenc_randyc,

The complete presentation that you've shared consists of 2 components:
- The rendered image
- The html web page

V-Ray can take care of the first one - the rendered image.
Use the following steps to set it up:
- Select a central position for your scene camera / view. It's a good idea to keep the camera horizontal - not looking up or down.
- In the V-Ray Camera Settings change the cam mode to VR Spherical or Cube depending on what the web page viewer will use at the end.
- Choose a resolution from Settings / Render Output. Note that the aspect ratio will be automatically set based on the camera mode.
- Render and save out the image.

To finalize your web presentation you'll also have to take care of the following (V-Ray not involved):
- Find a library that lets you view spherical or cube-map images in a web browser
- Use the same tool to position the UI elements

Hope that makes sense,
Konstantin

[aenc_randyc]

Thank you Konstantin! May I ask "Find a library in a browser", what "library" are you referring to? HTML?

[konstantin_chaos]

Thank you Konstantin! May I ask "Find a library in a browser", what "library" are you referring to? HTML?

A Javascript library I guess.
I haven't created such presentations myself.

Maybe someone else here can recommend something appropriate.
Here's a random google search result:
https://medium.com/@aramvr/8-javascr...s-85261f86aeb3

[Micha]

For showrooms and VR I like 3DVista, but also other tools like Pano2VR are working. 3Dvista is quite easy to use and you can easy create an offline version for your clients.

[aenc_randyc]

For showrooms and VR I like 3DVista, but also other tools like Pano2VR are working. 3Dvista is quite easy to use and you can easy create an offline version for your clients.

3DVista and Pano2VR and most of the Javascript library seems all use photos, but what if I want to have a tradeshow or showroom in a 3D environment rather than photos?

[Micha]

OK, that something other and has nothing to do with V-Ray. You are looking for something like WebGL ... .

[aenc_randyc]

OK, thanks all, I am going to follow konstantin_chaos's steps and try to render out a spherical map first, then figure how the rest works.

[konstantin_chaos]

Hi aenc_randyc,

Micha is correct here.
Creating a fully 3D web experience will require a WebGL engine and will be quite a bit more complicated.
TreeJS is one of the more popular ones that you can check out:
https://threejs.org/
Here's one good interior example:
https://showroom.littleworkshop.fr/

Keep in mind that original example you shared is not using this technique - it's just an image.
And if the user will not be able to walk around in the set, I'd recommend you do the same.

Regards,
Konstantin

[Micha]

A nice feature for getting a better feeling for the space during a VR tour based on panorama can be found at 3Dvista. It's an easy to use, but cool feature - 3D transition:
https://www.youtube.com/watch?v=Iz8UIhW4AEM&t=35s