threejs 攝像機沿特定軌跡飛行

		//獲取當前camera位置
		let camPosition=camera.position;         //獲取攝像機當前位置
		let newPosition=new THREE.Vertex(1,50,-24);     //設置目標位置
		let curve=addLines(camPosition,newPosition).curve;    //繪製貝塞爾曲線
//取curve的50個點
		let points=curve.getPoints(50);
		let index=0;
		//攝像機每50毫秒移動一個點的位置
		let a=setInterval(function () {
		camera.position.set(points[index].x,points[index].y,points[index].z);
		console.log(index);
		camera.lookAt(new THREE.Vertex(0,0,0))
		index++;
		if(index>50){
		clearInterval(a);
		}
		},50);
// 添加線條
function addLines(v0, v3) {
    // 計算向量夾角
    let angle = v0.angleTo(v3) * 270 / Math.PI / 10; // 0 ~ Math.PI
    let aLen = angle * 50,
        hLen = angle * angle * 120;
    let p0 = new THREE.Vector3(0, 0, 0);

    // 開始,結束點
    // let v0 = groupDots.children[0].position;
    // let v3 = groupDots.children[1].position;

    // 法線向量
    let rayLine = new THREE.Ray(p0, getVCenter(v0.clone(), v3.clone()));

    // 頂點座標
    let vtop = rayLine.at(hLen / rayLine.at(1).distanceTo(p0));

    // 控制點座標
    let v1 = getLenVcetor(v0.clone(), vtop, aLen);
    let v2 = getLenVcetor(v3.clone(), vtop, aLen);

    // 繪製貝塞爾曲線
    let curve = new THREE.CubicBezierCurve3(v0, v1, v2, v3);
    let geo = new THREE.Geometry();
    geo.vertices = curve.getPoints(50);
    let mat = new THREE.LineBasicMaterial({color: 0xff0000});

    return {
        curve: curve,
        lineMesh: new THREE.Line(geo, mat)
    };
}

// 計算v1,v2 的中點
function getVCenter(v1, v2) {
    let v = v1.add(v2);
    return v.divideScalar(2);
}

// 計算V1,V2向量固定長度的點
function getLenVcetor(v1, v2, len) {
    let v1v2Len = v1.distanceTo(v2);
    return v1.lerp(v2, len / v1v2Len);
}

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章