THREEJS - 模型的裁切消隐

在项目应用中，有时候会存在需要模型外表慢慢褪去的效果，就像裁切一样的，如下图所示：

 看上去效果很炫酷，实际上实现起来并不复杂，下面给大家详细介绍一下：
1. 开启场景的渲染通道，此功能较消耗性能，所以可以根据实际需要使用。

renderer.clippingPlanes = Object.freeze([]);
renderer.localClippingEnabled = true;

2. 优先定义基础变量，这里的localPlane1，是调整法向量的方向值，现在我们定义的是模型Y轴方向的变化，所以向量值定义的Y轴，也可以根据自己的需要调整轴向变化，第二个参数的数值，一定要大于模型的高度（或者X轴Z轴的长度，根据选定的轴确定）。

let localPlane1 = new THREE.Plane(new THREE.Vector3(0, -1, 0), 200);
let step = 2;
let clippingPlanesStatus = false; // 避免一直render渲染

3. 设置模型material的clippingPlanes值。

const geometry = new THREE.BoxGeometry(100, 200, 100);
const material = new THREE.MeshBasicMaterial({ color: 0x333333 });
const box = new THREE.Mesh(geometry, material);

box.material.clippingPlanes = [localPlane1];

4. 在render中，对localPlane1的值进行修改，即可看到模型出现裁切的功能。（这里用clippingPlanesStatus状态来判断，是避免一直渲染计算，修改step的数值，实现上下切面的功能，向下切的时候step的值为2，向上还原的时候step的数值为-2，根据实际情况可进行调整）

function animate() {
    requestAnimationFrame(animate);

    if (clippingPlanesStatus) {
        localPlane1.constant -= step;
        if (localPlane1.constant <= -1 || localPlane1.constant >= 101) {
            clippingPlanesStatus = false;
        }
    }
}
animate();

以上就是利用clippingPlanes实现模型裁切的功能点。

欢迎各位大佬指导！！！互相学习！！！