用 ThreeCSG 减去后网格变得非常有棱角 [英] Mesh becomes very angular after substracting with ThreeCSG

问题描述

我在使用 ThreeCSG 从另一个网格中减去一个网格时遇到问题.我的主要网格是一个戒指，要减去的网格是一个菱形.在场景过程之前看起来像这样:网格很好. 但是在减去网格之后，环变得有棱有角:Mesh Broken.我确实应用了与以前相同的材料/阴影.这是我使用的代码:

I experience a problem when substracting a mesh from an other mesh using ThreeCSG. My main mesh is a ring and the mesh to substract is a diamond. Before the process to scene looks like this: Mesh fine. But after substracting the meshes the ring becomes angular: Mesh Broken. I do apply the same material / shading as before. Here is the code I use:

var ring_bsp = new ThreeBSP(ring);
var stone_bsp = new ThreeBSP(stone);
var substract_bsp = ring_bsp.subtract( stone_bsp );
var result = substract_bsp.toMesh( ringMaterial );

result.geometry.computeVertexNormals();

result.material.needsUpdate = true;
result.geometry.buffersNeedUpdate = true;
result.geometry.uvsNeedUpdate = true;

result.scale.x = result.scale.y = result.scale.z = 19;

scene.remove(ring);
scene.add(result);

更新一:如果我删除result.geometry.computeVertexNormals();"结果看起来更糟:link.

Update one: If I remove "result.geometry.computeVertexNormals();" the result looks even worst: link.

更新二:我用最小的例子创建了一个 jsfiddle

Update two: I created a jsfiddle with a minimal case

更新三:在对问题进行了更多研究和 Wilts 上次更新后，我发现在使用 ThreeBSP 后，顶点被弄乱了.您可以在这个 fiddle 中很好地看到这一点.

Update three: After looking some more into the problem and Wilts last update, I saw that after I use ThreeBSP the vertexes are messed up. You can see this very well in this fiddle.

更新四:问题似乎出在fromGeometry/toGeometry"函数内，因为如果我根本不做任何减法，我会得到相同的破碎网格.

Update four: The problem seems to be within the "fromGeometry / toGeometry" functions as I get the same broken mesh if I don't do any substraction at all.

推荐答案

看起来(某些)顶点法线在转换(将几何图形转换为 CSG 并转换回 Three.js)时丢失了.您应该查看源代码，看看哪里出了问题.

It looks like (some of) your vertex normals get lost during translation (translating your geometry to CSG and translating back to Three.js). You should check out the source code to see where this goes wrong.

更新 1:

我查看了 ThreeCSG.js 的源代码，似乎有 第 48 行的错误.

I looked into the source code of ThreeCSG.js it seems there is a bug on line 48.

应该是:

vertex = new ThreeBSP.Vertex( vertex.x, vertex.y, vertex.z, face.vertexNormals[1], uvs );

vertexNormals 的索引应该是 1 而不是 2.也许那个错误导致错误的导出结果.

The index for the vertexNormals should be 1 instead of 2. Maybe that bug causes the wrong export result.

更新 2:

在转换为 CSG 之前尝试更新几何体的 vertexNormals:

Try updating the vertexNormals of the geometry before you convert to CSG:

var geometry = ring.geometry;
geometry.computeFaceNormals();
geometry.computeVertexNormals();

注意.您需要先调用computeNormals()以获得正确的结果.

Note. You need to call computeNormals() first for the correct result.

更新 3:

在将面从 Three.js 几何图形转换为 CSG 几何图形时，ThreeBSP.Polygon.prototype.classifySide 方法检查相邻面的顶点是在前面、后面还是共面到现在的脸.如果该点共面，则 CSG 面将被定义为具有四个顶点的面.由于这个过程，你的一些 THREE.Face3 被转换成 4 点 CSG 脸.当稍后将其转换回 THREE.Face3 时，Face vertexNormals 将与它们的初始值不同.

In the conversion of faces from Three.js geometries to CSG geometries the ThreeBSP.Polygon.prototype.classifySide method checks wheter the vertex of the adjacent face is in the front, in the back or coplanar to the current face. If the point is coplanar the CSG face will be defined as a Face with four vertex points. Because of this process some of your THREE.Face3 get converted to a 4 point CSG face. When later translating it back to a THREE.Face3 the Face vertexNormals become different from their initial values.

使用 EPSILON 值将顶点分类为 FRONT、BACK 或 COPLANAR 以将顶点法线与脸正常.如果差异太小，则顶点被认为是共面的.通过增加 ThreeBSP 库中的 EPSILON 值，您可以控制精度.如果您将 EPSILON 设置为 10，您的三角形将永远不会被视为共面，并且转换结果将是正确的.

The vertex is classified FRONT, BACK or COPLANAR using an EPSILON value to compare the vertex normal with the face normal. If the difference is too small the Vertex is considered coplanar. By increasing the EPSILON value in your ThreeBSP library you can control the precision. If you set EPSILON to 10 your triangles will never be considered coplanar and the conversion result will be correct.

所以在你的 ThreeBSP 库集的第 5 行:

So at line 5 of your ThreeBSP library set:

EPSILON = 10,

这篇关于用 ThreeCSG 减去后网格变得非常有棱角的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！