Three extrude挤压模型实例

基础环境搭建：(TrackballControls)

创建extrude模型:

1. path：

CatmullRomCurve3()：使用Catmull-Rom算法， 从一系列的点创建一条平滑的三维样条曲线。
CatmullRomCurve3( points : Array, closed : Boolean, curveType : String, tension : Float )

    const closedSpline = new THREE.CatmullRomCurve3([
        new THREE.Vector3(-60, -100, 60),
        new THREE.Vector3(-60, 20, 60),
        new THREE.Vector3(-60, 120, 60),
        new THREE.Vector3(60, 20, -60),
        new THREE.Vector3(60, -100, -60)
    ], true, 'catmullrom')

2. extrudeSettings，实际上是ExtrudeGeometry()几何体对象的第二个参数options对象：

options — 一个包含有下列参数的对象：
curveSegments — int，曲线上点的数量，默认值是12。
steps — int，用于沿着挤出样条的深度细分的点的数量，默认值为1。
depth — float，挤出的形状的深度，默认值为1。
bevelEnabled — bool，对挤出的形状应用是否斜角，默认值为true。
bevelThickness — float，设置原始形状上斜角的厚度。默认值为0.2。
bevelSize — float。斜角与原始形状轮廓之间的延伸距离，默认值为bevelThickness-0.1。
bevelOffset — float. Distance from the shape outline that the bevel starts. Default is 0.
bevelSegments — int。斜角的分段层数，默认值为3。
extrudePath — THREE.Curve对象。一条沿着被挤出形状的三维样条线。Bevels not supported for path extrusion.
UVGenerator — Object。提供了UV生成器函数的对象。

    const extrudeSettings1 = {
        steps: 100,
        bevelEnabled: false,
        extrudePath: closedSpline
    }

3. shape：

形状（Shape）:使用路径以及可选的孔洞来定义一个二维形状平面，可以和ExtrudeGeometry、ShapeGeometry一起使用获取点或三角面。
Shape( points : Array )：points – (optional) 一个Vector2数组。
从点来创建一个Shape。第一个点定义了偏移量， 接下来的点被作为LineCurves加入到curves中。如果没有点被指定，一个空的形状将会被创建，且.currentPoint将会被设为原点。

    const pts1 = [], count = 3
    const r = 20
    for (let i = 0; i < count; i++) {
        const a = i / count * 2 * Math.PI
        pts1.push(new THREE.Vector2(r * Math.cos(a), r * Math.sin(a)))
    }
    const shape1 = new THREE.Shape(pts1)

4. 创建extrude网格模型：

ExtrudeGeometry(shapes : Array, options : Object)

    const geometry1 = new THREE.ExtrudeGeometry(shape1, extrudeSettings1)
    const material1 = new THREE.MeshLambertMaterial({
        color: 0xb00000
    })
    const mesh1 = new THREE.Mesh(geometry1, material1)
    scene.add(mesh1)

同理创建其他extrude网格模型：

THREE.MathUtils.randFloat ( low : Float, high : Float ) : Float
在区间 [low, high] 内随机一个浮点数。

    const randomPoints = []
    for (let i = 0; i < 10; i++) {
        randomPoints.push(new THREE.Vector3((i - 4.5) * 50, THREE.MathUtils.randFloat(-50, 50), THREE.MathUtils.randFloat(-50, 50)))
    }
    const randomSpline = new THREE.CatmullRomCurve3(randomPoints)
    const extrudeSettings2 = {
        steps: 200,
        bevelEnabled: false,
        extrudePath: randomSpline
    }
    //画五角星。。。
    const pts2 = [], numPts = 5
    for (let i = 0; i < numPts * 2; i++) {
        const l = i % 2 == 1 ? 10 : 20
        const a = i / numPts * Math.PI
        pts2.push(new THREE.Vector2(l * Math.cos(a), l * Math.sin(a)))
    }
    const shape2 = new THREE.Shape(pts2)
    const geometry2 = new THREE.ExtrudeGeometry(shape2, extrudeSettings2)
    const material2 = new THREE.MeshLambertMaterial({
        color: 0xff8000
    })
    const mesh2 = new THREE.Mesh(geometry2, material2)
    scene.add(mesh2)

当使用ExtrudeGeometry创建Mesh的时候，如果你希望分别对它的表面和它挤出的侧面使用单独的材质，你可以使用一个材质数组。第一个材质将用于其表面；第二个材质则将用于其挤压出的侧面。

    const extrudeSettings3 = {
        steps: 1,
        depth: 20,
        bevelEnabled: true,
        bevelThickness: 2,
        bevelSize: 4,
        bevelSegments: 1
    }
    const geometry3 = new THREE.ExtrudeGeometry(shape2, extrudeSettings3)
    const materials = [material1, material2]
    const mesh3 = new THREE.Mesh(geometry3, materials)
    mesh3.position.set(50, 100, 50)
    scene.add(mesh3)