THREE.JS围绕某点旋转的无人机（四元数）

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