Three.js 深度测试

Three.js 深度测试

• 概述
• 解决z-fighting问题
• 被遮住的也可以看见

若有帮助到你，麻烦点一波关注，博主会持续推出Echarts,D3,地图,Three.js方面的文章~~~

概述

在网上找了很多有关于深度测试的文章，感觉表述得都不是很明白，我个人理解的深度测试就为了实现两个功能，解决z-fighting问题和被遮住的也可以看见。

解决z-fighting问题

大白话就是因为两个图形在同一个像素上的深度相同时而产生的闪烁现象，仔细看下方的这张gif图片，我在(0, 0, 0)和(10, 0, 0)处分别创建了两个BoxGeometry, 在移动相机时出现了图形闪烁现象。

代码：

    let geometry = new THREE.BoxGeometry(20, 20, 32);
    let material = new THREE.MeshBasicMaterial({
        color: 'red',
        side: THREE.DoubleSide
    });
    let box = new THREE.Mesh(geometry, material);
    box.rotateX(Math.PI / 2)
    scene.add(box);

    let geometry2 = new THREE.BoxGeometry(20, 20, 32);
    let material2 = new THREE.MeshBasicMaterial({
        color: 'yellow',
        side: THREE.DoubleSide,
        // depthTest: false
    });
    
    let box1 = new THREE.Mesh(geometry2, material2);
    box1.position.set(10, 0, 0)
    box1.rotateX(Math.PI / 2)
    scene.add(box1);

此时我们将depthTest属性设置为false时就可以解决闪烁问题。

被遮住的也可以看见

怎么理解被遮住的也可以看见呢，可以理解为你设置了深度测试为false可以拥有了透视的功能，例如在玩CS的时候，你可以看见墙后面的敌人，可以具体的看到他在哪个位置，一般的透视外挂也就是这个原理。具体效果可以查看：

我在(0, 0, 0)处创建了一个(20, 20, 32)的BoxGeometry命名为box，在(0, 0, -20)处创建了一个(10, 10, 32)的BoxGeometry命名为box1，我们如果开启深度测试，相机在z的正半轴时是不可能看到box1的，但在上面的效果图中我关闭了深度测试，则可以看到box1,这就是深度测试的第二个功能。

    let geometry = new THREE.BoxGeometry(20, 20, 32);
    let material = new THREE.MeshBasicMaterial({
        color: 'red',
        side: THREE.DoubleSide
    });
    let box = new THREE.Mesh(geometry, material);
    box.rotateX(Math.PI / 2)
    scene.add(box);

    let geometry2 = new THREE.BoxGeometry(10, 10, 32);
    let material2 = new THREE.MeshBasicMaterial({
        color: 'yellow',
        side: THREE.DoubleSide,
        // depthTest: false
    });
    
    let box1 = new THREE.Mesh(geometry2, material2);
    box1.position.set(0, 0, -20)
    box1.rotateX(Math.PI / 2)
    scene.add(box1);