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】找到。设置后效果变成了:

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

IT文库 » threejs渲染器剔除模式
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址