如何在Three.js中避免透明建筑模型重叠显示问题

问题原因 #

WebGL渲染半透明物体时，若不对绘制顺序做控制，会导致远处的半透明物体被错误绘制在近处物体之上，出现重叠混乱。这是因为默认情况下，透明物体的深度写入（depthWrite）会被关闭，且渲染顺序未按距离相机的远近排序。

解决方案 #

1. 调整材质深度属性 #

显式配置材质的深度参数，确保半透明物体参与深度测试（实现近处遮挡远处），同时关闭深度写入（避免阻塞后续物体渲染）：

const material = new THREE.MeshPhongMaterial({
    color: 0xffffff,
    transparent: true,
    opacity: 0.7,
    flatShading: true,
    depthTest: true,  // 开启深度测试，保证近处物体遮挡远处
    depthWrite: false // 关闭深度写入，防止透明物体影响后续渲染
});

2. 按距离相机远近排序渲染 #

将所有建筑模型按从远到近的顺序排序，通过renderOrder属性控制渲染优先级（值越大，渲染越晚，会覆盖早渲染的物体）：

首先，新增数组存储所有建筑模型：

const buildings = []; // 存储所有建筑mesh

for ( let i = 0; i < 500; i ++ ) {
    const mesh = new THREE.Mesh( geometry, material );
    // 原有位置、缩放设置代码...
    buildings.push(mesh);
    scene.add( mesh );
}

然后修改渲染逻辑，添加排序步骤：

function render() {
    // 按距离相机的平方值排序（比distanceTo更高效），远的在前
    buildings.sort((a, b) => {
        const distA = a.position.distanceToSquared(camera.position);
        const distB = b.position.distanceToSquared(camera.position);
        return distB - distA;
    });

    // 为每个模型设置渲染顺序
    buildings.forEach((mesh, index) => {
        mesh.renderOrder = index;
    });

    renderer.render( scene, camera );
}

3. 补充动画循环（适配阻尼控制） #

因为启用了controls.enableDamping，需要持续的动画循环来保证阻尼效果流畅运行：

function animate() {
    requestAnimationFrame( animate );
    controls.update(); // 更新阻尼控制
    render();
}
animate();

同时移除原有的controls变更事件绑定：

// 移除这行代码：controls.addEventListener( 'change', render );

修改后的关键代码片段 #

// world
const buildings = [];
const geometry = new THREE.BoxGeometry( 1, 1, 1 );
geometry.translate( 0, 0.5, 0 );
const material = new THREE.MeshPhongMaterial( { 
    color: 0xffffff, 
    transparent: true, 
    opacity: 0.7, 
    flatShading: true,
    depthTest: true,
    depthWrite: false
} );

for ( let i = 0; i < 500; i ++ ) {
    const mesh = new THREE.Mesh( geometry, material );
    mesh.position.x = Math.random() * 1600 - 800;
    mesh.position.y = 0;
    mesh.position.z = Math.random() * 1600 - 800;
    mesh.scale.x = 20;
    mesh.scale.y = Math.random() * 80 + 10;
    mesh.scale.z = 20;
    mesh.updateMatrix();
    mesh.matrixAutoUpdate = false;
    buildings.push(mesh);
    scene.add( mesh );
}

// 渲染与动画循环
function render() {
    buildings.sort((a, b) => {
        const distA = a.position.distanceToSquared(camera.position);
        const distB = b.position.distanceToSquared(camera.position);
        return distB - distA;
    });

    buildings.forEach((mesh, index) => {
        mesh.renderOrder = index;
    });

    renderer.render( scene, camera );
}

function animate() {
    requestAnimationFrame( animate );
    controls.update();
    render();
}
animate();

处理后，半透明建筑会按从远到近的顺序渲染，近处建筑可正确遮挡后方建筑，实现类似MapboxGL的清爽显示效果。

内容的提问来源于stack exchange，提问作者icebobofly