ThreeJS自定义BufferGeometry边缘Shader失效及UV设置疑问

针对你用修改自@prisoner849的边缘描边Shader在自定义BufferGeometry上的问题，核心原因是该Shader依赖UV坐标的边界检测生成边缘，自定义几何体必须给每个面配置正确的UV映射，才能让Shader正常工作。

关键思路 #

立方体的6个面都是独立平面，每个面的UV需要映射到[0,1]×[0,1]的矩形范围——Shader正是通过判断UV是否接近0或1的边界来识别边缘。如果多个面共享顶点且UV值冲突，或者某个面的UV未覆盖完整0-1范围，就会出现边缘显示异常。

具体实现步骤 #

1. 采用非共享顶点结构
   自定义立方体时，不要让不同面共享顶点（BoxGeometry默认共享顶点，但内部通过索引和重复UV处理），而是给每个面单独创建4个顶点。这样每个顶点的UV可以独立设置，避免冲突。

2. 逐个面配置UV
   每个面的UV按矩形四个角的顺序设置为(0,0)、(1,0)、(1,1)、(0,1)，对应面的左下、右下、右上、左上顶点。六个面的UV数组直接重复这个序列6次即可。

3. 代码示例

// 自定义立方体顶点数组（每个面4个顶点，共24个顶点）
const positions = new Float32Array([
  // 正面（Z+）
  -1, -1, 1, 1, -1, 1, 1, 1, 1, -1, 1, 1,
  // 背面（Z-）
  -1, -1, -1, -1, 1, -1, 1, 1, -1, 1, -1, -1,
  // 顶面（Y+）
  -1, 1, -1, -1, 1, 1, 1, 1, 1, 1, 1, -1,
  // 底面（Y-）
  -1, -1, -1, 1, -1, -1, 1, -1, 1, -1, -1, 1,
  // 右面（X+）
  1, -1, -1, 1, 1, -1, 1, 1, 1, 1, -1, 1,
  // 左面（X-）
  -1, -1, -1, -1, -1, 1, -1, 1, 1, -1, 1, -1
]);

// 生成UV数组：每个面重复[0,0, 1,0, 1,1, 0,1]
const uvs = new Float32Array(24 * 2);
const faceUV = [0, 0, 1, 0, 1, 1, 0, 1];
for (let i = 0; i < 6; i++) {
  uvs.set(faceUV, i * 8);
}

// 创建BufferGeometry并添加属性
const geometry = new THREE.BufferGeometry();
geometry.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3));
geometry.setAttribute('uv', new THREE.Float32BufferAttribute(uvs, 2));
// 添加索引（可选，减少顶点数据量，需确保索引对应正确顶点顺序）
const indices = new Uint16Array([
  0,1,2, 0,2,3,
  4,5,6, 4,6,7,
  8,9,10, 8,10,11,
  12,13,14, 12,14,15,
  16,17,18, 16,18,19,
  20,21,22, 20,22,23
]);
geometry.setIndex(new THREE.Uint16BufferAttribute(indices, 1));

为什么之前添加UV后异常？ #

如果你的自定义几何体是共享顶点结构，同一个顶点被多个面共用，但你给它设置了单一UV值，就会导致不同面的UV映射混乱——Shader无法正确识别每个面的边缘边界。改用非共享顶点+每个面独立配置UV的方式，就能彻底解决这个问题。

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