threejs如何解决线条时隐时现问题
平面和线条交叉,导致线条被隐藏部分。
相关代码
function drawRect(gridGroup, xAxis, zAxis) {
let geometry = new THREE.PlaneGeometry(xAxis,zAxis);
let material = new THREE.MeshBasicMaterial( {
map: texture,
side: THREE.DoubleSide
});
const rect = new THREE.Mesh(geometry, material);
rect.applyMatrix(new THREE.Matrix4().makeTranslation(xAxis / 2, 0, zAxis / 2));
rect.position.y = -4;
rect.rotation.x = -Math.PI / 2;
gridGroup.add(rect);
material.map.needsUpdate = true;
}
图片中的白色线条和地图交叉被隐藏了。
但是变换相机角度,就没用问题,就那一个角度有问题,使用z-fighting的解决方法无效。
类似CSS里的z-index,手动设置一下,分一下层:
mesh.material.depthTest = false;
mesh.renderOrder = 1; // z-index值,按照需要设置