0

I have a function that changes the transparency of all meshes (except one specified) in a loaded .glb object using THREE.js; according to the position of the mouse scroll. It all works well except that the shadows the object cast remain visible. So the object fades nicely to invisible and back again, but the shadow it casts on the object underneath remains visible. So it looks a bit odd. Can anyone offer any ideas on this? I’m a bit stumped, as you don’t seem to be able to access the shadow except to make it true or false, and I’m fairly new to THREE.js

function lerp(x, y, a) {
  return (1 - a) * x + a * y;
}

function scalePercent(start, end, scrollPosY) {
  return (scrollPosY - start) / (end - start);
}


export function lerpChangeAllTransparency(name, el, startPer, endPer) {
  return {
    frame: name, //Keyfram name that the animation plays in
    command: el.command, //Animation type
    start: startPer, //Scroll percent animation starts
    end: endPer, //Scroll percent the animation stops
    target: el.target, //Target to be made transparent/not
    alphaFrom: el.alphaFrom, //Start transparentcy
    alphaTo: el.alphaTo, //End transparency

    //Function called from update when animation is playing
    func: (loadedObject, scrollPercent, target, from, to) => {
      const percent = scalePercent(startPer, endPer, scrollPercent);
      const currentAlpha = lerp(from, to, percent);
      const targetArray = target.split(',');

      loadedObject.traverse((child) => {
        if (child.isMesh && child.material) {
          // Skip target items that should remain unaffected
          if (targetArray.includes(child.name)) return;

          // Clone material only once and enable transparency
          if (!child.userData.hasTransparentMaterial) {
            const cloned = child.material.clone();
            cloned.transparent = true;
            child.material = cloned;
            child.userData.hasTransparentMaterial = true;
          }

          // Apply lerped opacity
          child.material.opacity = currentAlpha;
        }
      });
    },
  };
}

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.