チュートリアル - 3DなBackgroundコンテンツを作ってみる 3/5 – PlayCanvas

Boxをたくさん並べる

Boxをたくさん並べるためにHierarchyのBoxの親にEntityを作ります。

親のEntityは任意の名前に変更して構いません。
ここではBGsとしておきます。

このBGsにスクリプトを登録します。
ADD COMPONENTからSCRIPTを追加し、「entityArray.js」を作成し登録します。

entityArray.jsのコードを以下に書き換えます。

var EntityArray = pc.createScript('entityArray');

EntityArray.prototype.initialize = function() {
    this.childEntity = this.entity.children[0]; // 子のBoxを参照
    
    // ↓ Boxをいい感じに配列してくれるfor文
    for(var count = -10; count < 10; count++){
        for(var z = -10; z < 10; z++){
            var cloneChild = this.childEntity.clone(); // 子のBoxのClone作成
            cloneChild.setPosition(count, (count*-1)-z, z);
            cloneChild.enabled = true; // CloneのEnabledをtrueにして表示
            this.entity.addChild(cloneChild); // Cloneを追加
        }
    }
};

これでLanchすると綺麗に配列されたBoxが確認できます。

子のBoxが表示されて邪魔をしているのでこれはEnabledをfalseにしておきます

影がまだいい感じになっていないのでLightを少し以下のように調整します。

Light
Rotation x: 15, y: 90, z: 0

いい感じの塩梅になりました。

次はマウスオーバーしたらBoxのEntity情報を取れる処理を作ります。

マウスオーバーのイベント処理を作る

Assetsから新しいスクリプト「hoverMove.js」を作成し、コードをいかに書き換えます。

var HoverMove = pc.createScript('hoverMove');

HoverMove.prototype.initialize = function() {
    this.rayStart = new pc.Vec3(); // カメラからのRay
    this.rayEnd = new pc.Vec3(); // カメラから見てぶつかったRay

    if(!this.app.touch) { // タッチ操作でない場合
        this.app.mouse.on(pc.EVENT_MOUSEMOVE, this.onMouseMove, this); // マウスムーブイベント
    }
};


HoverMove.prototype.onMouseMove = function(ev) {
    var farClip = this.entity.camera.farClip; // カメラのfarClipの設定(Editorから設定可能)
    var nearClip = this.entity.camera.nearClip; // カメラのnearClipの設定(Editorから設定可能)
    this.entity.camera.screenToWorld(ev.x, ev.y, nearClip, this.rayStart); // 平面座標から3D空間へ座標を変換しRaycastの始まりの座標を作成
    this.entity.camera.screenToWorld(ev.x, ev.y, farClip, this.rayEnd); // 平面座標から3D空間へ座標を変換しRaycastの終わりの座標を作成

    // ↓ ここでレイキャストの処理を書いているよ
    this.result = this.app.systems.rigidbody.raycastFirst(this.rayStart, this.rayEnd); // 作成した座標を元に当たり判定を持つEntityとぶつかったか結果を出す
    if (this.result) { // raycastの結果が出ているか
        var hitEntity = this.result.entity; // Raycastで取得したEntity
        
        console.log(hitEntity);
    }
};

作成した hoverMove.js はCameraにADD COMPONENTでScriptを登録します。