Back to the Shapespark home page

Is this possible?

Hi all!

I have been tasked with creating a virtual launch event and we have a few features that we would like to know if it is possible to achieve within Shapespark. I will list them below (sorry it is a long list!):

  1. "Popup Box"/Edit HTML Label - How/can we edit the appearance of an HTML label? We have a few products we want to showcase where users see product info, we have tried an HTML label to a webpage but this looks too “external” and ruins the immersion, we want a small box containing image of product + description next to the object that looks like part of the scene, can this appear on hover?

  2. Object Highlight - Is there a way to outline 3D objects on hover? Again, this is for showcasing products.

  3. Spotify Playlist - We have tried adding a embedded Spotify playlist however we cannot play songs as it says “this song is not currently available in your country” even though it is?

  4. Download image? - is there a way for users to download an image when they click on it?

  5. Private video - This might be a silly one, how do we embedded a video without uploading it to Youtube/Vimeo etc? How can we make it fullscreen on click?

Thanks so much for your help! :smile:

Hey !

  1. The pop up box contains HTML. You can use CSS directly on the element :slight_smile: You can modify the

    itself in the style.css : line 595 (if you have the “plus” version of shapespark). If you don’t, create a bod-end.html in “your documents>shapespark>project’s folder” and write a for #ext-html-label-content.
  2. Outline is impossible as far as I know. You can change the “emission” or “opacity” on hover though:

         function handleHoverChanged(material, hoverActive) {
     		if (hoverActive) 
     		{ = 'pointer';
     			material.emissive = true;
     			material.emissionStrength = 5;				
     		{ = '';
     			material.emissive = false;
     	viewer.onMaterialHoverChanged('tag1', handleHoverChanged); 
  3. Never done that, can’t help you.

  4. “Open url” as extension ?

  5. Put it on your server and make a HTML label with

Hope i helped you !


Thank you so much for your response, I will try your suggestions now!

Where do I have to put the function code to achieve the mouse over effect? In an extra html file?

Hi !

You can either put the code in the .html file after the bundle after :

window.onload = function() {
var config = new WALK.SceneLoadConfig();
config.assetsUrl = ‘2021-01-27-19-36-11/’;

Or in a body-end.html that you put in the shapespark folder before bundle :slight_smile:

Thx, I put it in the body-end.html and it works fine.

Using body-end.html is recommended because it doesn’t require re-adding the code manually every time you update and bundle the scene, the code from body-end.html is appended automatically by Shapespark.