Three.js教程：材质共有属性、私有属性

推荐：将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;
 

上一篇：Three.js教程：常用材质介绍 (mvrlink.com)

下一篇：Three.js教程：点、线、网格模型介绍 (mvrlink.com)

posted on 2023-05-23 10:37  tuyg  阅读(64)  评论(0)  编辑  收藏  举报

导航