Playcanvasの使い方＃7 JavaScriptでエンティティを回転させる

今回はPLAYCANVASでスクリプトを使ってBOXを回転させる方法について解説します。
今回はx軸、y軸、z軸それぞれに対して回転を設定できるようにしていきます。
Inspectorから簡単に回転軸を設定できるよう、attributeを利用する方法も解説します。

事前準備

まずはPLAYCANVASのエディター上で、新しいプロジェクトを作成してください。
新しいプロジェクトの作成方法はこちらから。

作成したプロジェクトにHierarchyからBOXを追加します。

スクリプトの作成

次に、新しくスクリプトを作成します。
スクリプトの追加方法は下記の手順になります。

  1. ビューポートの下のアセットエリアにマウスカーソルを合わせる。
  2. マウスの右クリックを押す→NewAssetにカーソルをあわせる→左側に選択タブがでるので、「Script」を選んでクリック
  3. スクリプトの名前を入力する窓がでてくるので、名前を RotateBox にする

これで 新しいスクリプトが作成されました。

スクリプトへのコード追加

  1. Assetフォルダ内に作られたRotateBox.jsをダブルクリック
  2. スクリプト編集画面が自動で開きます
  3. 最初に書いてあるコードを全部選択して消す
  4. 下記のコードをコピーして、消した所にペーストする
  5. 保存（macなら「command+S」、windowsなら「Ctrl + S」）をして編集画面に戻ります。
var RotateBox = pc.createScript('rotateBox');

// attributeを追加
RotateBox.attributes.add("rotateX", {type: "number", default: 0});
RotateBox.attributes.add("rotateY", {type: "number", default: 0});
RotateBox.attributes.add("rotateZ", {type: "number", default: 0});

// 毎フレーム呼ばれる関数
RotateBox.prototype.update = function(dt) {
    this.entity.rotateLocal(this.rotateX * dt, this.rotateY * dt, this.rotateZ * dt);
};

このコードは、エンティティを回転させるためのスクリプトです。
コードの中で、まずRotateBoxという名前のスクリプトを作成し、その中に、エンティティの回転角度を指定するための属性（attribute）を3つ追加しています。それぞれの属性は、X軸、Y軸、Z軸の回転速度を示しています。
そして、updateという関数があります。
これは、毎フレーム呼び出される関数で、エンティティを指定された回転速度にもとづいて回転させます。rotateLocal関数は、エンティティをローカル座標系で回転させる関数です。

エンティティにスクリプトをアタッチ

　下記の方法でエンティティにスクリプトをアタッチします。

  1. ビューポートのボックスを選択
  2. 右側のインスペクターにある+ ADD COMPONENTをクリック
  3. + ADD COMPONENTの下に選択タブが出てくるので”Script”をクリック
  4. 編集画面を下へスクロールするとRENDERの下に”SCRIPT”の項目が追加されています。
  5. SCRIPTの文字の下の空欄をクリック
  6. rotateBoxが表示されているので、それをクリック
  7. rotateBoxがアタッチされます。
    この時rotateBoxの下にrotateX、rotateY、rotateZの 表示がなければ、鉛筆マークとonの間にある「矢印マーク(パース）」を押してください。
  8. rotateX、rotateY、rotateZがされていれば、とりあえずrotateYの数値を20にしてください。

これでエンティティを回転させる準備ができました、

Launchでの確認

ビューポートの右上にあるLaunchボタンをクリックしてください。
Launch画面が開き、ボックスが回転していると思います。

以上PLAYCANVASでエンティティを回転させる方法の解説でした。

まとめ

以上で、PlayCanvasでエンティティの回転を制御する基本をマスターしました。このスキルは、動的なシーン作成やインタラクティブなエレメントの実装に役立ちます。

メタバースやバーチャル空間の制作に専門的なサポートが必要な場合、豊富な事例をもとにした弊社のサービスをご検討ください。プロジェクトの構想から実現まで、総合的にサポートいたします。お気軽に[お問い合わせ]ください。共に新しい価値を創造しましょう。

タイトルとURLをコピーしました