MouseOver effect

Customization
12

I understand. Could you please show us the effect which your programmer was able to create ?

13

@wojtek , i tried to the test the HandleHover script on a carpet in shapespark example scene, i created a script extension and added the emissive part/code of the script in it and assigned the trigger as object type to carpet. But nothing worked, is there anything i am doing wrong or how to make it work?

Here is the scene where i tested it:

https://3d.qubic.media/example-room/

14

how to open the script editor ?

15

@Mahesh, the script doesn’t seem to be complete. It lacks:

const viewer = WALK.getViewer();

at the beginning and

viewer.onMaterialHoverChanged('Rug', handleHoverChanged);

at the bottom.

Also, this script has to be executed when the scene is loaded, so the extension must not have a trigger.

1 Like
16

The Script extension can be added in the “Extensions” panel of the “Viewer” tab. However, the primary and advised way to insert own JavaScript code is through a body-end.html file located in the scene directory.

1 Like
17

Thank you so much @wojtek, This seems to work perfectly now , Greatly appriciate your quick feedback :blush:

18

Yes, this script works very fine! Thanks @wojtek!

In my opinion it may be a lower value for emissive materials, for example 0.5
Codes should be placed between <script> and </script> before saving in body-end.html

So this is the content of body-end.html file:

image
image806×466 27.1 KB

<script>
const viewer = WALK.getViewer();

function handleHoverChanged(material, hoverActive) {
  if (hoverActive) {
    document.body.style.cursor = 'pointer';
    material.emissive = true;
    material.emissionStrength = 0.5;
    viewer.requestFrame();
  } else {
    document.body.style.cursor = '';
    material.emissive = false;
    viewer.requestFrame();
  }
}

viewer.onMaterialHoverChanged('Rug', handleHoverChanged);
</script>

In most cases where the trigger object in the scene has only one material with a unique name (for example art painting) this is a great solution. What happens when the trigger has more material?

Can the emission of material be related to the camera approaching the trigger? Maybe this would be a good solution for mobile devices and tablets?

3 Likes
19

For such a case you can try to wrap a trigger into a transparent/semi-transparent object having just one material, and modify the opacity/emission properties of the wrapping material.

We don’t have plans to add such a built-in behavior for now, but the Viewer.getCameraPosition API function makes implementing it possible.

1 Like
20

Hello,

i’ve tried this with the example-room and the code above (copy paste from Vladan’s post) in the body-end.html file (located in the scene directory, same folder as the index.html) but it doesn’t do anything at all … 3D scene

Can someone help me?

Thank you !

1 Like
21

Hi @Thyronia,

your script is not included in index.html

image
image827×69 4 KB

Try moving body-end.html to the “2020-09-27-13-39-39” folder.

Regards!

2 Likes
22

Hi @Vladan,

thanks a lot for your help ! Moving body-end.html didn’t worked at all … (i tried almost every folder …)

But thanks to you, i wrote the script in the index.html and it works fine now ! :slight_smile:

3 Likes
23

The “example-room” scene folder is easily located by searching the computer.

image
image800×100 8.06 KB

body-end.html files can be added to this folder for testing.

After packing the files for self hosting, a difference is noticed in the index.html file when the working folder is without and with body-end.html

image
image1642×308 25.3 KB

@wojtek,
Is body-end.file unnecessary in the self-hosting folder if it was in the working directory?

24

Sorry for the troubles, the ‘example-room’ is tricky to test HTML modifications. This is because this scene is bundled and updated together with Shapespark, unlike all other scenes it is not located in Documents\Shapespark and there are some custom rules for handling it. Could you rename the scene to any other name, for example example-room2, put it in Documents\Shapespark together with your body-end.html file and try again?

25

Hi! I’d like to know if there is any way to have a hover effect that would play a video assigned to a material once the mouse is over that given surface - and also stop once the mouse moves elsewhere?

I’m looking for an interactive portal that would work as a trigger between scenes.

26

Try solution provided in Wojtek’s post: MouseOver effect - #5 by wojtek
But instead of changing emissive properties of the material, call material.play() and material.pause()

1 Like
27

Thanks, I’ll try this!

28

Hello! I really like this style. Can you share this example document with me?
My gmail is kimi8studio@gmail.com
Thank you very much!

30

@Vladan

Hello everything is fine? I’m following the steps, but the script doesn’t work

First I created a scene with an Object called Rug, and I applied a Material also called Rug to it. extracts the Body-End.html of my scene straight from shapespark.

I copied this file to the Documents > File Name folder.

I added the Script.

but it doesn’t work, mouse “arrow” doesn’t change when hovering over material/object

31

@paulocp39 Could you upload the scene and share a link to it ? Do you test it outside of the Shapespark editor? The editor doesn’t apply customizations done through the body-end.html, you need to open the scene in the preview mode instead.

1 Like
32

This is a scene i use to test some scripts

https://3d.younion.me/cena_teste/

Script - Print Screen > Ok
Script - Welcome > Ok
Script - Chat > In progress ( if there is a model to give me, thank you, I’m lost in this )
Script - MouseOver Effect > Don´t Work

print
print933×934 117 KB