学习到现在大家对threejs的材质都有简单的了解,本节课主要结合文档,从JavaScript语法角度,给大家总结一下材质API的语法。
材质父类Material
查询threejs文档,你可以看到基础网格材质MeshBasicMaterial
、漫反射网格材质MeshLambertMaterial
、高光网格材质MeshPhongMaterial
等网格材质都有一个共同的父类Material
。
网格材质继承父类属性
从JavaScript语法角度看子类都会继承父类的属性和方法,threejs的材质同样道理。
MeshBasicMaterial、MeshLambertMaterial、MeshPhongMaterial等子类网格材质会从父类Material
继承一些属性和方法,比如透明度属性.opacity
、面属性.side
、是否透明属性.transparent
等等。
材质半透明设置
material.transparent = true;//开启透明
material.opacity = 0.5;//设置透明度
材质面属性.side
你可以用矩形平面PlaneGeometry
来测试材质的面属性.side
。
查看文档,可以知道材质面属性.side
默认值是THREE.FrontSide
,表示网格模型正面可以看到,THREE.BackSide
表示背面可以看到,THREE.DoubleSide
表示双面可以看到。
material.side = THREE.BackSide;//背面可以看到
material.side = THREE.DoubleSide;//双面可见
THREE.FrontSide
、THREE.BackSide
、THREE.DoubleSide
其实在theeejs内部都表示一个数字,你可以通过浏览器控制log打印查看验证,具体可以查看src目录下constants.js的源码文件。
console.log('material.side',material.side);