threejs 摄像机沿特定轨迹飞行

## 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);
}

转载 https://www.it610.com/article/1281892282643005440.htm## 标题

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值