javascript - Three.js 摸脸神器

Question

我创建了两个透明盒子，它们的面相互接触。除非盒子的表面接触，否则这种方法效果很好。

// inner object
var mesh2 = new THREE.Mesh(geometry, material); 

mesh2.position.x = 0;
mesh2.position.y = 0;
mesh2.position.z = 0;

mesh2.scale.x = 100;
mesh2.scale.y = 50;
mesh2.scale.z = 100;

scene.add( mesh2 ); 

// outer object
var mesh1 = new THREE.Mesh(geometry, material); 

mesh1.position.x = 0;
mesh1.position.y = 0;
mesh1.position.z = 0;

mesh1.scale.x = 100;
mesh1.scale.y = 100;
mesh1.scale.z = 100; 

scene.add( mesh1 );

代码如下: http://jsfiddle.net/unkya/14/

如何消除这些伪影并保持面部接触？

另外，有没有办法将盒子添加到场景中，而不必先插入最里面的盒子？

非常感谢!

Answer 1

这称为z-fighting .

有两种方法可以解决这个问题。

第一个是简单地对值进行少量偏移。即使是 0.01 也可以做到。这里重要的部分是确保您的相机的 near plane and far plane均在合理范围内。

第二种方法是使用 polygonOffset THREE.js Material 的属性。这将允许您强制一个对象渲染在其他对象之上或之下，类似于 z-index 排序。我相信还需要启用透明度，因此如果可能的话，您应该将其放在半透明立方体上。