ThreeJS中轴缩放为负值是否会影响渲染的正反面？

我创建了一个顶点按逆时针排列的三角形（朝向屏幕的一侧为正面），对应的几何与UV设置代码如下：

let geometry = new THREE.BufferGeometry();
geometry.setAttribute(
  "position",
  new THREE.BufferAttribute(
    new Float32Array([-1.0, 1.0, 0, -1.0, -1.0, 0, 1.0, 1.0, 0]),
    3
  )
);
geometry.setAttribute(
  "uv",
  new THREE.BufferAttribute(new Float32Array([0.0, 1.0, 0, 0, 1.0, 1.0]), 2)
);

let mesh = new THREE.Mesh(
  geometry,
  new THREE.MeshBasicMaterial({
    map: new THREE.TextureLoader().load("/1.png"),
  })
);

随后我克隆该网格并设置X轴缩放为-1，代码如下：

let clonedMesh = mesh.clone(true);
scene.add(mesh);
clonedMesh.scale.set(-1, 1, 1);
clonedMesh.position.x = 2;
scene.add(clonedMesh);

实际渲染结果与理论差异 #

理论上认为顶点顺序变为顺时针、正面朝向屏幕内部，克隆网格应该不可见，但实际情况是克隆网格依然会被渲染出来。

原因在于ThreeJS结合WebGL的渲染逻辑：

• 负缩放会让模型局部坐标系镜像翻转，但WebGL在判断面的朝向时，会结合物体的变换矩阵重新计算最终的正面方向，而非仅依赖原始顶点顺序
• MeshBasicMaterial默认的side: THREE.FrontSide会基于变换后的坐标系判断正面，因此镜像后的模型依然会被识别为正面朝向屏幕

如何让镜像模型被剔除 #

如果需要让镜像后的模型不渲染，可以通过以下方式实现：

• 修改材质的side属性为THREE.BackSide，让材质只渲染背面
• 手动调整几何体的顶点顺序，将逆时针改为顺时针
• 对克隆后的几何体调用geometry.scale(-1,1,1)直接修改顶点数据，而非通过物体变换实现镜像

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