2021年05月07日阅读 83

Three.js开发指南-阅读记录（第五章）

二维几何体

1. THREE.PlanGeometry

作用：创建非常简单的二维矩形
属性：

属性	描述
width（必选）	宽度
height（必选）	高度
widthSegments	指定宽度分为几段，默认为1
heightSegments	指定高度分为几段，默认为1

使用方式：

new THREE.PlanGeometry(width, height, widthSegments, heightSegments)
复制代码

2. THREE.CircleGeometry

作用：创建一个二维圆形
属性：

属性	描述
radius	圆的半径，默认为50
segments	创建圆的数量，默认为8，最小为3，值越大圆越光滑
thetaStrat	从哪里开始画圆，范围0到2*PI
thetaLenght	圆要画多大，默认2*PI

使用方式：

new THREE.CircleGeometry(radius, segments, thetaStrat, thetaLenght)
复制代码

3. THREE.RingGeometry

作用：用来创建二维对象
属性：

属性	描述
innerRadius	圆环的内半径，默认为0
outerRadius	圆环外半径，默认为50
thetaSegments	圆环对角线的数量，值越大，越平滑
phiSegments	沿着圆环的长度，要使用的线段的数量
thetaStrat	从哪里开始画圆，范围0到2*PI
thetaLenght	圆要画多大，默认2*PI

使用方式：

let ring = new THREE.RingGeometry()
复制代码

4. THREE.ShapeGeometry

作用：自定义二维图图形
使用方式：

new THREE.ShapeGeometry(draw());

function draw(){
    let shape = new THREE.Shape();
    shape.moveTo(10, 10); //将绘图点移动到指定的坐标处
    shape.lineTo(10, 40); //从当前位置绘制一条线到指定坐标
    shape.bezierCurveTo(15, 25, 25, 25, 30, 40); //根据参数绘制一条曲线
    
    //沿着坐标绘制一条光滑的曲线
    shape.splineThru([
        new THREE.Vector2(32, 30),
        new THREE.Vector2(28, 20),
        new THREE.Vector2(30, 10)
    ]);
    shape.quadraticCurveTo(20, 15, 10, 10); //根据参数绘制一条曲线
    
    
    //holes包含多个THREE.Shape对象，每个对象渲染为一个孔
    //眼睛1
    let hole1 = new THREE.Path();
    hole1.absellipse(16, 24, 2, 3, 0, Math.PI*2, true);
    shape.holes.push(hole1);
    
    //眼睛2
    let hole2 = new THREE.Path();
    hole2.absellipse(23, 24, 2, 3, 0, Math.PI*2, true);
    shape.holes.push(hole2);
    
    //嘴巴
    let hole3 = new THREE.Path();
    hole3.absellipse(20, 16, 2, 0, Math.PI*2, true);
    shape.holes.push(hole3);
    
    
    return shape;
}
复制代码

三维几何体

1. THREE.BoxGeometry

作用：创建长方体
属性：

属性	描述
width	宽 x轴
height	高 y轴
depth	深度 z轴
widthSegments	沿着x轴方向将面分为多少份，默认1
heightSegments	沿着y轴方向将面分为多少份，默认1
depthSegments	沿着z轴方向将面分为多少份，默认1

使用方式：

new THREE.BoxGeometry(width, height, depth);
复制代码

2. THREE.SphereGeometry

作用：创建三维球体
属性：

属性	说明
radius	球半径
widthSegments	竖直方向的分段数，，默认8，最小3，值越大越光滑
heightSegments	水平方向的分段数，，默认6，最小2，值越大越光滑
phiStart	指定从x轴什么部分开始绘制球体，范围0到2*PI，默认0
phiLenght	指定从phiStart开始画多少，2*PI是整个球体
thetaStart	指定从y轴什么部分开始绘制球体，范围0到2*PI，默认0
thetaLength	指定从thetaStart开始画多少，2*PI是整个球体

使用方式：

new THREE.SphereGeometry(radius, widthSegments, heightSegments);
复制代码

3. THREE.CylinderGeometry

作用：创建圆柱和类似圆柱的几何体
使用方式：

new THREE.CylinderGeometry();
复制代码

属性：

属性	描述
radiusTop	设置圆柱顶部的尺寸，默认20
radiusBottom	设置圆柱底部的尺寸，默认20
height	圆柱的高度，默认100
radiusSegments	设置圆柱半径分为多少端，默认8，值越大越光滑
heightSegments	高度分段，默认1，值越大，面越多
openEnded	顶部和底部是否封闭，默认false

注意：在顶部或底部使用负数的半径时，可以创建处一个沙漏形状的几何体，这个时候材质应该使用THREE.DoubleSide。

4. THREE.TorusGeometry

作用：创建一种圆环的三维几何体
属性：

属性	描述
radius	完整圆环的尺寸，默认100
tube	设置管的半径，默认40
radiusSegments	沿着圆环长度方向分段，默认为8
tubularSegments	沿着圆环宽度方向分段，默认为6
arc	控制绘制完整的圆环，默认为2*PI

5. THREE.TorusKnotGeometry

作用：创建环状扭结
属性：

属性	描述
radius	设置完整圆环的尺寸，默认为100
tube	设置管的半径，默认40
radiusSegments	沿着圆环长度方向分段，默认为64
tubularSegments	沿着圆环宽度方向分段，默认为8
p	定义扭结形状，默认为2
q	定义扭结形状，默认值为3
heightScale	拉升环状扭结，默认为1

6. THREE.PolyhedronGeometry

作用：创建多面体
属性：

属性	描述
vertices(必选)	设置构成多面体的顶点
indices(必选)	设置由vertices创建出的面
radius	设置多面体大小，默认为1
detail	给多面体添加额外的细节，如果为1，多面体每个三角形会分成4个小三角形，如果为2，那4个小三角形的每一个将继续分为4个小三角形，以此类推。

7. THREE.LcosahedronGeometry