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

本文介绍了在球体上的three.js中翻转法线的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

限时送ChatGPT账号..

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

I have been searching around and haven't found any really good answer to my question yet.. The thing is that I have this sphere.. just a basic sphere, and I want to flip the normals so the sphere gets the sort of "hollow/carved effect" and then plater on apply my textures to the "inside" of the sphere. any ideas of how to flip the normals?

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

Also.. if its not possible to do this in three.js.. would it be possible to import a model where the normals are already flipped and get the effect I'm looking for?

推荐答案

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

You can flip the normals in your geometry by reversing the winding order of your faces. You then have to fix UVs.

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;

}

geometryputeFaceNormals();
geometryputeVertexNormals();

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 来获得相同的效果.

However, you can get the same effect by simply setting Material.side = THREE.BackSide, or Material.side = THREE.DoubleSide.

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

In either case, your texture will be rendered flipped. You can either flip your texture before-hand, or build a model outside of three.js and import it.

three.js r.65

three.js r.65

这篇关于在球体上的three.js中翻转法线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！