Three.js材质.side属性

在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图片作为纹理贴图，然后双面显示，近似模拟一个树的效果。