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屋!