在three.js中转换顶点法线 [英] Transforming vertex normals in three.js

问题描述

我在THREE.js中遇到了顶点法线的困难。 （作为参考，我正在使用修订版58.）由于各种原因，我想在设置几何体时首先计算面顶点法线，然后自由变换它，合并等等。

I'm having difficulties with vertex normals in THREE.js. (For reference I'm using revision 58.) For various reasons I'd like to first calculate the face vertex normals when I setup my geometry, then be free to transform it, merge and whatnot.

虽然我意识到法线依赖于应用矩阵时变换的顶点，但我认为geometry.applyMatrix也能够对它们进行变换。但是，虽然以下工作正常：

While I realize the normals depend on the vertices which are transformed when you apply a matrix, I thought geometry.applyMatrix was able to transform them as well. However, while the following works fine:

geometry.applyMatrix(new THREE.Matrix4().makeScale(1, -1, 1));
geometry.computeFaceNormals();
geometry.computeVertexNormals();

...以下操作顺序产生反转顶点法线：

...the following order of operations yields reversed vertex normals:

geometry.computeFaceNormals();
geometry.computeVertexNormals();
geometry.applyMatrix(new THREE.Matrix4().makeScale(1, -1, 1));

所以我只是想知道，这是否按预期工作？在计算顶点法线之前，是否需要先对几何体进行所有变换？

So I'm simply wondering, is this working as intended? Do I need to first do all the transformations on the geometry before I calculate the vertex normals?

推荐答案

three.js不支持对象矩阵中的反射。通过设置负比例因子，您将反映对象的几何形状。

three.js does not support reflections in the object matrix. By setting a negative scale factor, you are reflecting the geometry of the object.

您可以直接将这样的矩阵应用于几何 然而，当然，这正是你在做的事情。

You are free to apply such a matrix to your geometry directly, however, which of course, is what you are doing.

然而，这将导致许多不良后果，其中一个是几何面将不再具有逆时针缠绕顺序，而是顺时针。它也会导致反面法线由 geometry.computeFaceNormals（）计算。

However, this will result in a number of undesirable consequences, one of which is the geometry faces will no longer have counterclockwise winding order, but clockwise. It will also result in reversed face normals as calculated by geometry.computeFaceNormals().

我建议不要这样做这除非你熟悉图书馆的内部工作。

I would advise against doing this unless you are familiar with the inner-workings of the library.

three.js r.58

three.js r.58

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