两架飞机彼此非常接近

时间:2015-05-01 14:47:29

标签: javascript three.js

我遇到了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 );
}

这是小提琴:http://jsfiddle.net/mae1storm/2hLjn1t5/1/

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

抱歉我的英文不好,谢谢。

1 个答案:

答案 0 :(得分:1)

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

此外,您的场景很大,这会导致精确度问题。按比例缩小你应该没事了。如果你的场景大小只有1/100,它会更好。