Cocos Creator 3.0 3D 之相机跟随与旋转

Cocos Creator 3.0 正式版更新后，许多同学开始尝试着在相机上做些简单的事情。现在吃鸡或者 FPS 类的游戏挺火，相机跟随方面的技术必不可少，但目前 Cocos Creator 3D 这方面的代码文章尚不多。

所以今天想跟大家分享下此篇文章，通过学习四元数，理解相机的旋转，实现游戏中常见的第一人称视角及第三人称视角。

本文转载自 Cocos 中文社区，作者：JoeyHuang312，欢迎阅读。

---

01

初探

基础我就不说了，下面我就直接来点代码。

Cocos 3D 的四元数类 Qaut.ts 帮我们封装了基本上常用的四元数计算、算法和相关公式。

虽然我们这篇文章主题是跟随与旋转，但其实绝大部分是针对四元数旋转来说的。对于初学四元数的人来说可能会有些生疏，要运用起来没那么容易，下面我们针对几个方法来讲下 Quat 类如何使用：

//static rotateY<Out extends IQuatLike>(out: Out, a: Out, rad: number): Out; 
//Quat里面很多方法第一个参数都带一个输出的参数，表示的是当前经过计算要输出的四元数，当然，他的返回值也是计算后的四元数。
//下面这句话的意思是绕Y轴旋转指定角度，方法里的单位是以弧度来算的，所以需要转化
this.node.rotation=Quat.rotateY(new Quat(),this.node.rotation,this.currAngle*Math.PI/180);
//该方法是根据欧拉角获取四元数，欧拉角单位是角度
this.node.rotation=Quat.fromEuler(new Quat(),this.angleY,this.angleX,0);
//绕世界空间下指定轴旋转四元数，弧度为单位，绕UP轴
Quat.rotateAround(_quat,this.node.rotation,Vec3.UP,rad);

说下 rotateAround 这个方法，通过配图看我们可以很清楚的看到，给定原四元数，还有旋转轴和角度（该方法以弧度为单位），就能确定绕着这个轴旋转后的四元数，也就是旋转后的位置。

至于具体的计算原理，这些计算四元数的公式其实百度就有一大把，想要更加深入的了解可以看下我上面发的四元数的知识链接。本文主要还是针对相机跟随旋转视角来讲，就不深入来讲四元数了。

我们还可以看下这三个方法的源码：

public static rotateY<Out extends IQuatLike> (out: Out, a: Out, rad: number) {
        rad *= 0.5;


        const by = Math.sin(rad);
        const bw = Math.cos(rad);
        const { x, y, z, w } = a;


        out.x = x * bw - z * by;
        out.y = y * bw + w * by;
        out.z = z * bw + x * by;
        out.w = w * bw - y * by;
        return out;
    }


public static rotateAround<Out extends IQuatLike, VecLike extends IVec3Like> (out: Out, rot: Out, axis: VecLike, rad: number) {
        // get inv-axis (local to rot)
        Quat.invert(qt_1, rot);
        Vec3.transformQuat(v3_1, axis, qt_1);
        // rotate by inv-axis
        Quat.fromAxisAngle(qt_1, v3_1, rad);
        Quat.multiply(out, r