彼此非常接近的两架飞机

Question

我遇到了 2 架彼此非常接近的飞机的问题。

其中一架飞机在某些角度造成故障甚至消失。

代码如下：

var renderer, scene, camera, controls, mesh;

init();
animate();

function init() {
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );

document.body.appendChild( renderer.domElement );

scene = new THREE.Scene();

camera = new THREE.PerspectiveCamera( 16, window.innerWidth / window.innerHeight, 1, 50000 );
camera.position.set(8000, 4000, 13000);

controls = new THREE.OrbitControls( camera );
controls.target = new THREE.Vector3(0,0,0);
controls.minPolarAngle = 0
controls.maxPolarAngle = (Math.PI / 2) - 0.05;

mesh = new THREE.Mesh( new THREE.PlaneBufferGeometry( 7000, 7000 ),  new THREE.MeshBasicMaterial);
mesh.position.y = 0;
mesh.rotation.x = - Math.PI / 2;
mesh.receiveShadow = true;
scene.add( mesh );

mesh = new THREE.Mesh( new THREE.PlaneBufferGeometry( 2000, 2000 ),  new THREE.MeshBasicMaterial({color:0x00ff00}));
mesh.position.y = 5;
mesh.rotation.x = - Math.PI / 2;
mesh.receiveShadow = true;
scene.add( mesh );

}

function animate() {
requestAnimationFrame( animate );
controls.update();
renderer.render( scene, camera );
}

这里是fiddle：http://jsfiddle.net/mae1storm/2hLjn1t5/1/

我该怎么做才能解决这个问题？

抱歉我的英语不好，谢谢。

Answer 1

问题来自深度测试。这些平面靠得很近，以至于它们的深度值在某些点上是相同的，因此光栅化器无法真正决定哪个在哪个前面。要解决这个问题，您必须增加两个平面之间的距离，或者在较大的平面中用较小的平面尺寸绘制一个整体。或者在这种情况下，特别是使用纹理。

另外你的场景很大，导致精度问题。缩小它，你应该又好了。如果您的场景大小为原来的 1/100，效果会好很多。

彼此非常接近的两架飞机

Two planes which very close to each other

javascript

three.js