在THREE.JS中使用2D平面的zbuffer问题

Question

我正在用纹理构建2D平面。我有3个级别。

A background plane at z=0, 
black shapes for conections at z=0.1 and 
small planes with textures at z=0.2

问题是当我移动相机时，平面似乎改变了z位置。

平面绘制的Z值不正确，取决于相机的位置。移动相机会再次变化，看起来非常难看。

也许我需要激活一些ZBuffer属性才能正确绘制

WebGL init就像这样，并且平面完全相同（只有Z坐标变化）

renderer = new THREE.WebGLRenderer();    
renderer.setSize(window.innerWidth, window.innerHeight);
renderer._microCache = new MicroCache(); //cache de imagenes
renderer.setClearColor(0xeeeeee, 1);
document.body.appendChild(renderer.domElement);

// add directional light source
var directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(1, 1, 1300).normalize();
scene.add(directionalLight);

//background plane
plane = new THREE.Mesh(new THREE.PlaneGeometry(200000, 200000, 1, 1), new THREE.MeshLambertMaterial({ color: 0xffffff, opacity: planeOpacity, transparent: true }););          
plane.position.z = 0;
scene.add(plane);

其他平面完全相同但Z位置更高

请帮忙！ 谢谢！ 帕洛莫

Answer 1

你所看到的东西可能是z-fighting。在内部，深度由GPU中的整数表示，因此在相机​​的近平面和远平面之间仅存在固定数量的不同z-s。解决方案是将您的飞机分开或缩小相机的近远距离。