3-1-1では、PlatCanvasの基本の操作である3DモデルをPlayCanvasの空間上に配置します。
モデルを配置
PlayCanvasでは、BleanderやMayaなどの3Dモデリングのソフトを使用して作られたモデルを読み込むことができます。FBXやOBJ形式のデータについては、エディタにドラックアンドドロップをすることですぐに利用することができます。GLTF(GLB)については、ドラックアンドドロップ後スクリプトを追加することで表示することができます。アニメーションを含むファイルをアップロードをした場合には、アニメーションもアセッツ上に展開されます。
今回のハンズオンではあらかじめ用意されている、素材を使って進めていきます。今回追加するモデルはPlayCanvasのStore機能で無料で公開されているアセットを使用しています。
PlayCanvas StoreFind and download best assetsstore.playcanvas.com
アセッツ(ASSETS) → ハンズオン資料 → 3-1-1 モデルデータとファイルの階層をたどっていき、Punpkinを選択し、土台(中央)にモデルをドラックアンドドロップします。
モデルをドラックアンドドロップするとシーン上にモデルが追加されます。かぼちゃのモデルの向きがずれているため、次の操作で角度を設定します。
PunpkinのエンテティのRotationの値をそれぞれ以下に設定し、モデルを正面に向かせます。
|
Rotation |
value |
|
x |
0(変更なし) |
|
y |
-90 |
|
z |
0(変更なし) |
Bearモデルをブース(中央)の土台(左)に先程と同じくドラックアンドドロップします。 大きさと角度を変更したいので両方を変更します。
追加したクマのモデルのエンテティ２つの値をテーブルのように設定をします。
|
Rotation |
value |
|
x |
0(変更なし) |
|
y |
90 |
|
z |
0(変更なし) |
|
Scale |
value |
|
x |
0.3 |
|
y |
0.3 |
|
z |
0.3 |
これで丁度いい大きさになりました。
最後に同じくGiftのモデルを土台（右）にドラックアンドドロップします。 少し小さいので大きくします。
|
Scale |
value |
|
x |
1.3 |
|
y |
1.3 |
|
z |
0.3 |
これで3つの3Dモデルを追加する事ができました。ハンズオンではストアのモデルを使用しましたが、用意されたアセット以外にも好きな3Dモデルでも、ドラックアンドドロップで簡単に配置することができます。
Launch画面ではリアルタイムでシーンの状態が同期されます。一部スクリプトの追加などを行った際には、ウェブページ更新する必要がありますが、基本的にはLaunch画面は最新のシーンの情報が常に同期されています。
チュートリアル - 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】プロジェクトの公開 - 作ったプロジェクトを公開しよう！
コメント
0件のコメント
サインインしてコメントを残してください。