关于three.js:Threejs教程材质共有属性私有属性

举荐：将 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 建模学习工作室