如何消除Three.js中Cube映射BoxBufferGeometry的法线贴图接缝？

我之前也碰到过类似的坑——把高细分Box拉成球面后，法线贴图在接缝处直接乱掉，折腾了好一阵才摸清楚根源。咱们先拆解问题：你现在是把Box的顶点归一化拉成球面，但原Box的UV是按六个独立面生成的，转成球面后这些UV在球体的“经线”位置（对应Box的棱边）完全不连续；而且你只更新了顶点位置和法线，却没处理切线属性——法线贴图是基于切线空间计算的，没有正确的切线，接缝处的法线采样肯定会出错。

下面是具体的解决步骤，一步步来：

1. 替换原Box的UV为球面UV #

原来的Box UV是每个面从(0,0)到(1,1)，转成球面后完全不匹配。咱们需要手动计算球面坐标对应的UV：

• 把顶点的三维坐标转成球坐标系（方位角φ，极角θ）
• 再把φ映射到U轴（0-1范围），θ映射到V轴（0-1范围）

2. 计算正确的切线属性 #

Three.js的法线贴图依赖tangent和bitangent属性，你修改了顶点位置和法线后，必须重新计算切线，否则切线空间会彻底错乱。

3. 合并重复顶点（可选但强烈推荐） #

Box转成球面后，原来Box棱边和角落的顶点在球面上是重合的，但几何体里它们是独立的顶点，这会导致接缝处的UV和法线无法连续。用mergeVertices()可以合并这些重复顶点，让接缝处的属性保持一致。

完整修改后的代码示例 #

const radius = 1;
// 创建高细分Box几何体
let geometry = new THREE.BoxBufferGeometry(1, 1, 1, 64, 64, 64);
const vertices = geometry.attributes.position;
const normals = geometry.attributes.normal;
const uvs = geometry.attributes.uv;

// 1. 拉顶点成球面，同步更新法线和UV
for (let i = 0; i < vertices.count; i++) {
    const v = new THREE.Vector3().fromArray(vertices.array, i * 3);
    // 归一化得到法线方向
    v.normalize();
    normals.setXYZ(i, v.x, v.y, v.z);
    // 拉到指定半径
    v.setLength(radius);
    vertices.setXYZ(i, v.x, v.y, v.z);

    // 计算球面UV
    const phi = Math.atan2(v.z, v.x); // 方位角，范围 -π 到 π
    const theta = Math.acos(Math.max(-1, Math.min(1, v.y / radius))); // 极角，范围 0 到 π
    const u = (phi + Math.PI) / (2 * Math.PI); // 映射到U轴 0-1
    const vUv = 1 - theta / Math.PI; // 映射到V轴 0-1（从顶部到底部）
    uvs.setXY(i, u, vUv);
}

// 2. 标记属性需要更新
vertices.needsUpdate = true;
normals.needsUpdate = true;
uvs.needsUpdate = true;

// 3. 合并重复顶点，解决接缝处属性不连续问题
geometry.mergeVertices();

// 4. 计算切线，法线贴图必须依赖这个
geometry.computeTangents();

// 后续创建材质时，记得启用法线贴图
const material = new THREE.MeshStandardMaterial({
    map: yourBaseTexture,
    normalMap: yourNormalTexture,
    normalScale: new THREE.Vector2(1, 1)
});
const mesh = new THREE.Mesh(geometry, material);

额外注意点 #

• 如果你的法线贴图是专为球面制作的，要是接缝还是有问题，可以试试调整V轴的映射方向，把vUv = 1 - theta / Math.PI改成vUv = theta / Math.PI。
• mergeVertices()会自动合并重复顶点的所有属性（UV、法线、切线），这是解决接缝问题的关键——原来Box的棱边顶点在球面上是同一个点，但属性可能不一致，合并后就能统一。

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