loader.load("../../public/无人机.glb", function (gltf) {
const fly = gltf.scene
// fly.scale.set(0.5, 0.5, 0.5);
// fly.add(gltf.scene);
scene.add(fly);
const axesHelper = new THREE.AxesHelper(30);
fly.add(axesHelper);//用一个坐标轴可视化模型的局部坐标系(本地坐标系)
const R = 100;//绕转半径
const H = 30;//绕转高度
// 初始位置
fly.position.y = H;
fly.position.x = R;
//无人机加载进来默认正反向(相机镜头方向)
const a = new THREE.Vector3(0, 0 ,1);
// 绕转中心的坐标
const target = new THREE.Vector3(0, H, 0);
const q0 = fly.quaternion.clone();//姿态角度初始值
let angle = 0;
function loop() {
requestAnimationFrame(loop);
//第一步绕某处旋转,这里是绕原点
//angle为角度根据角度和y高度求出x和z的值用来不断渲染无人机的位置
angle+=0.01;
const x=R*Math.cos(angle);
const z=R*Math.sin(angle);
//根据x和z加上高度h重新给无人机定位
fly.position.set(x,H,z);
//第二步首先获取无人机需要观测的地点到无人机的向量,以为只要方向,所以归一
const b=target.clone().sub(fly.position).normalize();
//实例化一个四元数
const q=new THREE.Quaternion();
//第三步生成一个绕a旋转b度的四元数
q.setFromUnitVectors(a,b);
//第四步获取需要转的角度初始的位置四元数乘需要旋转的四元数q
const newQ=q0.clone().multiply(q);
//最后赋值给无人机的四元数
fly.quaternion.copy(newQ)
}
loop();
}
THREE.JS围绕某点旋转的无人机(四元数)
于 2024-03-13 14:22:02 首次发布