我遇到了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/
我该怎么做才能解决这个问题?
抱歉我的英文不好,谢谢。
答案 0 :(得分:1)
问题来自深度测试。这些平面非常接近,以至于它们的深度值在某些点上是相同的,因此光栅化器无法确定哪一个在前面。要解决这个问题,您必须增加两个平面之间的距离,或者使用较小平面的大小在较大的平面中绘制整体。或者在这种情况下,请使用纹理。
此外,您的场景很大,这会导致精确度问题。按比例缩小你应该没事了。如果你的场景大小只有1/100,它会更好。