k5ry-labo

3Dモデルを移動させてみる【Decentraland】

3Dモデルを移動させてみる【Decentraland】

Decentralandでライオン君と触れ合えるエリアを作ってます。

こちらのプログラムで3Dオブジェクトを移動させるコードを書いたので、共有していきたいと思います！

ちなみに今回の記事で作成したコードはGitHub上で公開してあります。

https://github.com/kojimaro/dcl_move_sample

Decentralandの開発が初めての方は、環境の構築をこちらのドキュメントを参考に事前に作ってみてください！

https://docs.decentraland.org/getting-started/installation-guide/

必要なもの

  • node.js
  • npm
  • git
  • Visual studio code
目次

プロジェクト作成

まずはプロジェクトを作成しましょう。

ここでは「dcl_move_sample」というを名前をつけてディレクトリを作成します。

ディレクトリを作成したら、ターミナルを開き「dcl_move_sample」ディレクトリへ移動しましょう。

$ cd dcl_move_sample

続いて以下のコマンドを実行して、Decentralandのプロジェクトを作成します。

$ dcl init

実行すると、フォルダの中にいろんなファイルが追加されているのがわかります。

試しにエディタ（ここではVSCode）で、「dcl_move_sample」ディレクトリを開くと以下のようになっています。

続いて以下のコマンドを実行して、プロジェクトを動かしてみましょう。

$ dcl start

「Preview server is now runnig」と表示されたら、「http://127.0.0.1:8000?SCENE_DEBUG_PANEL」とブラウザのURLに入力すると動作を確認することができます。

開発中は邪魔になるので、動作の確認ができたらページを閉じます。

続いて、ターミナルでCTRLキーとCキーを同時に押してプログラムを終了させましょう。

ここまでプロジェクトの作成から動作確認が完了しました。

キューブを移動させる

ライブラリのインストール

続いて、実際にコードを書いて動かしてみましょう。

ここではキューブを移動させるプログラムを書いていきます。

まずは移動のコードを簡単にかけるライブラリをインストールします。

https://github.com/decentraland/decentraland-ecs-utils

ターミナルでプロジェクトディレクトリに移動し、以下のコマンドを実行しましょう。

$ npm install decentraland-ecs-utils

次に「src」ディレクトリ内にある「game.ts」を開きます。

開いたらライブラリを利用するために必要な、以下のコードを１行目に入力します。

import utils from "../node_modules/decentraland-ecs-utils/index"

ここまででライブラリを利用する準備が整いました。

移動のロジック

引き続き「game.ts」ファイルにプログラムを書いていきます。

まずコードを確認すると、すでにキューブを生成するプログラムが書かれてあります。

function spawnCube(x: number, y: number, z: number) {
  // create the entity
  const cube = new Entity()

  // add a transform to the entity
  cube.addComponent(new Transform({ position: new Vector3(x, y, z) }))

  // add a shape to the entity
  cube.addComponent(new BoxShape())

  // add the entity to the engine
  engine.addEntity(cube)

  return cube
}

上記の関数がキューブを描画し画面に追加する関数になっています。

上記の関数を以下のコードで呼び出すことで、画面にキューブが表示されるようになっています。

const cube = spawnCube(8, 1, 8)

さらに下に見ていくと、キューブをクリックすると新たなキューブ生成するコードが書かれています。

cube.addComponent(
  new OnClick(() => {
    cube.getComponent(Transform).scale.z *= 1.1
    cube.getComponent(Transform).scale.x *= 0.9

    spawnCube(Math.random() * 8 + 1, Math.random() * 8, Math.random() * 8 + 1)
  })
)

こちらのコードを変更して、移動させる処理を作っていきましょう。

まずは上記のコードの中にある以下のプログラムを削除します。

cube.getComponent(Transform).scale.z *= 1.1
cube.getComponent(Transform).scale.x *= 0.9

spawnCube(Math.random() * 8 + 1, Math.random() * 8, Math.random() * 8 + 1)

こんな感じになればOKです。

cube.addComponent(
  new OnClick(() => {
    
  })
)

まずはキューブの現在の位置を以下のコードで取得して、変数「startPos」に格納します。

cube.addComponent(
  new OnClick(() => {
    let startPos = cube.getComponent(Transform).position
  })
)

続いて移動させたい位置を変数「endPos」に格納します。

cube.addComponent(
  new OnClick(() => {
    let startPos = cube.getComponent(Transform).position
    let endPos = new Vector3(15, 1, 15)
  })
)

最後に以下のコードを入れれば、移動のプログラムは完成です。

cube.addComponent(new utils.MoveTransformComponent(startPos, endPos, 6))

「startPos」移動開始する座標、「endPos」は移動させたい場所の座標、最後に「6」というのは移動スピードです。

ここでは６秒で移動するように宣言しています。

最終的にこんな感じになればOKです！

cube.addComponent(
  new OnClick(() => {
    let startPos = cube.getComponent(Transform).position
    let endPos = new Vector3(15, 1, 15)
    cube.addComponent(new utils.MoveTransformComponent(startPos, endPos, 6))
  })
)

それでは、プログラムを保存したら変更を確認していきましょう。

ビルドする

ビルドの動きがわかりやすいように、ここではあえてまず、「bin」ディレクトリ内にある「game.js」を削除してみましょう。

binディレクトリに中は空になりました。

続いてターミナルから以下のコマンドを実行して「game.ts」ビルドします。

$ npm run build

binディレクトリを確認すると「game.js」が作成されているのがわかります。

これは実際のプログラムは「TypeScript」という言語で書いているため、ブラウザで実行するためには「JavaScript」という言語に変化する必要があるのです。

今回のように普段は「game.js」を毎回削除する必要はありません。（上書きしてくれるため）
今回はビルドの動きがわかりやすくなるように、あえて削除しました。

ただし「game.ts」に何らかの変更を加えたら、それを反映させるたびにビルドをする必要がある点はおさえておきましょう。

それでは改めて「dcl start」または「npm run start」コマンドを実行し、プログラムを実行しましょう。

ブラウザを開き、キューブをクリックすると動きます！

Decentraland開発カテゴリの最新記事