THREE.js—绘制弧线(CatmullRomCurve3)

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

//Create a closed wavey loop
var curve = new THREE.CatmullRomCurve3( [
	new THREE.Vector3( -10, 0, 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 points = curve.getPoints( 50 );
var geometry = new THREE.BufferGeometry().setFromPoints( points );

var material = new THREE.LineBasicMaterial( { color : 0xff0000 } );

// Create the final object to add to the scene
var curveObject = new THREE.Line( geometry, material );

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

 

让点光源沿着弧线运动

1.新建一条弧线

var curve = new THREE.CatmullRomCurve3([
    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;
    }
}