CocosCreator3D之视角移动

摘要

你是否困惑于 CocosCreator3D 的视角与移动？KUOKUO 带你搞定！底部源码相送！

正文

版本说明

使用 CocosCreator3D 的 1.0.1 版本演示。

模型的移动

在二维和三维的移动控制中，对于平面移动，虽然也都是控制两个方向，但是还采用角度计算的方式会出现很多问题，毕竟还有第三个轴。我们要转变思维，从 Math.sin 与 Math.cos 转变为 Vec3 控制。

比如我想让一个物体前进 10 的距离。

1. let pos = this.node.getPosition();

2. pos.x += 10;

3. this.node.setPosition(pos);

但是这样的移动，是沿着 X 轴的移动，如果主角不是看向前方呢？我们还要考虑旋转度。所以要封装一个方法，让 x，y，z 是基于自身方向的。

1. // 根据自身方向，转化方向

2. _getDirection (x: number, y: number, z: number) {

3. const result = new Vec3(x, y, z);

4. math.Vec3.transformQuat(result, result, this.node.getRotation());

5. return result;

6. }

这样，假设我们看向的是 x，z 方向的中间，传入一个 Vec3(1, 0, 0) 方向，就可以返回一个 Vec3(0.7, 0, 0.7) 向量。为什么是 0.7 呢？因为是根号二的一半。这样，我们利用向量相加，就把位移量加上去了。

1. const position = this.node.getPosition();

2. math.Vec3.scaleAndAdd(position, position, this._getDirection(1,0,0), deltaTime * this.speed);

3. this.node.setPosition(position);

视角的旋转

我在摄像机放在小鸭子管理节点下，如图。这样摄像机就会一直跟着小鸭子，然后上下视角动摄像机，左右的旋转动小鸭子。

1. onMouseMove (event: EventMouse) {

2. const PI = 3.1415926535;

3. if(event.movementX != 0) {

4. const rotationY = this.node.getRotation();

5. math.Quat.rotateAround(rotationY, rotationY, this._getDirection(0, -1, 0), event.movementX / 5 / 360.0 * PI);

6. this.node.setRotation(rotationY);

7. }

8. if(event.movementY != 0) {

9. const rotationX = this.camera.getRotation();

10. math.Quat.rotateAround(rotationX, rotationX, this._getDirection(1, 0, 0), event.movementY / 5 / 360.0 * PI);

11. this.camera.setRotation(rotationX);

12. }

13. }

结语

看会了吗？让我们一起学习！

O(∩_∩)O~~

源码在我的微信公众号回复关键词【小鸭移动】即可获得

微信公众号