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

以上代码会产生警告：

警告，无法对多边形进行三角测量！ at public_html / libs / three.js：27785

Answer 1

事实证明，这是一个现在已在版本66dev中修复的错误。 该错误已在此处报告和讨论：

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

我现在使用的固定版本是开发人员在2014年1月27日承诺的版本66dev：

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/。无论您的代码是什么，它都将帮助您做得更好。一切皆有可能，取消，加入，结合，交汇。