索引几何体中同一顶点能否设置不同UV与法线值？

场景说明 #

你提到的索引几何体包含2个面、4个顶点，在Three.js中的缓冲区结构如下：

position = [A, B, C, D]
index = [0, 1, 2, 2, 1, 3] // 对应顶点顺序：A,B,C,C,B,D

其中顶点B、C被两个面共享，但在position缓冲区中未重复存储。你希望实现的效果是：让同一个顶点根据所属面拥有不同的UV或法线值，比如：

position = [A, B, C, D]
index = [0,   1,   2,   2,   1,   3]
uv    = [uv1, uv2, uv3, uv4, uv5, uv6]
normal= [n1,  n2,  n3,  n4,  n5,  n6] 

可行实现方法 #

方法1：拆分顶点（最直接原生方案）

Three.js的索引缓冲区核心作用是复用顶点的位置数据，但如果要让同一位置的顶点在不同面拥有不同的UV/法线，本质需要将这些「属性不同的同位置顶点」拆分开，放弃索引对position的复用：

// 重复共享顶点的position数据
position = [A, B, C, C, B, D]
// 可以保留索引（或直接使用非索引几何体）
index = [0, 1, 2, 3, 4, 5]
// 此时uv、normal可以完全按面的顶点顺序对应设置
uv = [uv1, uv2, uv3, uv4, uv5, uv6]
normal = [n1, n2, n3, n4, n5, n6]

这种方式完全符合你的需求，无需额外逻辑，Three.js原生支持。唯一的代价是position缓冲区会有少量冗余数据，但在绝大多数场景下对性能影响可以忽略。

方法2：自定义属性+着色器逻辑（进阶复用方案）

如果希望保留position的索引复用，不重复存储位置数据，可以通过自定义顶点属性结合自定义着色器实现：

1. 为每个顶点存储多组UV/法线数据（比如给B、C各存2组对应不同面的属性）：

position = [A, B, C, D]
index = [0, 1, 2, 2, 1, 3]
// 自定义属性：每个顶点存储多组UV，itemSize设为每组UV的维度（比如2）
uvMulti = [uv1, uv2, uv5, uv3, uv4, uv6]

2. 在自定义ShaderMaterial中，通过顶点的索引或自定义的面标识属性，判断当前顶点所属的面，选择对应的UV/法线数据进行渲染。这种方式需要自行管理顶点与面的对应关系，对Three.js着色器机制有一定要求。

关键限制说明 #

Three.js的BufferGeometry要求所有顶点属性（position、uv、normal等）的顶点数量必须一致（通过itemSize定义每个顶点的属性元素个数）。你示例中uv、normal长度与索引长度一致的写法是不支持的——索引是用来索引顶点属性的，属性数组的长度必须对应position的顶点数，而非索引数。因此方法1是最贴合需求的原生实现方式。

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