ThreeJS 常用功能

遮罩制作

Web 编辑器制作对应小程序中使用 Threejs 渲染引擎渲染，此时需要通过特殊的材质设置达到。

const maskMaterial = new THREE.MeshBasicMaterial({
    color: 0xffffff,
    side: THREE.DoubleSide,
    colorWrite: false
});

同时，需要将用于做遮罩的 object 的 renderOrder 设置为 -1

如图，在 Web 编辑器中，放置两片用于做遮罩的片，将名字命名为 Mask（可任意，只是需要与后续代码上的处理对应） 在小程序接入中，添加如下代码，代码用于找到 Web 编辑器生成的场景中，名称为 Mask 的 Object，并赋予新的材质。

THREE = this.contentCpt.fnGetTHREE();
let myScene = this.contentCpt.fnGetScene();
let modelContent = myScene.getObjectByName("Scene");
// 用于做遮罩的材质
const maskMaterial = new THREE.MeshBasicMaterial({
    color: 0xffffff,
    side: THREE.DoubleSide,
    colorWrite: false
});

// 遍历 Web 编辑器的 child，找到 name 为 Mask 的片赋予新的材质
modelContent.traverse((child) => {
    if (child.name == 'Mask') {
        child.material = maskMaterial;
        child.renderOrder = -1
    }
});

效果