使用Three.js实现图像变形悬停动效时元素被背景遮挡问题求解

问题根因 #

你参考的动效Demo默认会将Three.js生成的WebGL渲染canvas元素直接插入到<body>根节点下，默认无CSS定位属性，层级优先级低于有定位/背景色的body子级元素，所以子元素加背景后会直接遮挡canvas内的Three.js渲染内容。你给img类加z-index无效是因为img仅为Three.js的纹理加载源，实际渲染的动效内容不在img元素内。

修复步骤 #

• 第一步：开启Three.js渲染器透明配置，避免画布自带黑色背景遮挡底层内容
  修改WebGLRenderer初始化代码，添加alpha: true配置：

const renderer = new THREE.WebGLRenderer({
  alpha: true,
  antialias: true
})

• 第二步：给Three.js生成的canvas元素设置全局CSS，调整层级和交互属性

/* 匹配直接插入body下的Three.js渲染画布，若canvas插入自定义容器可替换对应选择器 */
body > canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 禁止画布接收鼠标事件，让事件穿透到下方的交互元素 */
  pointer-events: none;
  /* 层级设置为高于所有带背景的子元素，可根据实际需求调整数值 */
  z-index: 10;
}

• 第三步：调整带背景的子元素层级
  所有添加了背景色的body子级元素，z-index设置为低于canvas的数值即可，比如设置z-index: 1，确保不会遮挡动效。如果你的悬停区域本身需要显示背景同时触发动效，只需保证悬停区域的z-index低于canvas即可，pointer-events: none属性不会阻挡鼠标事件触发悬停逻辑。

内容的提问来源于stack exchange，提问作者bankandknife