Basic and Advanced Guide before opening the scene implementation

Hello Everyone, I wanted to know if there is way to showcase a guide on how to use or navigate through the scene before opening the scene. Just like the Shapespark website sample scenes where each scenes has Basic and Advanced guide before you explore the scene. Is there a way I can implement it on my project?

Thank you


You can achieve that using HTML Popup. One option is to use a camera volume trigger to open the pop-up upon entering the scene - place the camera volume trigger around the starting camera position.

The other way is to use the viewer js api, you can find an example here:

I hope this helps.

Hi, thank you so much for your reply, I did try doing it using Camera Volume Trigger but it seems to be going over my head since I am new to Shapespark. If its too much of an ask, can you please tell me step by step on how to do it. Otherwise it’s ok, I will keep trying it :slight_smile:

To use the Camera Volume Trigger for HTML Label extensions you need to create a HTML Label extension first. Head to the Interactivity tab.

Please add a new extension and select from the possible types of extensions the HTML Label.

You can then specify the content of the HTML Label and also center it horizontally and vertically if needed. The content can be in HTML, so you have great customization.

You can then specify the trigger for the HTML Label and choose Camera Volume Trigger as the type. Center it around the starting position and that should make the HTML pop-up appear right at the start after any movement of the camera.

Thank you so much I added in the Camera Volume Trigger but still can’t figure out how to show the basic and advanced guide pop up.

That’s the HTML content you have to design yourself. Design how it should look like and then insert it into the HTML Label. I understood that you wanted to create your own guide at the beginning of the scene. Do you actually want to show the help that is already present in shapespark by default at start?

In that case, it’s something much simpler - simply add #help to the url of your scene and the default help guide will appear during loading of the scene and stay till the user closes it. Is this what you wanted to achieve?

Yes, thank you so much that actually worked. Amazing. You have been a huge help :smiley:

1 Like