CocosCreator3D宇宙场景展示

摘要

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

正文

版本说明

使用 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~~

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

微信公众号