周末闲余时间用十多分钟撸了一个展示Demo。CocosCraetor给我的感觉就是开发迅速，爽！
不多说了，看文章，哔哩哔哩有完整演示。
正文
版本说明
使用 CocosCreator3D 的 1.0.0 版本演示。
材质与模型
小飞船的模型是用 Maya 制作的，详细的过程在哔哩哔哩，关注 KUOKUO 众享。地球和太阳的模型就是一个基本的球模型，其中太阳是没有材质的，而地球是无反射材质与地球图片贴图，如下图。
发光的太阳
在 CocosCreator3D 中，有球光源。但是光源是不可见的。所以为了模拟发光的球体，我在太阳球模型内部加入一个光源。代码里进行明暗控制，也就是光源强度在不断的变化。
代码
tween 还不完善，所以采用了 dir 进行增减控制。
// 光源组件
public light: SphereLightComponent;
// 用来改变亮度值，dir为增减方向
public power = {
value: 200000000000000,
dir: 1
}
start () {
this.light = this.getComponent(SphereLightComponent);
}
update (dt) {
if (this.power.value < 200000000000000) {
this.power.dir = 1;
} else if (this.power.value > 2000000000000000) {
this.power.dir = -1;
}
this.power.value += this.power.dir * 20000000000000;
// 改变属性
this.light.luminance = this.power.value;
}
摄像机控制
摄像机的控制，决定了视觉效果的好坏。为了让摄像机在后退时，产生飞船向下的效果，我让其先偏移一个小角度。
然后，为了突出地球的渺小，在一段时间后，加速后退，并进行旋转。说到旋转，可能一些没接触过 3D 的小伙伴们有点蒙。我们在使用 getRotation 这个方法后，返回一个四元数，这于之前的 RotationXYZ 是不同的。但是两者可以转化。
// 先定义一个 vec3 用于接受返回的欧拉角，也就是之前说的 RotationXYZ
let r = cc.v3();
// 用四元数转欧拉角的方法，得到 RotationXYZ
this.node.getRotation().getEulerAngles(r);
// 在赋值时，有相关的 API
this.node.setRotationFromEuler(r.x, r.y, r.z);
完整控制代码（距离控制）
let pos = this.node.getPosition();
let r = cc.v3();
this.node.getRotation().getEulerAngles(r);
// 先缓慢拉动视角
if (pos.z < 23) {
pos.z += deltaTime * 0.15;
} else {
// 然后加速
pos.z += deltaTime * 20;
pos.y += deltaTime * 30;
r.x -= deltaTime * 5;
}
this.node.setRotationFromEuler(r.x, r.y, r.z);
this.node.setPosition(pos);
结语
让我们一起学习！
O(∩_∩)O~~
源码在我的微信公众号回复关键词【小飞船】即可获得
微信公众号
