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;
}
});
},
};
}