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

源碼在我的微信公衆號回覆關鍵詞【小飛船】即可獲得

微信公衆號