three平面中三角形绘制方式，以及正反面判定方式

注意：屏幕空间中的顺时针与逆时针与我们看向屏幕的方向是相反的

小技巧：因此，我们可以理解为，我们看到的顺时针为正面，逆时针为反面

如果绘制的平面正反面反了，则调整三角形绘制方向，一般情况下为逆时针方向

a -- b
|  / |
c -- d

• 三角形 1: (a, b, c)

• 三角形 2: (c, b, d)

或者（a,b,c）(b,d,c)：只要绘制方向正确，从任意一个点开始绘制皆可

通过共享边 (b, c)，形成连续的平面。

顺时针时：

(a, c, b)

(b, c, d)

 

1. 顶点的绘制顺序

默认情况下，WebGL 会将顶点按照屏幕空间的**逆时针顺序（Counter-Clockwise, CCW）**排列的三角形视为正面。顶点顺序直接决定了一个三角形的正反面。

• 逆时针为正面（默认设置）：
  顶点顺序：A -> B -> C

    A —— B
     \   |
      \  |
         C

  屏幕空间中，顶点 A -> B -> C 是逆时针方向，所以被视为正面。

• 顺时针为背面：
  顶点顺序：A -> C -> B

    A —— B
     \   |
      \  |
         C

  屏幕空间中，顶点 A -> C -> B 是顺时针方向，所以被视为背面。

---

2. 渲染器的默认剔除设置

Three.js 默认启用背面剔除（Backface Culling），即：

• 正面（逆时针）三角形会被渲染。

• 背面（顺时针）三角形会被剔除，不参与渲染。

可以通过以下方式修改：

• 材质的 side 属性控制渲染规则：

  • THREE.FrontSide（默认值）：只渲染正面。

  • THREE.BackSide：只渲染背面。

  • THREE.DoubleSide：渲染正面和背面。

---

3. 控制顺序的 OpenGL 状态

WebGL 和 OpenGL 提供了一个状态叫做正面定义模式，可以用来更改默认规则。

• 默认情况下，正面是逆时针（CCW）。

• 可以通过设置为**顺时针（CW）**来将顺时针的三角形视为正面。

在 WebGL 中，你可以通过以下代码更改正面定义：

gl.frontFace(gl.CW); // 顺时针为正面 gl.frontFace(gl.CCW); // 逆时针为正面（默认值）

Three.js 中没有直接的方法更改 frontFace，但可以通过调整顶点顺序或切换材质的 side 属性达到类似效果。

---

4. 正反面的视角相关性

• 视角变化会影响屏幕空间顶点顺序：
  例如：

  • 原本一个三角形的顶点 A -> B -> C 是逆时针，改变视角后可能变为顺时针。

• 影响：
  如果开启了背面剔除，背面三角形会消失。

• 解决方案：

  • 使用 THREE.DoubleSide 渲染正面和背面。

  • 确保视角不会导致三角形翻转。

---

5. 使用场景

• **默认渲染规则（逆时针为正面）**适用于大多数情况。

• 如果你的模型或几何体出现了正反面不一致的问题，可以：

  • 调整顶点顺序：确保三角形的正面是逆时针。

  • 修改材质的 side 属性：选择 THREE.DoubleSide 以渲染正反面。

---

 

示例代码

创建一个逆时针定义的三角形：

const indices = [0, 1, 2]; // 逆时针 A -> B -> C
geometry.setIndex(indices);

创建一个顺时针定义的三角形：

const indices = [0, 2, 1]; // 顺时针 A -> C -> B
geometry.setIndex(indices);

使用双面材质渲染正面和背面：

const material = new THREE.MeshBasicMaterial({
  color: 0xff0000,
  side: THREE.DoubleSide,
});

默认规则：逆时针为正面，顺时针为背面。

背面剔除：默认开启，避免渲染多余的背面。

修改顺序或渲染规则：通过调整顶点索引或设置材质属性（side）来适应需求。