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

JS_Feng
594 阅读4分钟

二维几何体

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

  • 作用：可以创建处一个有20个相同三角形面的多面体，这些三角形面是从12个顶点创建出来的，创建时只需要指定radius和detail 的值。

8. THREE.TetrahedronGeometry

  • 作用：创建简单的正四面体，有四个顶点创建4个三角形面。

9. THREE.OctahedronGeometry

  • 作用：创建8面体，由6个顶点构建出来。

10. THREE.DodecahedronGeometry

  • 作用：创建12个面的多面体。
avatar
文章
阅读
粉丝