Question

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

另外..如果不能在three.js中执行此操作..是否可以导入一个已经翻转法线的模型并获得我正在寻找的效果？

Answer 1

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

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

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

}

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

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

    var temp = faceVertexUvs[ i ][ 0 ];
    faceVertexUvs[ i ][ 0 ] = faceVertexUvs[ i ][ 2 ];
    faceVertexUvs[ i ][ 2 ] = temp;

}

但是，只需设置Material.side = THREE.BackSide或Material.side = THREE.DoubleSide即可获得相同的效果。

在任何一种情况下，您的纹理都会被渲染翻转。您既可以预先翻转纹理，也可以在three.js之外构建模型并导入它。

three.js r.65

Answer 2

在为球体创建材质时，请指定{side：THREE.DoubleSide}。这将使双方都能看到面孔。

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

Answer 3

固定!!

具有负刻度object.scale.x = -1的对象的翻转也会反转自three.js r89以来的法线（请参阅：Support reflection matrices. #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();

翻转球体上的three.js中的法线

4 个答案: