WebGL教程_Three.js教程_郭隆邦技术博客 郭隆邦_技术博客 Three.js免费视频教程

Three.js矩形平面PlaneGeometry

通过PlaneGeometry类可以创建一个矩形几何体,PlaneGeometry的基类是Geometry,和PlaneGeometry功能相同的类是PlaneBufferGeometry,PlaneBufferGeometry的基类是BufferGeometry

// 创建一个矩形平面几何体,宽度100,长度200
var plane = new THREE.PlaneGeometry(100,200)
var material = new THREE.MeshPhongMaterial({
    color: 0xad4fde,
    // 矩形平面网格模型默认单面显示,可以设置side属性值为THREE.DoubleSide双面显示
    side: THREE.DoubleSide,
});
var mesh = new THREE.Mesh(plane, material);

PlaneGeometry参数(width, height,widthSegments,heightSegments)

  • width:矩形宽度
  • height:举行长度或者说高度
  • widthSegments:宽度方向细分数,默认值1
  • heightSegments:高度方向细分数,默认值1

一般构造函数PlaneGeometry后面两个参数不用设置,默认就是1,细分数都是1的情况,表示矩形平面是由2个三角形构成一个矩形效果,如果细分数都是2,也就是四个三角形构成一个矩形平面,如果不是特殊需要,没必要细分数值太大,三角形面数量越多,或者说顶点数量阅读,Threejs需要的渲染资源越多,渲染性能越低,使用threejs几何体类的时候细分数尽量低,一般来说曲面,比如球体不能太低,要不然会表面不够光滑,但是对于矩形平面来讲,这方面没有影响。

// 矩形几何体 宽度100  高度200  宽度方向细分数4   高度方向细分数5
var geo = new THREE.PlaneGeometry(100,200,4,5)
console.log('控制台查看几何体三角形数量',geo.faces.length);
本站版权所有,本站任何内容未经允许不得转载   备案号:豫ICP备16004767号 QQ群:187740169 (WebGL-Three.js教程)   邮箱:guolongbang@163.com