举荐:将NSDT场景编辑器退出你的3D工具链
其余系列工具:NSDT简石数字孪生

材质共有属性、公有属性

如果你的javascript语言根底还能够,应该明确类、基类、子类、父类等概念。如果你有这些类的概念,那么在学习Threejs的过程中,如何查找Threejs文档将会比较顺利。

点材质PointsMaterial、根底线材质LineBasicMaterial、根底网格材质MeshBasicMaterial、高光网格材质MeshPhongMaterial等材质都是父类Material的子类。

各种各样的材质子类都有本人的特定属性,比方点材质特有的尺寸属性.size、高光网格材质特有的高光色彩属性.specular等等这些属性能够成为子类材质的公有属性。

所有子类的材质都会从父类材质Material继承透明度opacity、面side等属性,这些来自父类的属性都是子类共有的属性。

.side属性

在Three.js开发过程中你可能会遇到上面的问题,比方three.js矩形立体planegeometry的网格模型插入场景看不到,一个球体或立方体网格模型如何反面显示贴图,侧面不显示...,对于这些问题能够通过Three.js材质对象.side属性来设置。

材质.side属性的具体介绍能够查看Threejs文档中所有材质对象的基类Material。

.side属性的属性值定义面的渲染形式后面前面 或 双面. 属性的默认值是THREE.FrontSide,示意后面. 也能够设置为前面THREE.BackSide 或 双面THREE.DoubleSide.

var material = new THREE.MeshBasicMaterial({  color: 0xdd00ff,  // 后面FrontSide  反面:BackSide 双面:DoubleSide  side:THREE.DoubleSide,});

材质透明度.opacity

通过材质的透明度属性.opacity能够设置材质的通明水平,.opacity属性值的范畴是0.0~1.0,0.0值示意齐全通明, 1.0示意齐全不通明,.opacity默认值1.0。

当设置.opacity属性值的时候,须要设置材质属性transparent值为true,如果材质的transparent属性没设置为true, 材质会放弃齐全不通明状态。

在结构函数参数中设置transparent和.opacity的属性值

var material = new THREE.MeshPhongMaterial({  color: 0x220000,  // transparent设置为true,开启通明,否则opacity不起作用  transparent: true,  // 设置材质透明度  opacity: 0.4,});

通过拜访材质对象属性模式设置transparent和.opacity的属性值

// transparent设置为true,开启通明,否则opacity不起作用material.transparent = true;  // 设置材质透明度material.opacity = 0.4;

3D建模学习工作室