Three.js

Three.js教程：模型材质Material

Apr 15, 2023 • 2 min read

推荐：将NSDT场景编辑器加入你的3D工具链

其他工具集：NSDT简石数字孪生

模型材质父类Material

学习到现在大家对threejs的材质都有简单的了解，本节课主要结合文档，从JavaScript语法角度，给大家总结一下材质API的语法。

查询threejs文档，你可以看到基础网格材质MeshBasicMaterial、漫反射网格材质MeshLambertMaterial、高光网格材质MeshPhongMaterial等网格材质都有一个共同的父类Material。

从JavaScript语法角度看子类都会继承父类的属性和方法，threejs的材质同样道理。

MeshBasicMaterial、MeshLambertMaterial、MeshPhongMaterial等子类网格材质会从父类Material继承一些属性和方法，比如透明度属性.opacity、面属性.side、是否透明属性.transparent等等。

material.transparent = true;//开启透明
material.opacity = 0.5;//设置透明度

你可以用矩形平面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);