网带ThreeCSG减去后变得非常角 [英] Mesh becomes very angular after substracting with ThreeCSG
问题描述
我使用ThreeCSG的其他网减去一个网时遇到的一个问题。我的主要目是一个环网，以substract是钻石。在这个过程场景是这样的：网格精细但减去的网格圈后。变角：网状破碎。我做的和以前一样采用同样的材料/阴影。这里是code我用：
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（）;结果看起来更坏：链接
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
更新三： 经过寻找一些更多的进入问题，枯萎最后一次更新，我看到后，我用ThreeBSP顶点坏了。你可以看到这个非常好这个小提琴。
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）。您应该检查出源$ C $ C，看看这个出了问题。
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源$ C $ C似乎还有的在线48 的一个bug。
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：
尝试更新的几何体的vertexNormals转换到CSG之前：
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 方法检查wheter的相邻面的顶点是在前面，在背部或共面到当前面。如果该点是共面的CSG面将被定义为具有四个顶点一工作面。由于这个过程中一些你的 THREE.Face3 地转化为一个4点的CSG的脸。当后来转换回一个 THREE.Face3 面部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 值比较正常的顶点与面部正常。如果该差过小的顶点被认为是共面的。通过增加你的ThreeBSP库中的EPSILON值就可以控制precision。
如果设置 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屋！
