【问题标题】:Flip normals in three.js on sphere在球体上的three.js中翻转法线
【发布时间】:2023-03-27 07:57:02
【问题描述】:

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

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

【问题讨论】:

  • 改用material.side = THREE.BackSide 看看结果是否适合您。
  • 我猜这可能行得通...任何其他想法也是最受欢迎的 :) 我会尝试上面的方法,我会回复它的进展情况
  • Hela 的坦克.. 似乎直到达到预期效果 :-)

标签: three.js flip normals


【解决方案1】:

已修复!!

具有负比例object.scale.x = -1 的对象的翻转也会反转自three.js r89 以来的法线(参见:Support reflection matrices. #12787)。

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

【讨论】:

  • 这对我在 r91 中使用 shadermaterial 不起作用。设置方面:THREE.BackSide 虽然有效。
【解决方案2】:

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

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();

【讨论】:

  • __dirtyVertices 已于 3 年前从图书馆中删除。您使用的是旧版本的库。
【解决方案3】:

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

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

【讨论】:

    【解决方案4】:

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

    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.BackSideMaterial.side = THREE.DoubleSide 即可获得相同的效果。

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

    three.js r.65

    【讨论】:

    • 好吧,这让我很困惑,在天空盒中使用上面的代码,我必须设置side:THREE.FrontSide,但纹理仍然呈现翻转。通过翻转纹理,我得到别名。所以我必须构建另一个 BoxGeometry?为什么从顶点构建的 BoxGeometry 会在不翻转纹理的情况下渲染它?
    • @aboutqx 如果您有任何问题,您需要在新帖子中提出。
    • 这个解决方案是让光线投射器工作的方法。 Ray caster 只能看到侧面,doubleSide 不起作用。
    • @arpo Raycaster 支持 THREE.DoubleSide 用于网格。
    • @WestLangley 第一百次你的帮助拯救了我的生命!谢谢!
    猜你喜欢
    • 2014-11-05
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2019-07-12
    • 1970-01-01
    • 2013-06-22
    • 1970-01-01
    相关资源
    最近更新 更多