MouseOver effect

Customization
5

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