Three.js 矩形平面 PlaneGeometry

Question

通过 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);