3 .js中没有正确显示简单的漏洞。

I have a simple rectangular wall and I like to place multiple window holes on it. It always works great for the first hole, but as soon as I add additional holes the polygon becomes messed up. See the images below to see what I'm talking about.

我有一个简单的矩形墙，我喜欢在它上面放置多个窗孔。对于第一个洞来说，它总是很好，但是一旦我添加了额外的洞，多边形就会变得一团糟。看看下面的图片，看看我在说什么。

How can I draw holes properly in Three.js?

我怎样才能正确地在Three.js中画出洞呢?

The right hole is not drawn properly.

右边的洞没有画好。

After increasing the height of the right hole the entire wall mesh becomes halfcut.

在增加了右眼的高度后，整个墙网就变成了半切。

Here is a sample code that causes above problem:

下面是导致上述问题的示例代码:

var shape = new THREE.Shape();
shape.moveTo(0, 0);
shape.lineTo(1, 0);
shape.lineTo(1, 1);
shape.lineTo(0, 1);

var windowHole = new THREE.Path();
windowHole.moveTo(0.14999999888241292, 0.7758620689655171)
windowHole.lineTo(0.4999999962747097, 0.7758620689655171)
windowHole.lineTo(0.4999999962747097, 0.3448275862068965)
windowHole.lineTo(0.14999999888241292, 0.3448275862068965)
shape.holes.push(windowHole); 

windowHole = new THREE.Path(); 
windowHole.moveTo(0.5999999955296517, 0.7758620689655171) 
windowHole.lineTo(0.7499999944120646, 0.7758620689655171) 
windowHole.lineTo(0.7499999944120646, 0.6034482758620688) 
windowHole.lineTo(0.5999999955296517, 0.6034482758620688) 
shape.holes.push(windowHole); 

var mesh = new THREE.Mesh(new THREE.ShapeGeometry(shape), this.material);
root.add(mesh);

The above code results in a warning:

以上代码的结果是警告:

Warning, unable to triangulate polygon!
at public_html/libs/three.js:27785

警告，不能三角多边形!在public_html / libs / three.js:27785

3 个解决方案

#1

It turned out that this was a bug that is now fixed in version 66dev. The bug was reported and discussed here:

事实证明，这是一个bug，现在已经修复在版本66dev中。报告并讨论了这个错误:

https://github.com/mrdoob/three.js/issues/3386

https://github.com/mrdoob/three.js/issues/3386

The fixed version that I'm using now is developer built version 66dev committed at Jan 27th, 2014 here:

我现在使用的固定版本是开发人员在2014年1月27日提交的66dev版本:

https://github.com/mrdoob/three.js/tree/dev/build

https://github.com/mrdoob/three.js/tree/dev/build

I assume this fix will be merged with the main three.js soon, but until then you can use the link above.

我假定这个修复将与主3合并。js很快，但是在那之前你可以使用上面的链接。

#2

Some code might help. if possible link your code in jsfiddle...

一些代码可能会有帮助。如果可能的话，将您的代码链接到jsfiddle…

just you need to change the order of the path creation... refer the link... http://jsfiddle.net/ebeit303/BuNb2/

只需改变路径创建的顺序…参考这个链接……http://jsfiddle.net/ebeit303/BuNb2/

var shape = new THREE.Shape();
shape.moveTo(-5, -5);
shape.lineTo(-5, 5);
shape.lineTo(5, 5);
shape.lineTo(5, -5);
shape.lineTo(-5, -5);

var windowHole = new THREE.Path(); 
windowHole.moveTo(-2,-2);
windowHole.lineTo(0,-2);
windowHole.lineTo(0,0);
windowHole.lineTo(-2,0);
windowHole.lineTo(-2,-2);
shape.holes.push(windowHole);

windowHole1 = new THREE.Path();
windowHole1.moveTo(3,3);
windowHole1.lineTo(4,3);
windowHole1.lineTo(4,4);
windowHole1.lineTo(3,4);
windowHole1.lineTo(3,3);
shape.holes.push(windowHole1); 


var geometry = new THREE.ShapeGeometry( shape );
var material = new THREE.MeshBasicMaterial({color:0xffccff, side:2, overdraw:true} );
var mesh = new THREE.Mesh(geometry, material );
group.add(mesh);

#3

Have a look on http://learningthreejs.com/data/constructive-solid-geometry-with-csg-js/. Whatever your codes are it will help you in doing it better. Substraction, addition, union, intersection everything is possible.

请查看http://learningthreejs.com/data/构造- - -csg-js/。无论你的代码是什么，它都会帮助你做得更好。Substraction，加法，union，交集，一切皆有可能。