在球体上翻转 Three.js 中的法线

Question

我一直在四处寻找，但还没有找到任何真正好的答案来回答我的问题。 问题是我有这个球体..只是一个基本球体，我想翻转法线，所以 球体获得某种“空心/雕刻效果”，然后将我的纹理应用到球体的“内部”。关于如何翻转法线有什么想法吗？

另外..如果不可能在 Three.js 中做到这一点..是否可以导入法线已经翻转的模型并获得我正在寻找的效果？

Answer 1

此答案仅适用于 r.125 之前的 Three.js 版本。

Legacy

Geometry

类已被删除。

---

您可以通过反转面的缠绕顺序来翻转几何体中的法线。然后你必须修复 UV。

for ( let i = 0; i < geometry.faces.length; i ++ ) {

    const face = geometry.faces[ i ];
    const temp = face.a;
    face.a = face.c;
    face.c = temp;
    
}

geometry.computeFaceNormals();
geometry.computeVertexNormals();

const faceVertexUvs = geometry.faceVertexUvs[ 0 ];
for ( let i = 0; i < faceVertexUvs.length; i ++ ) {

    const temp = faceVertexUvs[ i ][ 0 ];
    faceVertexUvs[ i ][ 0 ] = faceVertexUvs[ i ][ 2 ];
    faceVertexUvs[ i ][ 2 ] = temp;
    
}

但是，您只需设置

Material.side = THREE.BackSide

或

Material.side = THREE.DoubleSide

即可获得相同的效果。

无论哪种情况，您的纹理都会被翻转渲染。您可以预先翻转纹理，或者在 Three.js 之外构建模型并导入它。

三.js r.124

Answer 2

为球体创建材质时，请指定 {side:THREE.DoubleSide}。这将使脸部从两侧都可见。

您也可以在创建材料后随时更改它。

Answer 3

已修复！！

具有负比例的对象的翻转

object.scale.x = -1

也会反转自 Three.js r89以来的法线（请参阅：支持反射矩阵。#12787）。

（但我必须升级到r91才能解决我的正常问题。）

Answer 4

另一种方法是通过使对象的几何形状动态化来简单地手动翻转法线。

mesh.geometry.dynamic = true
mesh.geometry.__dirtyVertices = true;
mesh.geometry.__dirtyNormals = true;

mesh.flipSided = true;

//flip every vertex normal in mesh by multiplying normal by -1
for(var i = 0; i<mesh.geometry.faces.length; i++) {
    mesh.geometry.faces[i].normal.x = -1*mesh.geometry.faces[i].normal.x;
    mesh.geometry.faces[i].normal.y = -1*mesh.geometry.faces[i].normal.y;
    mesh.geometry.faces[i].normal.z = -1*mesh.geometry.faces[i].normal.z;
}

mesh.geometry.computeVertexNormals();
mesh.geometry.computeFaceNormals();