关于 Three.js 的 Face culling 与 Material 的 side 问题

Question

想详细了解 Face culling 与 Material 的 side 属性的关系。

体验该链接：http://threejs-outsidelook.os...

当设置以下剔除模式时，就会实时把 Mesh 的正面剔除：

renderer.setFaceCulling(THREE.CullFaceFront, THREE.FrontFaceDirectionCCW)

可是为什么反面却会显示呢？材质默认是应用在正面的 THREE.FrontSide。

new THREE.Material({

    side: THREE.FrontSide

})

默认状态下，下面的平面绕Y轴旋转180度后，是不可见的。而上述案例的背面为什么又是可见的呢？

// 剔除模式默认是 THREE.CullFaceBack，但即使设置为 CullFaceNone，却依然不可见。

renderer.setFaceCulling(THREE.CullFaceNone, THREE.FrontFaceDirectionCCW)

var planeGeometry = new THREE.PlaneGeometry(10, 10)

var planeMaterial = new THREE.Material({ color: 0xff0000 })

var plane = new THREE.Mesh(planeGeometry, planeMaterial)

scene.add(plane)

Answer 1

在设置render渲染模式为CullFaceNone之前，对材质material也需要同时设置双面贴图 new Material({side:THREE.DoubleSide})