このセクションの記事

インタラクティブな3D Backgroundコンテンツを簡単に作ってみよう

Avatar
城戸 雄大
  • 更新
フォローする

目次

 

概要

このチュートリアルでは、PlayCanvasを使ってインタラクティブな背景を作っていきます。
以下のようなコンテンツができます

https://playcanv.as/p/CZSzLXdJ/

Webサイトの背景をWebGLを使ったインタラクティブなコンテンツにしたい！

そんな方に向けたコンテンツ作成のチュートリアルになります！

 

今回は、上記のコンテンツを作成していきます。
マウスオーバーすると Box の3Dモデルが跳ねるようなインタラクティブを実行します。

 

まずはプロジェクトを作成していきましょう

 

Chapter01 - 新規プロジェクトを作成

PlayCanvasの自身のアカウントページから新規プロジェクトを作成します。

テンプレートは Blank Project で作成します。

img01.png

作成後、Projectページに遷移します。
(この時、Projectページへ遷移しない場合はリロードしてください)

 

Projectの EDITOR をクリックしてエディット画面へ進みます。

img02.png

Blank Projectなので最低限の構成になっています。
ヒエラルキーには、Camera、light、PrimitiveなBoxとPlaneがあります。

 

今回はPlaneは使わないので、Planeは削除します。

 

Chapter02 - カメラ設定をする

カメラのPositionとRotation、Scaleを以下のように設定します。

Position: [ x: 5 , y: 5 , z: 5 ]

Rotation: [ x: -35 , y: 45 , z: 0 ]

Scale: [ x: 1 , y: 1 , z: 1 ]

 

また、本チュートリアルの見本ではカメラが平行投影になっています。

PlayCanvasのカメラではインスペクターからProjectionでこの設定を変更することができます。
Perspective が透視投影、 Orthographic が平行投影のことです。

デフォルトでは Perspective ですが、今回は Orthographic にします。

img03.png

斜め上からの視点になればOKです。

カメラの設定ができたら、Boxをたくさん並べる処理を作っていきます。

 

Chapter03 - Boxをたくさん並べる

Boxを画面いっぱいに並べるためにヒエラルキーのBoxを親とするエンティティを作成します。

img04.png

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

 

このBGsエンティティにスクリプトを登録します。
ADD COMPONENT から SCRIPT を追加します。img05.png

entityArray.js を作成し、Scriptコンポーネントに登録します。

img06.png

 

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

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

EntityArray.prototype.initialize = function() {
    // 現在のエンティティの最初の子エンティティを取得します
    this.childEntity = this.entity.children[0];
    
    // x軸とz軸上で-10から9までの範囲で子エンティティのクローンを作成し配置します
    for(var count = -10; count < 10; count++){
        for(var z = -10; z < 10; z++){
            // 子エンティティのクローンを作成します
            var cloneChild = this.childEntity.clone();
            // クローンしたエンティティの位置を設定します
            cloneChild.setPosition(count, (count*-1)-z, z);
            // クローンしたエンティティを有効化します
            cloneChild.enabled = true;
            // 現在のエンティティにクローンしたエンティティを子として追加します
            this.entity.addChild(cloneChild);
        }
    }
};

 

これでLaunchすると画面いっぱいに配列されたBoxが確認できます。

img07.png

 

子のBoxが表示されて見栄えが悪くなっているので、これは Enabled を false にしておきます

img08.pngimg09.png

 

ここからはお好みでライティングやSkyBoxの設定から色合いなどを調整してみましょう。

まずはライトの角度を調整します。

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

img10.png

色がない状態にするには、Skyboxの設定を削除します

img11.png

Skyboxはエディター画面の左下にある歯車からSETTINGSを開き、RENDERINGから設定を変更できます。

 

上記のように変更すると、以下のようなLaunch画面になります。

img12.png

色を付与したい場合は、以下をそれぞれ試して好みの色合いに調整ください。

お好みの色合いに変更できたら、次はマウスオーバーしたらBoxのエンティティ情報を取れる処理を作ります。

 

Chapter04 - マウスオーバーのイベント処理を作成

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

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

HoverMove.prototype.initialize = function() {
    // レイキャストを行うための始点と終点を表すベクトルを初期化します
    this.rayStart = new pc.Vec3();
    this.rayEnd = new pc.Vec3();

    // タッチデバイスでない場合に、マウスムーブイベントを呼びます
    if(!this.app.touch) {
        this.app.mouse.on(pc.EVENT_MOUSEMOVE, this.onMouseMove, this);
    }
};

// マウスムーブイベントが発生したときに呼ばれるメソッド
HoverMove.prototype.onMouseMove = function(ev) {
    // このエンティティにアタッチされているカメラのFarクリップとNearクリップの値を取得します
    var farClip = this.entity.camera.farClip;
    var nearClip = this.entity.camera.nearClip;
    
    // カメラのスクリーン座標からワールド座標へと変換して、レイキャストの始点と終点を設定します
    this.entity.camera.screenToWorld(ev.x, ev.y, nearClip, this.rayStart);
    this.entity.camera.screenToWorld(ev.x, ev.y, farClip, this.rayEnd);

    // 設定された始点と終点を使用してレイキャストを行い、その結果を取得します
    this.result = this.app.systems.rigidbody.raycastFirst(this.rayStart, this.rayEnd);
    
    // もし何かに当たった場合、結果の中に存在するエンティティをログに出力します
    if (this.result) {
        var hitEntity = this.result.entity;
        console.log(hitEntity);
    }
};

 

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

