Three.js 材质深度测试 .depthTest

Question

如果你对原生 WebGL 渲染管线渲染流程有一定的了解，对于渲染管线深度测试环节应该是不陌生的，Three.js 是对原生WebGL的封装，原生 WebGL 可以实现的功能，通过 Threejs 自然可以实现，通过 Threejs 材质对象的深度测试属性 .depthTest 可以控制渲染过程中是否进行深度测试。

Three.js运行的时候默认是进行深度测试的。

深度测试属性 .depthTest

关于深度测试属性.depthTest的具体介绍可以查看Threejs官方文档的基类Material。

当你通过Threejs的点线网格等材质类创建材质对象的时候，默认情况下，渲染的时候材质对象对应的模型都会进行深度测试。

.depthTest属性值默认true,设置为false可以关闭深度测试.

深度写入属性 .depthWrite

渲染此材质的时候，是否对深度缓冲区有任何的影响. 默认 true.

在绘制 2D 叠加时，为了将多个在一起的事物分层而不创建z-index伪像，禁用深度写入会很有用。

颜色缓冲区写入属性 .colorWrite

是否渲染材质的颜色. 该属性可以和网格模型Mesh的渲染顺序属性renderOrder结合使用来创建遮挡其它对象的不可见对象. 默认true.