如何在Three.js中实现圆柱与球体或有机模型相切？

我完全懂你现在的困扰——想让圆柱沿着目标网格的法线方向放置，还得和球体或者有机物体的表面精准相切，但折腾半天始终达不到预期效果。先拆解下你当前代码里的问题，再一步步给出调整方案。

首先看你给出的代码片段：

const geometry = new THREE.CylinderGeometry( radius, radius, height, 32 );
geometry.translate( 0, height / 2, 0 );

这段代码只是把圆柱的原点从中心移到了底部位置，但完全没处理法线方向的旋转对齐，也没确保圆柱底部和网格表面的贴合关系，这就是没法实现相切的核心原因。

下面是调整后的完整实现思路和代码，能帮你实现精准相切的效果：

核心实现步骤 #

• 获取网格表面的目标点与对应法线（务必保证法线是归一化的世界空间向量）
• 把圆柱的底部中心精准对齐到网格表面点
• 让圆柱的轴线完全贴合法线方向

修改后的代码 #

cylinder(surfacePoint: THREE.Vector3, normal: THREE.Vector3, radius: number, height: number, name: string = 'cylinder') {
    // 确保法线是单位向量，避免旋转偏差
    normal.normalize();

    // 创建圆柱几何体，默认轴线沿Y轴
    const geometry = new THREE.CylinderGeometry(radius, radius, height, 32);
    // 将几何体原点移到底部中心，这样底部刚好在(0,0,0)位置
    geometry.translate(0, height / 2, 0);

    // 替换成你自己的材质
    const mesh = new THREE.Mesh(geometry, yourMaterial); 
    mesh.name = name;
    // 让圆柱底部中心对齐到网格表面点，实现相切
    mesh.position.copy(surfacePoint);

    // 计算旋转矩阵，让圆柱轴线对齐法线方向
    const up = new THREE.Vector3(0, 1, 0);
    let tangent = new THREE.Vector3();
    // 处理法线与Y轴几乎重合的特殊情况
    if (Math.abs(normal.dot(up)) < 0.9999) {
        tangent.crossVectors(normal, up).normalize();
    } else {
        tangent.crossVectors(normal, new THREE.Vector3(1, 0, 0)).normalize();
    }
    // 构建正交的副法线向量
    const binormal = new THREE.Vector3().crossVectors(normal, tangent).normalize();
    // 生成旋转矩阵，让圆柱Y轴对齐法线
    const rotationMatrix = new THREE.Matrix4();
    rotationMatrix.makeBasis(tangent, normal, binormal);
    mesh.setRotationFromMatrix(rotationMatrix);

    return mesh;
}

额外注意事项 #

如果你的法线是从网格的顶点/面获取的局部空间法线，需要先转换为世界空间：

// 示例：获取顶点法线并转换到世界空间
const localNormal = new THREE.Vector3(
    mesh.geometry.attributes.normal.getX(vertexIndex),
    mesh.geometry.attributes.normal.getY(vertexIndex),
    mesh.geometry.attributes.normal.getZ(vertexIndex)
);
const worldNormal = localNormal
    .applyMatrix3(new THREE.Matrix3().getNormalMatrix(mesh.matrixWorld))
    .normalize();

这样调整后，圆柱就能精准沿着法线方向和网格表面相切了。

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