Is this possible?

Customization
1

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:

2

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) 
 		{
 			document.body.style.cursor = 'pointer';
 			material.emissive = true;
 			material.emissionStrength = 5;				
 			viewer.requestFrame();
 		} 
 		else 
 		{
 			document.body.style.cursor = '';
 			material.emissive = false;
 			viewer.requestFrame();
 		}			
 	}
 	
 	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 !

4 Likes
3

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

4

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

5

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/’;
WALK.init(config);

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

6

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

7

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.

9

Is there a way to make the color transition smoother?

10

Hey ! I haven’t used Shapespark in a while but I think that it’s not possible with the API only. If I remember correctly, I’ve read about people using TweenJS and/or Three.js directly into the scene. I don’t know those frameworks but I’d look into that if I had to do that :slight_smile:

Good luck !

1 Like