threejs渲染器剔除模式

渲染器剔除模式

渲染器可以设置成舍弃某些面，如前面、背面等，在【WebGLRenderer Constants】中对此有说明。默认情况下，是剔除掉背面，也就是背对着相机的面。下面看看例子：

首先创建一个正方形，给每个面不同颜色：

        let geometry = new THREE.BoxGeometry(100,100,100);
        let materials = [
          new THREE.MeshBasicMaterial({color:0xff0000}),
                new THREE.MeshBasicMaterial({color:0x0ff00}),
                new THREE.MeshBasicMaterial({color:0x00ff00}),
                new THREE.MeshBasicMaterial({color:0x000ff0}),
                new THREE.MeshBasicMaterial({color:0x0000ff}),
                new THREE.MeshBasicMaterial({color:0x000000})
        ];
        let material = new THREE.MultiMaterial(materials);
        mesh = new THREE.Mesh(geometry,material);
        mesh.rotation.x = THREE.Math.degToRad(45);
        scene.add(mesh);

其效果如下：

然后我们设置剔除前面：

renderer.setFaceCulling(THREE.CullFaceFront,THREE.FrontFaceDirectionCW);

这里有两个参数，第一个指定剔除模式，第二个指定顺时针还是逆时针，都可以在【WebGLRenderer Constants】找到。设置后效果变成了：

面向相机的面不见了，这在演示一个模型内部时是很有用的。【例子】