曲线构造函数

  创建几何体的顶点数据可以手动定义，可以自定义一个函数创建，也可使用three.js提供的函数创建，本节课主要讲解一些2D或3D线条的构造函数及其方法属性， 如何通过这些构造函数获得一系列曲线上的顶点数据。

  关于直线、圆弧类的曲线比较容易理解，样条曲线、贝赛尔曲线的知识可以阅读计算机图形学、计算几何学、画法几何等相关书籍。 本课程主要讲解three.js封装后提供的API如何使用，不过多讲解数学、图形算法方面的知识。

    /**
     * 创建三维样条曲线对象
     */
    var spline = new THREE.CatmullRomCurve3([
        new THREE.Vector3(-60,0,30),
        new THREE.Vector3(-30,30,0),
        new THREE.Vector3(0,0,0),
        new THREE.Vector3(30,30,0),
        new THREE.Vector3(60,0,-30)
    ]);
    points = spline.getPoints(20);//细分数为20，从spline曲线上获取系列顶点数据
    var geometry = new THREE.Geometry();//声明一个空几何体对象
    geometry.vertices = points; //顶点坐标添加到geometry对象
    var material=new THREE.LineBasicMaterial({
        color:0xff0000 //线条颜色
    });//材质对象
    var line=new THREE.Line(geometry,material);//线条模型对象
    scene.add(line);//线条对象添加到场景中

getPoints

  代码中的样条曲线执行方法getPoints，会返回一系列的顶点数据构成的数组，顶点颜色样条函数曲线分布，返回的顶点数由方法getPoints的参数细分数决定。 可以更改细分数的值来查看线条的渲染效果，细分数越大，曲线的渲染效果越好。比如设置5，你可以明显的看到5段直线段，把线条渲染模式更改为点渲染模式，你会看到6个顶点。

    points = spline.getPoints(20);//细分数为20，从spline曲线上获取系列顶点数据

THREE.CatmullRomCurve3

  THREE.CatmullRomCurve3定义了一个三维的样条曲线函数，参数是多个表示顶点坐标的Vector3对象组成的数组Array。定义的这些顶点坐标是其它顶点插值计算的基础，根据这些顶点你可以拟合出一条样条曲线。

    points = spline.getPoints(20);//细分数为20，从spline曲线上获取系列顶点数据

Path对象

    /**
     * 创建二维样条曲线对象
     */
    var path = new THREE.Path();//创建Path对象
    path.moveTo (-60,0);//设置起点
    path.splineThru([//样条曲线经过的顶点
        new THREE.Vector2(-60,0),
        new THREE.Vector2(-30,30),
        new THREE.Vector2(0,0),
        new THREE.Vector2(30,30),
        new THREE.Vector2(60,0)
    ]);
    //返回几何体对象，设置细分数
    var geometry = path.createPointsGeometry(25);
    var material=new THREE.LineBasicMaterial({
        color:0xff0000 //线条颜色
    });//材质对象
    var line=new THREE.Line(geometry,material);//线条模型对象
    scene.add(line);//线条对象添加到场景中

    /**
     * 绘制矩形轮廓
     */
    var path = new THREE.Path();//创建Path对象
    path.moveTo (-60,40);//设置起点
    path.lineTo(60,40);//第2点
    path.lineTo(60,-40);//第3点
    path.lineTo(-60,-40);//第4点
    path.lineTo(-60,40);//第5点，与起点重合

    path.absarc(0,0,100,0,Math.PI);//绘制圆弧