【3-1-2】スクリプトについて - 回転させるスクリプトを追加しよう

 

スクリプトについて

PlayCanvasではJavaScriptを使用してエンテティの操作を行うことができます。スクリプトから制御できることはエンテティの移動・回転・拡大縮小やマテリアルの切り替えなどを行うことができます。 PlayCanvasのスクリプトの参考になるものついては、APIリファレンスや、サンプル集があります。

エンテティ（モデル）を回転させる

SCRIPTコンポーネントを使い、モデルを回転させていきましょう。 このハンズオンでは、ソースコードについては記述をしなくても作れるように、アセットにサンプルコードが入っています。

1. ADD COMPONENTをクリック

2. SCRIPTコンポーネントを追加

3. Rotate.js スクリプトを追加

ADD SCRIPTをクリックするとプロジェクト内に入っているスクリプトの一覧が表示されます。 SCRIPTの検索欄から Rotateを選択します。

4. 追加されたスクリプトについて

5. 起動してみよう

▶のボタンで作成したプログラムの起動(Launch)ができます。この起動をした際に発行される(https://launch.playcanvas...)から始まるURLについては、ログインし、権限のあるユーザーしかアクセスできません。

プログラムの中身を見る

1. アセットからRotate.jsをダブルクリックする

2. Rotate.jsが表示される

/*jshint esversion: 6, asi: true, laxbreak: true*/
class Rotate extends pc.ScriptType{    
    update(){ // updateはフレーム毎に呼ばれる
        this.entity.rotate(this.speed) // rotate関数に{x:0, y:0.1, z:0}のVec3の値を渡している 
    }
}
pc.registerScript(Rotate) // PlayCanvas Editorにスクリプトを追加
Rotate.attributes.add("speed", {type:"vec3", default:[0, 0.1, 0]}) // エディタ上でspeedを変更出来るようにする

追加したスクリプトはこちらになります。

• update()
• this.entity.rotate

a. update() エンテティが表示されていて、スクリプトがアタッチされている場合にはupdate関数は毎フレーム呼ばれます。

PlayCanvasのライフサイクル

Untitled

PlayCanvasでは指定した関数が一定ライフサイクルで呼び出される関数があり、rotate.jsではとupdate毎rotate関数実行されています。 swapはコードエディタプログラムの更新を取ることができるので、開発中にSwapに対して変更をされたらページを更新するなどのコードを入れておくと、画面の更新することなどということもできます。

b. this.entity.rotate() entityの角度を変えるための関数になります。移動する場合や、拡大縮小する際はtranslate, scaleなどを使うことができます。

rotate関数

今回使用した関数としては、this.entity.rotateという関数を使用しました。このthis.entityというのはスクリプトを追加したエンティティ自身のこととなります。 その中のrotate関数を使用することでエンティティを移動させることができます。

//rotate関数のサンプル
//使い方
//this.entity.rotate(xの回転, zの回転, yの回転);
// 例　z方向に90度回転する
this.entity.rotate(0, 0, 90);

参考リンク

1. PlayCanvas pc.Entity#rotate

pc.Entity | PlayCanvas API Referencedeveloper.playcanvas.com

最後に、Rotate.jsを2つのモデルにも追加をしましょう。

 

 

チュートリアル - PlayCanvasを使ってブラウザ上で動くオンラインの展示会場を作ろう！

• 【1-1】 準備 - アカウントの準備
• 【2-1】プロジェクト紹介 - 展示会場をつくろう！
• 【2-2】プロジェクト紹介 - PlayCanvas Editorについて
• 【2-3】プロジェクト紹介 - スターターキットの中身について
• 【3-1-1】スクリプトについて - モデルを配置しよう
• 【3-1-2】スクリプトについて - 回転させるスクリプトを追加しよう
• 【3-2-1】3D空間のUIについて - ホットスポットを追加しよう
• 【3-2-2】3D空間のUIについて - モーダルを作ろう！
• 【3-3-1】リンクの設置 - モーダルのボタンにリンクを追加しよう
• 【3-3-2】リンクの設置 -　オンラインミーティングに参加ボタンを追加しよう！
• 【3-2-3】3D空間のUIについて - ホットスポットをクリックしたらモダルを表示させよう！
• 【3-4】プロジェクトの公開 - 作ったプロジェクトを公開しよう！