如何让THREE.Group始终渲染在其他对象前方且组件层级正常

直接给THREE.Group设置DepthWrite没用——Group只是个容器，本身不参与渲染，得换个思路：

• 核心操作：遍历Transform Controls的所有子网格组件，给它们的材质做以下设置：

  controls.traverse(child => {
    if (child.isMesh) {
      // 让控件组件最后渲染，确保在普通对象前面
      child.material.renderOrder = 100;
      // 强制控件忽略场景中其他对象的深度，始终渲染出来
      child.material.depthFunc = THREE.AlwaysDepth;
      // 保持默认的深度检测和深度写入，确保组件之间正常遮挡
      child.material.depthTest = true;
      child.material.depthWrite = true;
    }
  });
  

• 原理：
  1. renderOrder设为较高值，让控件组件在场景所有普通对象之后渲染，自然覆盖在前面。
  2. depthFunc = THREE.AlwaysDepth让控件无视其他对象的深度缓存，不管被挡住多少都会显示。
  3. 保留depthTest和depthWrite为true，控件内部的轴、平面组件之间会正常进行深度检测，不会出现互相重叠的问题。

如果场景里还有其他高renderOrder的对象，把100改成更大的数值就行，保证控件的renderOrder是最高的。

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