THREE.js—绘制弧线(SplineCurve3)

SplineCurve3通过一系列的点来创建一条平滑的曲线。

var curve = new THREE.SplineCurve3([
    new THREE.Vector3(-10, 10, 10);
    new THREE.Vector3(-5, 5, 5);
    new THREE.Vector3(0, 0, 0);
    new THREE.Vector3(5, -5, 5);
    new THREE.Vector3(10, 0, 10); 
]);

var geometry = new THREE.Geometry();
geometry.vertices = curve.getPoints(50);
var material = new THREE.LineMaterial({color : 0xff0000});
var line = new THREE.Line(geometry, material);

SplineCurve3是Curve的子类，下面看看SplineCurve3从父类中继承了哪些方法。

• THREE.SplineCurve3().getPoints(divisions)：该方法返回一个Vector3数组，把曲线分为divisions段，返回每个点的坐标数组。上面的例子就是通过getPoint(50)返回曲线上
  50等分点的坐标，然后通过这些坐标构建一条曲线。
• THREE.SplineCurve3().getPoint(t)：t是0到1之间的数值，返回一个坐标值
• THREE.SplineCurve3().getPointAt(u)：在曲线的相对位置，根据弧长返回坐标值
• THREE.SplineCurce3().getSpacedPoints(length)：
• THREE.SplineCurve3().getLength()：返回曲线的长度
• THREE.SplineCurve3().getLengths(divisions)：返回累计段的长度列表

让点光源沿着弧线运动

1.新建一条弧线

var curve = new THREE.SplineCurve3([
    new THREE.Vector3(-10, 10, 10);
    new THREE.Vector3(-5, 5, 5);
    new THREE.Vector3(0, 0, 0);
    new THREE.Vector3(5, -5, 5);
    new THREE.Vector3(10, 0, 10); 
]);

2.创建一个光源

var pointLight = new PointLight(0xff0000, 1, 100, 1);
pointLight.name = 'pointLight';

3.获取弧线上面的点，然光源沿着这些点运动。

var pos = 0;
function move(){
    light = scene.getObjectByName('pointLight');
    if(pos < 1){
        light.position = curve.getPointAt(pos);
        pos += 0.001
    }else{
        pos = 0;
    }
}