Three.js 中的简单孔无法正确呈现 [英] 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.

如何在 Three.js 中正确绘制孔洞?

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

以上代码导致警告:

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

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

推荐答案

原来这是一个错误，现在已在 66dev 版本中修复.该错误已在此处报告和讨论:

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

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

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/开发/构建

我认为此修复程序将很快与主要的three.js 合并，但在那之前您可以使用上面的链接.

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

这篇关于Three.js 中的简单孔无法正确呈现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！