Three.js 材质对象 .side 属性介绍

Question

在 Three.js 开发过程中你可能会遇到下面的问题，比如 three.js 矩形平面 planegeometry 怎么两面都显示贴图效果，一个球体或立方体网格模型如何背面显示贴图，正面不显示，对于这些问题可以通过 Three.js 材质对象 .side 属性来设置。

.side 属性

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

.side 属性的属性值定义面的渲染方式前面后面 或 双面. 属性的默认值是 THREE.FrontSide，表示前面。也可以设置为后面 THREE.BackSide 或 双面  THREE.DoubleSide.

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

全景图背面显示（THREE.BackSide）

一般在设置全景贴图的时候需要，把网格模型绑定材质对象的  .side 属性设置为 THREE.BackSide

planegeometry 双面显示（THREE.DoubleSide）

三维场景中可能会用到 planegeometry 创建两个垂直矩形，然后把一个树的 png 图片作为纹理贴图，然后双面显示，近似模拟一个树的效果。