Three.js透明纹理显示异常：移动mesh时透明部分变为场景背景色

地面上方创建搭载透明纹理的Mesh，移动Mesh时，纹理透明部分会在部分区域变为场景背景色。
异常效果：

该问题属于三维渲染中透明物体的深度排序异常：

开启透明属性的材质默认会写入深度缓冲，当透明区域先写入深度值后，本应该透过透明区域显示的地面等下层物体，会被深度测试判定为被遮挡而不渲染，最终透明区域直接显示场景背景色。移动Mesh时深度写入顺序动态变化，就会出现部分区域时好时坏的异常表现。

按优先级依次尝试以下配置修改即可解决：

• 关闭透明材质的深度写入
  在Mesh的材质配置中新增depthWrite: false，禁止透明材质写入深度缓冲，避免遮挡下层物体：

  let material = new THREE.MeshBasicMaterial({
    side: THREE.DoubleSide,
    color: 0xFFFFFF,
    map: new THREE.TextureLoader().load(_background),
    transparent: true,
    opacity: 1,
    depthWrite: false // 新增配置
  });
  

  如果你的透明纹理是硬边Alpha（比如logo、图标类PNG），可以额外添加alphaTest: 0.1~0.5（数值根据纹理透明度调整），直接丢弃低于阈值的透明片元，彻底规避排序问题。

• 调整渲染顺序
  手动指定下层地面和上层透明Mesh的渲染顺序，保证地面先渲染、透明Mesh后渲染：

  // 地面Mesh配置
  ground.renderOrder = 1
  // 透明纹理Mesh配置
  transparentMesh.renderOrder = 2
  

• 排查对数深度缓冲兼容性
  你当前开启了logarithmicDepthBuffer参数，部分浏览器/显卡对该特性和透明材质的兼容存在问题，可以先关闭该参数测试是否恢复正常：

  this.renderer = new THREE.WebGLRenderer({
    antialias: true,
    alpha: true,
    logarithmicDepthBuffer: false // 关闭对数深度缓冲
  });
  

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