Three.js拉伸扫描成型ExtrudeGeometry

拉伸扫描成型ExtrudeGeometry

本文是Three.js电子书的7.8节

构造函数ExtrudeGeometry()和ShapeGeometry一样是利用Shape对象生成几何体对象，区别在于ExtrudeGeometry()可以利用2D轮廓生成3D模型， 如果你使用任何三维软件都知道可以先绘制一个二维的轮廓图，然后拉伸成型得到三维模型。ExtrudeGeometry()第二个参数是拉伸参数，数据类型是对象， 属性amount表示拉伸长度，bevelEnabled表示拉伸是否产生倒角，其它参数见下表。

构造函数ExtrudeGeometry()拉伸参数

参数	含义
amount	拉伸长度，默认100
bevelEnabled	是否使用倒角
bevelSegments	倒角细分数，默认3
bevelThickness	倒角尺寸(经向)
curveSegments	拉伸轮廓细分数
steps	拉伸方向细分数
extrudePath	扫描路径THREE.CurvePath，默认Z轴方向
material	前后面材质索引号
extrudeMaterial	拉伸面、倒角面材质索引号
bevelSize	倒角尺寸(拉伸方向)

/**
 * 创建拉伸网格模型
 */
var shape = new THREE.Shape();
/**四条直线绘制一个矩形轮廓*/
shape.moveTo(0,0);//起点
shape.lineTo(0,100);//第2点
shape.lineTo(100,100);//第3点
shape.lineTo(100,0);//第4点
shape.lineTo(0,0);//第5点
var geometry = new THREE.ExtrudeGeometry(//拉伸造型
    shape,//二维轮廓
    //拉伸参数
    {
        amount:120,//拉伸长度
        bevelEnabled:false//无倒角
    }
    );

通过使用点模式渲染上面的几何体，可以看出几何体拉伸的本质效果就是空间分布顶点数据的产生。

var material=new THREE.PointsMaterial({
    color:0x0000ff,
    size:5.0//点对象像素尺寸
});//材质对象
var mesh=new THREE.Points(geometry,material);//点模型对象
scene.add(mesh);//点模型添加到场景中

扫描

拉伸和扫描一样都是三维造型建模方法，three.js提供了一个共同的构造函数来实现扫描和拉伸，对于扫描而言不需要定义amount属性设置拉伸距离，设置扫描路径即可， 定义属性extrudePath，extrudePath的值是路径THREE.CurvePath，可以通过样条曲线、贝赛尔曲线构造函数创建不规则曲线扫描轨迹。

/**
* 创建扫描网格模型
*/
var shape = new THREE.Shape();
/**四条直线绘制一个矩形轮廓*/
shape.moveTo(0,0);//起点
shape.lineTo(0,10);//第2点
shape.lineTo(10,10);//第3点
shape.lineTo(10,0);//第4点
shape.lineTo(0,0);//第5点
/**创建轮廓的扫描轨迹(3D样条曲线)*/
var curve = new THREE.SplineCurve3([
   new THREE.Vector3( -10, -50, -50 ),
   new THREE.Vector3( 10, 0, 0 ),
   new THREE.Vector3( 8, 50, 50 ),
   new THREE.Vector3( -5, 0, 100)
]);
var geometry = new THREE.ExtrudeGeometry(//拉伸造型
   shape,//二维轮廓
   //拉伸参数
   {
       bevelEnabled:false,//无倒角
       extrudePath:curve,//选择扫描轨迹
       steps:50//扫描方向细分数
   }
);