在Three.js中没有正确地呈现简单的洞

Question

我有一个简单的长方形墙，我喜欢在它上放置多个窗户孔。对于第一个洞，它总是很好的工作，但是一旦我添加了更多的洞，多边形就会变得混乱。看看下面的图片，看看我在说什么。

如何正确地在Three.js中画洞？

​

​

正确的孔拉得不正确。

​

​

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

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

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

上面的代码导致了一个警告：

警告，无法三角剖分多边形！

在public_html/libs/three.js:27785

Answer 1

结果发现，这是一个错误，现在已在66 now版本中修复。在这里报告并讨论了该bug：

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

我现在使用的固定版本是在2014年1月27日提交的开发人员构建的66 here版本，在这里：

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

我假设这个修复将很快与主three.js合并，但在此之前您可以使用上面的链接。

Answer 2

一些代码可能会有帮助。如果可能的话，把你的代码链接到jsfiddle中.

只是你需要改变路径创建的顺序..。参考链接..。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);

Answer 3

看一看http://learningthreejs.com/data/constructive-solid-geometry-with-csg-js/。不管你的密码是什么，它都会帮助你做得更好。颠覆，加法，联合，相交一切都是可能的。