three.js - 在 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 是这样和planes 完全一样（只是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 中由整数表示，因此相机的近平面和远平面之间只有固定数量的不同 zs。解决方案是将您的飞机分开或缩小相机的远近范围。