CocosCreator3D宇宙场景展示

---

摘要

跟 KUOKUO 一起初探 CocosCreator3D 吧！底部源码相送！

正文

版本说明

使用 CocosCreator3D 的 1.0.0 版本演示。

材质与模型

小飞船的模型是用 Maya 制作的，详细的过程在哔哩哔哩，关注 KUOKUO众享。地球和太阳的模型就是一个基本的球模型，其中太阳是没有材质的，而地球是无反射材质与地球图片贴图，如下：

发光的太阳

在 CocosCreator3D 中，有球光源。但是光源是不可见的。所以为了模拟发光的球体，我在太阳球模型内部加入一个光源。代码里进行明暗控制，也就是光源强度在不断的变化。

代码

tween 还不完善，所以采用了 dir 进行增减控制。

1. // 光源组件

2. public light: SphereLightComponent;

3. // 用来改变亮度值，dir为增减方向

4. public power = {

5. value: 200000000000000,

6. dir: 1

7. }

8. start () {

9. this.light = this.getComponent(SphereLightComponent);

10. }

11. update (dt) {

12. if (this.power.value < 200000000000000) {

13. this.power.dir = 1;

14. } else if (this.power.value > 2000000000000000) {

15. this.power.dir = -1;

16. }

17. this.power.value += this.power.dir * 20000000000000;

18. // 改变属性

19. this.light.luminance = this.power.value;

20. }

摄像机控制

摄像机的控制，决定了视觉效果的好坏。为了让摄像机在后退时，产生飞船向下的效果，我让其先偏移一个小角度。

然后，为了突出地球的渺小，在一段时间后，加速后退，并进行旋转。说到旋转，可能一些没接触过 3D 的小伙伴们有点蒙。我们在使用 getRotation 这个方法后，返回一个四元数，这与之前的 RotationXYZ 是不同的。但是两者可以转化。

1. // 先定义一个 vec3 用于接受返回的欧拉角，也就是之前说的 RotationXYZ

2. let r = cc.v3();

3. // 用四元数转欧拉角的方法，得到 RotationXYZ

4. this.node.getRotation().getEulerAngles(r);

5. // 在赋值时，有相关的 API

6. this.node.setRotationFromEuler(r.x, r.y, r.z);

完整控制代码（距离控制）

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

2. let r = cc.v3();

3. this.node.getRotation().getEulerAngles(r);

4. // 先缓慢拉动视角

5. if (pos.z < 23) {

6. pos.z += deltaTime * 0.15;

7. } else {

8. // 然后加速

9. pos.z += deltaTime * 20;

10. pos.y += deltaTime * 30;

11. r.x -= deltaTime * 5;

12. }

13. this.node.setRotationFromEuler(r.x, r.y, r.z);

14. this.node.setPosition(pos);

结语

让我们一起学习！

O(∩_∩)O~~

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

微信公众号