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

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}。这将使脸部从两侧都可见。

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