WebGL教程_Three.js教程_郭隆邦技术博客 郭隆邦_技术博客 一对一班

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

本站版权所有,本站任何内容未经允许不得转载   备案号:豫ICP备16004767号 QQ群:187740169 (WebGL-Three.js教程)   邮箱:guolongbang@163.com