threejs拉伸几何合体(ExtrudeBufferGeometry)的两种使用方式

拉伸几何体有两种使用方式，一种是配置extrudePath，一种是不配置extrudePath 。该属性指定图形沿着什么路径（THREE.CurvePath）拉伸。如果没有指定，则图形沿着z轴拉伸更直观的理解见下文。

一、不配置extrudePath

        中文手册给的也是这种，我就直接放中文手册的案例了；

        在extrudeSettings 没有配置extrudePath这一项。

var length = 12, width = 8;

var shape = new THREE.Shape();
shape.moveTo( 0,0 );
shape.lineTo( 0, width );
shape.lineTo( length, width );
shape.lineTo( length, 0 );
shape.lineTo( 0, 0 );

var extrudeSettings = {
	steps: 2,
	depth: 16,
	bevelEnabled: true,
	bevelThickness: 1,
	bevelSize: 1,
	bevelSegments: 1
};

var geometry = new THREE.ExtrudeBufferGeometry( shape, extrudeSettings );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var mesh = new THREE.Mesh( geometry, material ) ;
scene.add( mesh );

这种出来的就是垂直于shape面，直直的向一个方向拉伸depth的距离，形成一个几何体。如下图，shape分别为正方形，三角形，圆形，向上拉伸不同depth。

 

 二、配置extrudePath

        第二种我当时也折腾了半天

        手册写的说要用CurvePath对象 

        let value = this.linePointList;
        let curvePath = new THREE.CurvePath();
        for (let i = 0; i < value.length - 1; i++) {
          let curve3 = new THREE.LineCurve3(value[i], value[i + 1]);
          curvePath.add(curve3);
        }

        let extrudeSettings = {
          steps: 200,
          bevelEnabled: true,
          bevelThickness: 100,
          extrudePath: curvePath,
        };

        var pts = [];
        const thickness = 2;
        const dept = 60;
        pts.push(new THREE.Vector2(0, -0.5 * thickness));
        pts.push(new THREE.Vector2(-dept, -0.5 * thickness));
        pts.push(new THREE.Vector2(-dept, 0.5 * thickness));
        pts.push(new THREE.Vector2(0, 0.5 * thickness));

        var shape = new THREE.Shape(pts);
        var geometry = new THREE.ExtrudeBufferGeometry(shape, extrudeSettings);
        var material2 = new THREE.MeshLambertMaterial({
          color: 0xe0e0e0,
          wireframe: false,
        });
        var mesh = new THREE.Mesh(geometry, material2);
       

curvePath是“W"形状的curve曲线，shape则是侧面的

 shape：框出来的那个面