CocosCreator3D相机跟随与旋转
前言
CocosCreator引擎版本：CocosCreator3D 3.0
CocosCreator3D正式版，千呼万唤的终于在年前几天更新，我尝试了下，额，虽然还有很大bug，但也理解。
然后我尝试着在相机上做些简单的事情，都知道现在吃鸡或者FPS类的游戏挺火，那相机跟随方面的技术是必不可少的，然后我就搜了下发现这方面的代码在cocoscreator3D上还是挺少的文章的，所有就想跟大家分享下此篇文章
大家互相学习互相进步，文章里如有错误的或者可以改进的地方还请大家指出。
目标
1.学习四元数，理解相机的旋转
2.实现游戏中常见的第一人称视角，第三人称视角
阅读所需知识和引用参考
初探
基础我就不说了，上面那个大神的博客（四元数与3D旋转实例）讲的很清楚。下面我就直接来点代码
cocos3D的四元数类Qaut.ts帮我们封装了基本上常用的四元数计算、算法和相关公式。虽然我们这篇文章主题是跟随与旋转，但其实绝大部分是针对四元数旋转来说的。
但对于初学四元数的人来说可能会有些生疏，要运用起来没那么容易，这个其实Unity3D里面就做得很好，自带的API里面有很多可以直接调用的方法直接用就可以，而且有很多教程，下面的很多代码我也是大部分有参考unity的四元数方法来做的。
下面我们针对几个方法来讲下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, rot, qt_1);
return out;
}
public static fromEuler<Out extends IQuatLike> (out: Out, x: number, y: number, z: number) {
x *= halfToRad;
y *= halfToRad;
z *= halfToRad;
const sx = Math.sin(x);
const cx = Math.cos(x);
const sy = Math.sin(y);
const cy = Math.cos(y);
const sz = Math.sin(z);
const cz = Math.cos(z);
out.x = sx * cy * cz + cx * sy * sz;
out.y = cx * sy * cz + sx * cy * sz;
out.z = cx * cy * sz - sx * sy * cz;
out.w = cx * cy * cz - sx * sy * sz;
return out;
}
其实这第一个参数我是觉得是不是有点多余，因为每次都要把多一个参数进去。所以为了更方便使用，我自己又写了个四元数类，去掉了第一个参数。
PS:文章有个Quaternion类都是我自己封装的，和Quat是差不多的，在文章后面的源码有
环绕物体
在cocos3D
环绕物体旋转，没什么好说的，就几句代码，相关说明也有注释了。
本文源码都会在文章末尾放出来。
update(dt:number)
{
//围绕旋转
Quaternion.RotationAroundNode(this.node,this.target.position,Vec3.UP,0.5);
this.node.lookAt(this.target.position);
}
封装这个方法的想法来源于Unity的Transform是有这样一个方法的，这个方法和上面的Quat.rotateAround方法是差不多的，只是这里多封装了一个修改变换的位置，使得Node按照这个旋转弧度去获取位置更改位置。（PS：熟悉unity的应该知道这个方法对比unity的那个还是有点差别，后面我会持续改进，还请继续关注哈）
这里说下RotationAroundNode这个方法，因为后面还会弄得到，这里RotationAroundNode我是直接封装在一个类里面了（源码在后面），里面的具体实现方法是：
/**
* 将变换围绕穿过世界坐标中的 point 的 axis 旋转 angle 度。
* 这会修改变换的位置和旋转。
* @param self 要变换旋转的目标
* @param pos 指定围绕的point
* @param axis 旋转轴
* @param angle 旋转角度
*/
public static RotationAroundNode(self:Node,pos:Vec3,axis:Vec3,angle:number):Quat
{
let _quat=new Quat();
let v1=new Vec3();
let v2=new Vec3();
let pos2:Vec3=self.position;
let rad=angle* this.Deg2Rad;
//根据旋转轴和旋转弧度计算四元数
Quat.fromAxisAngle(_quat,axis,rad);
//相减，目标点与相机点之间的向量
Vec3.subtract(v1,pos2,pos);
//把向量dir根据计算到的四元数旋转，然后计算出旋转后的距离
Vec3.transformQuat(v2,v1,_quat);
self.position=Vec3.add(v2,pos,v2);
//根据轴和弧度绕世界空间下指定轴旋转四元数
Quat.rotateAround(_quat,self.rotation,axis,rad);
return _quat;
}
这段代码如果很理解四元数的原理的话是很难理解的，当然你也可以直接用，并不会有什么问题。不过这里还是建议大家理解四元数这个概念，会对3D旋转有个很深的理解。
FPS必备-第一人称跟随
第一人称视角，例如我们在玩赛车的时候，都会有两个视角，一个是从赛车外面看向前方，还有个就是以自己为中心从车里面望向车外了。
- 很简单的两句代码，先根据鼠标的偏移量来设置欧拉角，再把欧拉角转换为四元数赋给相机
- 注意这里鼠标的X方向表示的是绕Y轴旋转，鼠标Y方向表示的是绕X轴旋转。所有在赋值转换的时候是倒过来的。
- 相机抬头低头我还做了个限制角度
private MouseMove(e: EventMouse) {
this.angleX+=-e.movementX;
this.angleY+=-e.movementY;
console.log(this.angleY);
this.angleY=this.Clamp(this.angleY,this.xAxisMin,this.xAxisMax);
//this.node.rotation=Quat.fromEuler(new Quat(),this.angleY,this.angleX,0);
//欧拉角转换为四元数
this.node.rotation=Quaternion.GetQuatFromAngle(new Vec3(this.angleY,this.angleX,0));
return ;
}
上帝视角-第三人称跟随
上帝视角的第三人称跟随，好像不同游戏还有不同的跟随方法，这里我先列举出三个，以后如果还遇到更多的，我再补充。
简单的
这就是一个很简单的跟随，设置好距离目标的高度和距离，获取到相机要走到的目标位置，再对相机进行插值运算。
let temp: Vec3 = new Vec3();
Vec3.add(temp, this.lookAt.worldPosition, new Vec3(0, this.positionOffset.y, this.positionOffset.z));
this.node.position = this.node.position.lerp(temp, this.moveSmooth);
尾随屁股后面的
哈哈，尾随这个词，是不是有点不好听。
好像很多RPG游戏都是这样的视角一直跟在后方，相机是不能随意旋转的，他会自动根据人物的正前方向去旋转
具体说明下面的注释里也有，好像也没什么好说的。还有注释的两句代码是cocos3D原方法的，我用的是我自己略微修改了的封装的方法
//这里计算出相机距离目标的位置的所在坐标先，距离多高Y，距离多远Z
//下面四句代码等同于：targetPosition+Up*updistance-forwardView*backDistance
let u = Vec3.multiplyScalar(new Vec3(), Vec3.UP, this.positionOffset.y);
let f = Vec3.multiplyScalar(new Vec3(), this.target.forward, this.positionOffset.z);
let pos = Vec3.add(new Vec3(), this.target.position, u);
//本来这里应该是减的，可是下面的lookat默认前方是-z，所有这里倒转过来变为加
Vec3.add(pos, pos, f);
//球形差值移动，我发现cocos只有Lerp差值移动，而我看unity是有SmoothDampV3平滑缓冲移动的，所有我这里照搬过来了一个球形差值
this.node.position = VectorTool.SmoothDampV3(this.node.position, pos, this.velocity, this.moveSmooth, 100000, 0.02);
//cocos的差值移动
//this.node.position=this.node.position.lerp(pos,this.moveSmooth);
//计算前方向
this.forwardView = Vec3.subtract(this.forwardView, this.node.position, this.target.getWorldPosition());
//this.node.lookAt(this.target.worldPosition);
this.node.rotation=Quaternion.LookRotation(this.forwardView);
- 我们为了在游戏中更好的实现某一缓动效果，都要利用到插值。如果只是单纯的绑定相互关系，那么实现出来的效果肯定很生硬，但我们加入插值计算之后，就能很好地实现镜头的缓冲效果。
- Lerp是线性插值，在两点之间进行插值计算，进行移动
- SmoothDampV3平滑缓冲，东西不是僵硬的移动而是做减速缓冲运动到指定位置，Lerp更像是线性衰减，而SmoothDamp像是弧形衰减，两者都是由快而慢
具体关于SmoothDampV3的解释大家可以看这里：unity中lerp与smoothdamp函数使用误区浅析
最后两句代码是相机方向对准目标，两句代码原理是一样的都是这样的：
let _quat = new Quat();
Vec3.normalize(_forward,_forward);
//根据视口的前方向和上方向计算四元数
Quat.fromViewUp(_quat,_forward,_upwards);
如果大家还要看更加深入点的代码原理，可以查看cocos源码，具体源码位置在：
Window位置：F:\CocosDashboard\resources.editors\Creator\3.0.0\resources\resources\3d\engine\cocos\core\math\quat.ts
Mac位置：/Applications/CocosCreator/Creator/3.0.0/CocosCreator.app/Contents/Resources/resources/3d/engine/bin/.cache/dev/editor/transform-cache/fs/cocos/core/math/quat.js
Window位置：
我要自由旋转的
想到这个其实我是在Unity官方的封装好的一个Camera插件Cinemacine里的相机功能看到的。然后我就试着用cocos3D来写一个。遗憾的是还有些瑕疵，后面我会持续改进。
这个可以说是上面那个的升级版，因为这个跟随着的时候相机是可以根据鼠标来上下左右旋转的，而且目标会根据相机的正方向去行走。
PS：需要配套目标人物相关的旋转代码去使用，源码我在文章后方也贴上去了
/**
* 实时设置相机距离目标的位置position
*/
public SetMove() {
this._forward = new Vec3();
this._right = new Vec3();
this._up = new Vec3();
Vec3.transformQuat(this._forward, Vec3.FORWARD, this.node.rotation);
//Vec3.transformQuat(this._right, Vec3.RIGHT, this.node.rotation);
//Vec3.transformQuat(this._up, Vec3.UP, this.node.rotation);
this._forward.multiplyScalar(this.positionOffset.z);
//this._right.multiplyScalar(this.positionOffset.x);
//this._up.multiplyScalar(this.positionOffset.y);
let desiredPos = new Vec3();
desiredPos = desiredPos.add(this.lookAt.worldPosition).subtract(this._forward).add(this._right).add(this._up);
this.node.position = this.node.position.lerp(desiredPos, this.moveSmooth);
}
/**
* 计算根据鼠标X，Y偏移量来围绕X轴和Y轴的旋转四元数
* @param e
*/
private SetIndependentRotation(e: EventMouse) {
let radX: number = -e.movementX;
let radY: number = -e.movementY;
let _quat: Quat = new Quat();
//计算绕X轴旋转的四元数并应用到node，这里用的是鼠标上下Y偏移量
let _right = Vec3.transformQuat(this._right, Vec3.RIGHT, this.node.rotation);
_quat = Quaternion.RotationAroundNode(this.node, this.target.position, _right, radY);
//获取欧拉角,限制相机抬头低头的范围
this.angle = Quaternion.GetEulerFromQuat(_quat);
this.angle.x = this.angle.x > 0 ? this.Clamp(this.angle.x, 120, 180) : this.Clamp(this.angle.x, -180, -170);
Quat.fromEuler(_quat, this.angle.x, this.angle.y, this.angle.z);
this.node.setWorldRotation(_quat);
//计算绕Y轴旋转的四元数并应用到node，这里用的是鼠标上下X偏移量
_quat = Quaternion.RotationAroundNode(this.node, this.target.position, Vec3.UP, radX);
this.node.setWorldRotation(_quat);
this.angle = Quaternion.GetEulerFromQuat(_quat);
this.MouseX = this.angle.y;
this.MouseY = this.angle.x;
//console.log(this.MouseX.toFixed(2),this.MouseY.toFixed(2));
}
人物目标跟随旋转:
if (data.keyCode == macro.KEY.a || data.keyCode == macro.KEY.d
|| data.keyCode == macro.KEY.w || data.keyCode == macro.KEY.s) {
if (this.camera.GetType()== ThirdPersonCameraType.FollowIndependentRotation) {
let fq = Quat.fromEuler(new Quat(), 0, this.camera.MouseX, 0);
this.node.rotation = Quat.slerp(new Quat(), this.node.rotation, fq, 0.1);
}
else {
//this.node.rotation=Quat.rotateY(new Quat(),this.node.rotation,this.currAngle*Math.PI/180);
Quaternion.RotateY(this.node, this.currAngle);
}
this.node.translate(this.movemenet, Node.NodeSpace.LOCAL);
}
上面有句限制绕X轴旋转的代码，我限制了相机的抬头和低头的范围是，角度在120-180和-180->-170,之所以我会很奇葩的两个范围是因为，如果相机正对着物体的时候是0度，从正对到抬头是0-180，从正对到低头是-180-0。所有才会分开判断。这个在unity上好像是没这个问题的，应该是unity自动帮我们处理了
这里要分开设置X轴和Y轴旋转的代码，Unity上只要两句代码就可以，而这了可以看到我分开了好多，可能是我方法不对，我目前还没找到简化代码的办法，如果有大神知道恳请指点
其实通读全文，我们可以看到，用得最多的就是rotationAround,lookAt,transformQuat,transformQuat这几个，只要熟悉了对于旋转就没什么好怕的了。
全文源码（很长）：
围绕物体：
import { _decorator, Component, Node, Quat, Vec3 } from 'cc';
import { Quaternion } from './Quaternion';
const { ccclass, property } = _decorator;
/**
* 围绕着指定物体旋转相机
*/
@ccclass('CameraRotationAround')
export class CameraRotationAround extends Component {
@property(Node)
target:Node=null;
private _angle:number=0;
update(dt:number)
{
//超级简化版
Quaternion.RotationAroundNode(this.node,this.target.position,Vec3.UP,0.5);
this.node.lookAt(this.target.position);
}
}
第一人称视角：
import { _decorator, Component, Node, EventMouse, systemEvent, Quat, Vec2, Vec3 } from 'cc';
import { Quaternion } from './Quaternion';
const { ccclass, property } = _decorator;
/**
* 第一人称视角相机
*/
@ccclass('FirstPersonCamera')
export class FirstPersonCamera extends Component
{
@property
xAxisMin:number=140;
@property
xAxisMax:number=210;
private angleX:number=0;
private angleY:number=0;
start () {
systemEvent.on(Node.EventType.MOUSE_MOVE, this.MouseMove, this);
}
/**
* 根据鼠标偏移量，结合欧拉角进行旋转
* @param e
*/
private MouseMove(e: EventMouse) {
this.angleX+=-e.movementX;
this.angleY+=-e.movementY;
console.log(this.angleY);
this.angleY=this.Clamp(this.angleY,this.xAxisMin,this.xAxisMax);
//this.node.rotation=Quat.fromEuler(new Quat(),this.angleY,this.angleX,0);
//欧拉角转换为四元数
this.node.rotation=Quaternion.GetQuatFromAngle(new Vec3(this.angleY,this.angleX,0));
return ;
}
private Clamp(val:number,min:number,max:number):number
{
if(val<=min) val=min;
if(val>=max) val=max;
return val;
}
}
第三人称相机跟随：
import { _decorator, Component, Node, EventMouse, systemEvent, Quat, Vec3, Vec2, Enum, ValueType, IVec3Like } from 'cc';
import { Quaternion } from './Quaternion';
import { VectorTool } from './VectorTool';
const { ccclass, property } = _decorator;
export enum ThirdPersonCameraType {
/** 相机紧跟随着目标，相机不会旋转 */
Follow = 0,
/** 相机会旋转紧跟着目标正后方，旋转不可控制 */
FollowTrackRotation = 1,
/** 相机紧跟随着目标，相机可以自由旋转 */
FollowIndependentRotation = 2,
}
/**
* 第三人称相机跟随
* 这里总结了三个相机跟随
* 1. 相机紧跟随着目标，相机不会旋转
* 2. 相机紧跟随着目标，相机会旋转紧跟着目标正后方，旋转不可控制
* 3. 相机紧跟随着目标，相机可以自由旋转，角色向前移动的时候，前方向永远是相机的正方向
*/
@ccclass('ThirdFreeLookCamera')
export class ThirdFreeLookCamera extends Component {
/** 目标 */
@property(Node)
target: Node = null;
/** 注视的目标，这里我想让相机对准目标的上方一点，所有多加了注视（相机正对着）的目标 */
@property(Node)
lookAt: Node = null;
@property({ type: Enum(ThirdPersonCameraType) })
cameraType: ThirdPersonCameraType = ThirdPersonCameraType.Follow;
/** 距离目标距离 */
@property
positionOffset: Vec3 = new Vec3(0, 120, 200);
/** 移动差值移动系数 */
@property
moveSmooth: number = 0.02;
/** 差值旋转系数 */
@property
rotateSmooth: number = 0.03;
public MouseX: number = 0;
public MouseY: number = 0;
private _forward: Vec3 = new Vec3();
private _right: Vec3 = new Vec3();
private _up: Vec3 = new Vec3();
private angle: IVec3Like = null;
start() {
systemEvent.on(Node.EventType.MOUSE_DOWN, this.MouseDown, this);
systemEvent.on(Node.EventType.MOUSE_MOVE, this.MouseMove, this);
systemEvent.on(Node.EventType.MOUSE_UP, this.MouseUp, this);
this.cameraType == ThirdPersonCameraType.Follow && this.node.lookAt(this.target.worldPosition);
}
isDown: boolean = false;
private MouseDown(e: EventMouse) {
this.isDown = true;
}
private MouseMove(e: EventMouse) {
if (this.cameraType == ThirdPersonCameraType.FollowIndependentRotation) {
this.SetIndependentRotation(e);
}
}
private MouseUp(e: EventMouse) {
this.isDown = false;
}
update(dt: number) {
if (this.target) {
switch (this.cameraType) {
case ThirdPersonCameraType.Follow:
this.SetFollow();
break;
case ThirdPersonCameraType.FollowTrackRotation:
this.SetFollowTrackRotation();
break;
case ThirdPersonCameraType.FollowIndependentRotation:
this.SetMove();
break;
}
}
}
private SetFollow() {
let temp: Vec3 = new Vec3();
Vec3.add(temp, this.lookAt.worldPosition, new Vec3(0, this.positionOffset.y, this.positionOffset.z));
this.node.position = this.node.position.lerp(temp, this.moveSmooth);
}
private velocity = new Vec3();
private forwardView: Vec3 = new Vec3();
/**
*
*/
private SetFollowTrackRotation() {
//这里计算出相机距离目标的位置的所在坐标先，距离多高Y，距离多远Z
//下面四句代码等同于：targetPosition+Up*updistance-forwardView*backDistance
let u = Vec3.multiplyScalar(new Vec3(), Vec3.UP, this.positionOffset.y);
let f = Vec3.multiplyScalar(new Vec3(), this.target.forward, this.positionOffset.z);
let pos = Vec3.add(new Vec3(), this.target.position, u);
//本来这里应该是减的，可是下面的lookat默认前方是-z，所有这里倒转过来变为加
Vec3.add(pos, pos, f);
//球形差值移动，我发现cocos只有Lerp差值移动，而我看unity是有球形差值移动的，所有我这里照搬过来了一个球形差值
this.node.position = VectorTool.SmoothDampV3(this.node.position, pos, this.velocity, this.moveSmooth, 100000, 0.02);
//cocos的差值移动
//this.node.position=this.node.position.lerp(pos,this.moveSmooth);
//计算前方向
this.forwardView = Vec3.subtract(this.forwardView, this.node.position, this.target.getWorldPosition());
this.node.lookAt(this.target.worldPosition);
//this.node.rotation=Quaternion.LookRotation(this.forwardView);
}
/*************************FollowIndependentRotation***************** */
/**
* 实时设置相机距离目标的位置position
*/
public SetMove() {
this._forward = new Vec3();
this._right = new Vec3();
this._up = new Vec3();
Vec3.transformQuat(this._forward, Vec3.FORWARD, this.node.rotation);
//Vec3.transformQuat(this._right, Vec3.RIGHT, this.node.rotation);
//Vec3.transformQuat(this._up, Vec3.UP, this.node.rotation);
this._forward.multiplyScalar(this.positionOffset.z);
//this._right.multiplyScalar(this.positionOffset.x);
//this._up.multiplyScalar(this.positionOffset.y);
let desiredPos = new Vec3();
desiredPos = desiredPos.add(this.lookAt.worldPosition).subtract(this._forward).add(this._right).add(this._up);
this.node.position = this.node.position.lerp(desiredPos, this.moveSmooth);
}
/**
* 计算根据鼠标X，Y偏移量来围绕X轴和Y轴的旋转四元数
* @param e
*/
private SetIndependentRotation(e: EventMouse) {
let radX: number = -e.movementX;
let radY: number = -e.movementY;
let _quat: Quat = new Quat();
//计算绕X轴旋转的四元数并应用到node，这里用的是鼠标上下Y偏移量
let _right = Vec3.transformQuat(this._right, Vec3.RIGHT, this.node.rotation);
_quat = Quaternion.RotationAroundNode(this.node, this.target.position, _right, radY);
this.angle = Quaternion.GetEulerFromQuat(_quat);
//限制相机抬头低头的范围
this.angle.x = this.angle.x > 0 ? this.Clamp(this.angle.x, 120, 180) : this.Clamp(this.angle.x, -180, -170);
Quat.fromEuler(_quat, this.angle.x, this.angle.y, this.angle.z);
this.node.setWorldRotation(_quat);
//计算绕Y轴旋转的四元数并应用到node，这里用的是鼠标上下X偏移量
_quat = Quaternion.RotationAroundNode(this.node, this.target.position, Vec3.UP, radX);
this.node.setWorldRotation(_quat);
this.angle = Quaternion.GetEulerFromQuat(_quat);
this.MouseX = this.angle.y;
this.MouseY = this.angle.x;
//console.log(this.MouseX.toFixed(2),this.MouseY.toFixed(2));
}
/*************************FollowIndependentRotation end***************** */
private Clamp(val: number, min: number, max: number) {
if (val <= min) val = min;
else if (val >= max) val = max;
return val;
}
public GetType(): ThirdPersonCameraType {
return this.cameraType;
}
}
扩展类：
import { Component, EPSILON, IVec3Like, Mat3, math, Node, quat, Quat, Vec3 } from "cc";
/**
* 该类属于一个引擎内部的Quat四元数类的一个扩展简化版
* 因为本人觉得有些out参数过于多余，在这里就隐藏掉了
* 同时也加了些其他的四元数旋转的功能
*/
export class Quaternion {
private static Deg2Rad:number=(Math.PI) / 180;
/**
* 绕Y轴旋转置顶节点
* @param _node 需要旋转的节点
* @param _angle 旋转的角度（是角度不是弧度）
*/
public static RotateY(_node: Node, _angle: number): Quat {
let _quat = new Quat();
_node.rotation = Quat.rotateY(_quat, _node.rotation, _angle * this.Deg2Rad);
return _quat;
}
/**
* 绕X轴旋转置顶节点
* @param _node 需要旋转的节点
* @param _angle 旋转的角度（是角度不是弧度）
*/
public static RotateX(_node: Node, _angle: number): Quat {
let _quat = new Quat();
_node.rotation = Quat.rotateX(_quat, _node.rotation, _angle * this.Deg2Rad);
return _quat;
}
/**
* 绕Z轴旋转置顶节点
* @param _node 需要旋转的节点
* @param _angle 旋转的角度（是角度不是弧度）
*/
public static RotateZ(_node: Node, _angle: number): Quat {
let _quat = new Quat();
_node.rotation = Quat.rotateZ(_quat, _node.rotation, _angle * this.Deg2Rad);
return _quat;
}
/**
* 绕世界空间下指定轴旋转四元数
* @param _targetQuat 指定要旋转四元数
* @param axis 旋转轴
* @param _angle 旋转角度
*/
public static RotateAround(_targetQuat: Quat, axis: Vec3, _angle: number): Quat {
let _quat = new Quat();
Quat.rotateAround(_quat, _targetQuat, axis, _angle * this.Deg2Rad);
return _quat;
}
/**
* 绕本地空间下指定轴旋转四元数
* @param _targetQuat 指定要旋转四元数
* @param axis 旋转轴
* @param _angle 旋转角度
*/
public static RotateAroundLocal(_targetQuat: Quat, axis: Vec3, _angle: number): Quat {
let _quat = new Quat();
Quat.rotateAroundLocal(_quat, _targetQuat, axis, _angle * this.Deg2Rad);
return _quat;
}
/**
* 将变换围绕穿过世界坐标中的 point 的 axis 旋转 angle 度。
* 这会修改变换的位置和旋转。
* @param self 要变换旋转的目标
* @param pos 指定围绕的point
* @param axis 旋转轴
* @param angle 旋转角度
*/
public static RotationAroundNode(self:Node,pos:Vec3,axis:Vec3,angle:number):Quat
{
let _quat=new Quat();
let v1=new Vec3();
let v2=new Vec3();
let pos2:Vec3=self.position;
let rad=angle* this.Deg2Rad;
Quat.fromAxisAngle(_quat,axis,rad);
Vec3.subtract(v1,pos2,pos);
Vec3.transformQuat(v2,v1,_quat);
self.position=Vec3.add(v2,pos,v2);
Quat.rotateAround(_quat,self.rotation,axis,rad);
return _quat;
}
/**
* 从四元数得到欧拉角
* @param _quat 四元数
*/
public static GetEulerFromQuat(_quat: Quat): IVec3Like {
let angle: IVec3Like = Quat.toEuler(new Vec3(), _quat, true);
return angle;
}
/**
* 从欧拉角得到四元数
* @param _angle 欧拉角
*/
public static GetQuatFromAngle(_angle: IVec3Like): Quat {
let _quat: Quat = Quat.fromEuler(new Quat(), _angle.x, _angle.y, _angle.z);
return _quat;
}
/**
* 四元数差值，在 a 和 b 之间插入 t，然后对结果进行标准化处理。参数 t 被限制在 [0, 1] 范围内。
* 该方法比 Slerp 快，但如果旋转相距很远，其视觉效果也更糟糕。
* @param _a
* @param _b
* @param _t
*/
public static Lerp(_a: Quat, _b: Quat, _t: number): Quat {
let _quat = new Quat();
Quat.lerp(_quat, _a, _b, _t);
return _quat;
}
/**
* 四元数球形差值
* 在 a 和 b 之间以球形方式插入 t。参数 t 被限制在 [0, 1] 范围内。
* @param _a
* @param _b
* @param _t
*/
public static Slerp(_a: Quat, _b: Quat, _t: number): Quat {
let _quat = new Quat();
Quat.slerp(_quat, _a, _b, _t);
return _quat;
}
public static LookRotation(_forward: Vec3, _upwards: Vec3 = Vec3.UP): Quat {
let _quat = new Quat();
Vec3.normalize(_forward,_forward);
Quat.fromViewUp(_quat,_forward,_upwards);
return _quat;
}
}
import { _decorator, Component, Node, Vec3, IVec3Like } from 'cc';
export class VectorTool {
public static SmoothDampV3(current:IVec3Like,target:Vec3,currentVelocity:IVec3Like,smoothTime:number,maxSpeed:number,deltaTime:number)
{
let outputX:number=0;
let outputY:number=0;
let outputZ:number=0;
smoothTime=Math.max(0.0001,smoothTime);
let omega:number=2/smoothTime;
let x:number=omega*deltaTime;
let exp:number=1/(1+x+0.48*x*x+0.235*x*x*x);
let changX:number=current.x-target.x;
let changY:number=current.y-target.y;
let changZ:number=current.z-target.z;
let originalTo:Vec3=target;
let maxChange:number=maxSpeed*smoothTime;
let maxChangeSq:number=maxChange*maxChange;
let sqrmag:number=changX*changX+changY*changY+changZ*changZ;
if(sqrmag>maxChangeSq)
{
let mag:number=Math.sqrt(sqrmag);
changX=changX/mag*maxChangeSq;
changY=changY/mag*maxChangeSq;
changZ=changZ/mag*maxChangeSq;
}
target.x=current.x-changX;
target.y=current.y-changY;
target.z=current.z-changZ;
let tempX:number=(currentVelocity.x+omega*changX)*deltaTime;
let tempY:number=(currentVelocity.y+omega*changY)*deltaTime;
let tempZ:number=(currentVelocity.z+omega*changZ)*deltaTime;
currentVelocity.x=(currentVelocity.x-omega*tempX)*exp;
currentVelocity.y=(currentVelocity.y-omega*tempY)*exp;
currentVelocity.z=(currentVelocity.z-omega*tempZ)*exp;
outputX=target.x+(changX+tempX)*exp;
outputY=target.y+(changY+tempY)*exp;
outputZ=target.z+(changZ+tempZ)*exp;
let origMinusCurrentX:number=originalTo.x-current.x;
let origMinusCurrentY:number=originalTo.y-current.y;
let origMinusCurrentZ:number=originalTo.z-current.z;
let outMinusOrigX:number=outputX-originalTo.x;
let outMinusOrigY:number=outputY-originalTo.y;
let outMinusOrigZ:number=outputZ-originalTo.z;
if(origMinusCurrentX*outMinusOrigX+origMinusCurrentY*outMinusOrigY+origMinusCurrentZ*outMinusOrigZ>0)
{
outputX=originalTo.x;
outputY=originalTo.y;
outputZ=originalTo.z;
currentVelocity.x=(outputX-originalTo.x)/deltaTime;
currentVelocity.y=(outputY-originalTo.y)/deltaTime;
currentVelocity.z=(outputZ-originalTo.z)/deltaTime;
}
return new Vec3(outputX,outputY,outputZ);
}
public static SmoothDamp(current:number,target:number,currentVelocity:number,smoothTime:number,maxSpeed:number,deltaTime:number)
{
smoothTime=Math.max(0.0001,smoothTime);
let num:number=2/smoothTime;
let num2:number=num*deltaTime;
let num3:number=1/(1+num2+0.48*num2*num2+0.235*num2*num2*num2);
let num4:number=current-target;
let num5:number=target;
let num6:number=maxSpeed*smoothTime;
num4=VectorTool.Clamp(num4,-num6,num6);
target=current-num4;
let num7:number=(currentVelocity+num*num4)*deltaTime;
currentVelocity=(currentVelocity-num*num7)*num3;
let num8:number=target+(num4+num7)*num3;
if(num5-current>0==num8>num5)
{
num8=num5;
currentVelocity=(num8-num5)/deltaTime;
}
return num8;
}
public static Clamp(val:number,min:number,max:number)
{
if(val<=min) val=min;
if(val>=max) val=max;
return val;
}
}
目标类：
import { _decorator, Component, Node, systemEvent, SystemEventType, macro, EventKeyboard, Vec2, Vec3, Quat, quat } from 'cc';
import { EventManager } from './EventManager';
import { KeyboardExtends } from './KeyboardExtends';
import { Quaternion } from './Quaternion';
import { ThirdFreeLookCamera, ThirdPersonCameraType } from './ThirdFreeLookCamera';
const { ccclass, property } = _decorator;
@ccclass('TCar')
export class TCar extends Component {
@property(ThirdFreeLookCamera)
camera: ThirdFreeLookCamera = null;
@property
speedVec: Vec2 = new Vec2(5, 5);
@property
angleSpeed: number = 5;
private movemenet: Vec3 = Vec3.ZERO;
private deltaTime: number = 0;
onLoad() {
this.movemenet = new Vec3(0, 0, 0);
}
start() {
//systemEvent.on(SystemEventType.KEY_DOWN, this.onKeyDown, this);
//systemEvent.on(SystemEventType.KEY_UP, this.onKeyUp, this);
EventManager.addEventListener(SystemEventType.KEY_DOWN, this.onKeyDown, this);
EventManager.addEventListener(SystemEventType.KEY_UP, this.onKeyUp, this);
}
private onKeyDown(event, data) {
this.movemenet = new Vec3(0, 0, 0);
this.currAngle = 0;
switch (data.keyCode) {
case macro.KEY.w:
this.movemenet.z = this.speedVec.x * this.deltaTime * 10;
break;
case macro.KEY.s:
this.movemenet.z = -this.speedVec.x * this.deltaTime * 10;
break;
case macro.KEY.a:
if (this.camera.GetType() == ThirdPersonCameraType.FollowIndependentRotation)
this.movemenet.x = this.speedVec.x * this.deltaTime * 10;
else
this.currAngle = this.angleSpeed * this.deltaTime * 10;
break;
case macro.KEY.d:
if (this.camera.GetType() == ThirdPersonCameraType.FollowIndependentRotation)
this.movemenet.x = -this.speedVec.x * this.deltaTime * 10;
else
this.currAngle -= this.angleSpeed * this.deltaTime * 10;
break;
case macro.KEY.c:
break;
}
if (data.keyCode == macro.KEY.a || data.keyCode == macro.KEY.d
|| data.keyCode == macro.KEY.w || data.keyCode == macro.KEY.s) {
if (this.camera.GetType()== ThirdPersonCameraType.FollowIndependentRotation) {
let fq = Quat.fromEuler(new Quat(), 0, this.camera.MouseX, 0);
this.node.rotation = Quat.slerp(new Quat(), this.node.rotation, fq, 0.1);
}
else {
//this.node.rotation=Quat.rotateY(new Quat(),this.node.rotation,this.currAngle*Math.PI/180);
Quaternion.RotateY(this.node, this.currAngle);
}
this.node.translate(this.movemenet, Node.NodeSpace.LOCAL);
}
}
private onKeyUp(event) {
console.log('key up...');
}
private currQuat: Quat = new Quat();
private currAngle: number = 0;
update(dt: number) {
this.deltaTime = dt;
}
}
4643
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
