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素材。这将允许您强制一个对象呈现在其他对象的上方或下方，类似于 z-index 排序。我认为还需要启用透明度，所以如果可能的话，你应该把它放在你的半透明立方体上。

Three.js 触摸人脸伪像

Three.js touching faces artifacts

javascript

transparency

artifacts

three.js