img13.png

Boxエンティティを選択し、Collisionコンポーネントを追加します。

img14.png

Collisionを追加すると、物理エンジンである Ammo.js をインポートする必要がありますので、インポートします。

img15.png

 

Collisionを追加できたら、Launchして確認してみましょう。
ConsoleにマウスオーバーしたEntityの情報が確認できたらOKです。

img16.png

 

マウスオーバーの処理ができたので、次はマウスオーバーしたらBoxがジャンプするスクリプトを作ります。

 

 

Chapter05 - Boxがジャンプする処理を作成

RootエンティティにADD COMPONENTでScriptを追加し、 jumpfire.js を作成し登録します。

img17.png

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

var Jumpfire = pc.createScript('jumpfire');

Jumpfire.prototype.initialize = function() {
    // `self` 変数を使用して、現在のインスタンスに後でアクセスできるようにします
    var self = this;
    
    // アプリケーションにグローバルイベントリスナーを登録します
    self.app.on("jump", function(targetEntity){
        // すでに'move'タグが付いている対象エンティティの場合は、処理を返します
        if(targetEntity.tags._list.includes("move")) return;
        
        // 対象エンティティに'move'タグを追加します
        targetEntity.tags.add("move");
        
        // 対象エンティティのローカル位置を取得します
        self.tPosition = targetEntity.getLocalPosition();

        // 対象エンティティの現在の位置を保存します
        var targetPos = {
            x: self.tPosition.x,
            y: self.tPosition.y,
            z: self.tPosition.z
        };
        // ジャンプ後の目標位置を計算します
        var changePos = {
            x: self.tPosition.x,
            y: self.tPosition.y+1, // Y座標に1を加えてジャンプさせる
            z: self.tPosition.z
        };
        
        // tweenアニメーションを使って、対象エンティティをジャンプさせます
        targetEntity.tween(targetEntity.getLocalPosition()).to(changePos, 0.2, pc.SineOut).onComplete(() => {
            // ジャンプの頂点に達した後、戻るアニメーションを行います
            targetEntity.tween(targetEntity.getLocalPosition()).to(targetPos, 0.1, pc.SineOut).onComplete(() => {
                // 全てのアニメーションが完了したら、'move'タグを削除します
                targetEntity.tags.remove("move");
            }).start();
        }).start();
    });
};

ジャンプさせるためにTweenを使用しているため、Tweenライブラリが必要になります。

AssetStoreからTweenライブラリをインポートします。

img18.png

img19.png

img20.png

Tweenライブラリをインポート後、tweenアセットの Preload を True に変更してください。

 

hoverMove.js のconsole.logが記載していた場所を、jumpfire.jsで作成したイベントに書き換えます。

hoverMove.js の onMouseMove を以下に書き換えます。

// マウスムーブイベントが発生したときに呼ばれるメソッド
HoverMove.prototype.onMouseMove = function(ev) {
    // このエンティティにアタッチされているカメラのFarクリップとNearクリップの値を取得します
    var farClip = this.entity.camera.farClip;
    var nearClip = this.entity.camera.nearClip;
    
    // カメラのスクリーン座標からワールド座標へと変換して、レイキャストの始点と終点を設定します
    this.entity.camera.screenToWorld(ev.x, ev.y, nearClip, this.rayStart);
    this.entity.camera.screenToWorld(ev.x, ev.y, farClip, this.rayEnd);

    // 設定された始点と終点を使用してレイキャストを行い、その結果を取得します
    this.result = this.app.systems.rigidbody.raycastFirst(this.rayStart, this.rayEnd);
    
    // もし何かに当たった場合、結果の中に存在するエンティティをログに出力します
    if (this.result) {
        var hitEntity = this.result.entity;

        // jumpfireで作成したイベントに書き換え
        this.app.fire("jump", hitEntity);
    }
};

 

Launchを確認してみましょう。

img21.gif

マウスオーバーでBoxがジャンプしているのが確認できたら完成です！
おつかれさまでした。

 

3DコンテンツをWebページの背景に使うには

作った3Dコンテンツを自身が作成しているWebサーバーのWebページでも使いたい！
という場合があると思います。

 

Publishで発行されたURLを使ってiframeで表示することもできますが、
せっかくならCanvasで使用したいなどあると思います。

 

その場合は、Publishではなく、DOWNLOAD ZIPでコンテンツのデータ一式をダウンロードできます。

EA19EDBB3ADEE4B7C03A82F38EC18923.png

DOWNLOAD ZIPしたコンテンツを自前のウェブサーバーに使用する手順については、こちらの記事をご参照ください。

→ PlayCanvasとWebページとの通信処理のデモプレイ

 

うまく使いこなして、Webページをよりリッチにしましょう！

 

 

 

 

 

関連記事

コメント

0件のコメント

サインインしてコメントを残してください。