01

效果演示

CocosCreator版本：3.4.1

1摄像机围绕目标旋转

gif中演示了随着鼠标滑动，摄像机围绕目标做相应的位移及旋转，水平方向可以旋转，垂直方向限定在一定角度内，类似于《哈利波特魔法觉醒》中寝室的视角旋转

2旋转目标节点

gif中演示了随着鼠标滑动，目标节点做相应的旋转，可用于度无死角观察目标

3 人称视角变换

gif中演示了随着鼠标滑动，摄像机做相应的旋转，类似于编辑器中鼠标右键旋转视角，或者常见游戏中 人称视角变换

02

实现方法

1摄像机围绕目标旋转

随着手指滑动，摄像机在以目标节点为圆心，以摄像机和目标节点的距离为半径形成的球体表面做相应的位移，并时刻朝向目标节点

首先通过event.getDelta()获取当前触摸滑动的偏移值

letdelta=event.getDelta();

delta：触点距离上一次事件移动的距离对象

将delta分解：

deltaX：水平方向的触摸偏移值

deltaY：垂直方向的触摸偏移值

当手指滑动时

水平方向的滑动偏移对应摄像机绕Y轴旋转的弧线（AOB，蓝色弧线），向右为正，向左为负

垂直方向的滑动偏移对应摄像机绕X轴旋转的弧线（COD，红色弧线），向下为正，向上为负

将滑动偏移分解后，需要求解的只是摄像机在水平和垂直方向移动一定弧度后的位置及角度

已知：

旋转向量：摄像机到目标节点的向量

旋转轴：水平方向是Y轴，即v3(0,1,0)，垂直方向是X轴的反向，即v3(-1,0,0)

旋转弧度：滑动偏移在水平和垂直方向的分量

根据滑动偏移值计算旋转弧度（速度）：

letdelta=event.getDelta();letspeed=0.;lethorizontal=delta.x*speed;letvertical=delta.y*speed;

根据旋转轴和旋转角度计算四元数：

letquat=newQuat();Quat.fromAxisAngle(quat,axis,angle);

根据旋转向量及四元数计算旋转后的坐标：

绕任意轴旋转/绕任意点旋转/平滑旋转/自定义环形体、胶囊体/面向目标位置中有详细的介绍

letposition=v3();Vec3.subtract(position,node.worldPosition,point);Vec3.transformQuat(position,position,quat);Vec3.add(position,point,position);

根据旋转后的坐标及目标节点坐标计算四元数：

letdir=v3();Vec3.subtract(dir,position,this.nodeTarget.worldPosition);letrotation=newQuat();Quat.fromViewUp(rotation,dir.normalize(),Vec3.UP);

根据四元数计算欧拉角：

这里需要对旋转角度做限制，以使场景表现更加合理

涉及到具体的角度时，使用欧拉角更直观

leteuler=v3();rotation.getEulerAngles(euler);if(euler.x-40

euler.x-10){return;}

设置节点位置及旋转

node.setWorldPosition(position);node.setWorldRotation(rotation);

完整代码：

aroundTarget(event:EventTouch){letdelta=event.getDelta();letspeed=0.;lethorizontal=delta.x*speed;letvertical=delta.y*speed;//计算水平方向的偏移量this.rotateAround(this.nodeCamera,this.nodeTarget.worldPosition,v3(0,1,0),horizontal);//计算垂直方向的偏移量this.rotateAround(this.nodeCamera,this.nodeTarget.worldPosition,v3(-1,0,0),vertical);}

rotateAround(node:Node,point:Vec3,axis:Vec3,angle:number){//根据旋转轴和旋转角度构建四元数letquat=newQuat();Quat.fromAxisAngle(quat,axis,angle);//计算旋转后的位置letposition=v3();Vec3.subtract(position,node.worldPosition,point);Vec3.transformQuat(position,position,quat);Vec3.add(position,point,position);//根据旋转后的位置计算四元数letdir=v3();Vec3.subtract(dir,position,this.nodeTarget.worldPosition);letrotation=newQuat();Quat.fromViewUp(rotation,dir.normalize(),Vec3.UP);//根据四元数计算欧拉角判断是否在需要的范围内leteuler=v3();rotation.getEulerAngles(euler);if(euler.x-40

euler.x-10){return;}//设置位置及旋转node.setWorldPosition(position);node.setWorldRotation(rotation);}

2旋转目标节点

随着手指滑动，目标节点以滑动偏移向量的垂线为轴做相应的旋转

已知：

旋转四元数：目标节点的rotation

旋转轴：触摸偏移向量的垂线，即(-delta.y,delta.x,0)

旋转弧度：触摸偏移距离，距离越大，旋转角度越大

完整代码：

rotateTarget(event:EventTouch){letdelta=event.getDelta();//计算旋转轴letaxis=v3(-delta.y,delta.x,0).normalize();//计算旋转速度letrad=delta.length()*0.02;//将节点的旋转绕letquat=newQuat();Quat.rotateAround(quat,this.nodeTarget.worldRotation,axis,rad);this.nodeTarget.setWorldRotation(quat);}

3 人称视角变换

随着手指滑动，摄像机位置保持不变，只做相应的旋转

相比 种场景，这里就简单很多，将触摸偏移分解为水平和垂直方向后，直接根据旋转轴和旋转弧度计算四元数

letrotateAround=function(node:Node,axis:Vec3,angle:number){letquat=newQuat();//绕世界空间下指定轴旋转四元数Quat.rotateAround(quat,node.worldRotation,axis,angle);//设置旋转node.setWorldRotation(quat);}

完整demo

转载请注明:http://www.aideyishus.com/lkyy/390.html