Back to the Shapespark home page

MouseOver effect

Hi.
Is there a way to add a mouseOver effect to surfaces? This would be interesting for highlighting possible interactions with objects.

4 Likes

There is no way to do it. In general the mouseOver (aka mouse hover) event is not compatible with touch screens, because there is no pointer on the screen. We experimented with it some time ago, but decided to implement triggers - additional elements in the scene that stand our from the rest so that their interactivity is noticeable.

That said, with the recently added option of using any object in the scene as a trigger, it would be good to somehow show that this particular object is clickable. Unfortunately, I am afraid we won’t be able to implement it in the near future, so for now the way to go is choosing such scene objects which interactivity may be assumed by the viewer.

One suggestion might be that you only change the mouse pointer (to pointer mode) when hovering over a trigger. This would only affect PC usage, and would show that there is interactivity at that point. As much as it doesn’t work on touch devices, it would be a great improvement.

1 Like

There is no way to access the mouse hover function of a trigger? to do javascript behavior?

We experimented with a JavaScript API function to listen for hovering over a particular material some time ago. We were thinking of dropping it and looking for a more general solution for emphasizing clickable objects in the scene (including triggers). However, I see the function hasn’t been dropped yet, so I have to back off from my statement that “there is no way do it” (sorry for the confusion, @tim).

To make the mouse cursor change when it hovers over materials MATERIAL-1, MATERIAL-2, …, MATERIAL-n you can add a Script extension with the following code:

const viewer = WALK.getViewer();

function handleHoverChanged(material, hoverActive) {
  if (hoverActive) {
    document.body.style.cursor = 'pointer';
  } else {
    document.body.style.cursor = '';
  }
}

viewer.onMaterialHoverChanged('MATERIAL-1', handleHoverChanged);
viewer.onMaterialHoverChanged('MATERIAL-2', handleHoverChanged);
...
viewer.onMaterialHoverChanged('MATERIAL-n', handleHoverChanged);

If you have a separate material for each of your trigger, you could extend the handleHoverChanged function to also highlight the material by making it emissive:

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();
  }
}
2 Likes

Thank’s for the scripts, @wojtek . I already was thinking about finding a solution with the emissive settings of a material. We will for sure test those options.

Thank you!

Hello @tim and @wojtek

I’m testing the possibilities of Shapespark, but so far I haven’t been able to use any of the scripts mentioned here on the forum. @tim Were you able to get the above script to work? can you share with us?

@wojtek, I take the opportunity to ask if there are any limitations for these scripts to work. Do I need to have a specific license?

We created the effect (and it looks really cool) but I am not sure if we used @wojtek script because we made several additional adjustments on a virtual gallery scene where we had a programmer who solved this.

@Rafael_Lamounier, this script should work with your plan. Could you share a link to the scene so that we could take a look at the issue?