Simple holes aren't rendered properly in Three.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?

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

回答1:

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

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:

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.

回答2:

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

just you need to change the order of the path creation... refer the link... 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.

来源：https://stackoverflow.com/questions/21337364/simple-holes-arent-rendered-properly-in-three-js

标签

three.js