このセクションの記事

チュートリアル - Vue.jsでPlayCanvas製3Dモデルビュワーサイトを作る 2/6

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

Projectを新しく作ります

今までのハンズオンでは事前に用意したプロジェクトをForkして始めていましたが、今回は新規Project作成します。
0C15B660A01C8AECEF2D146FC15E269E.png

新規プロジェクトから以下の「Model Viewer Starter Kit」を選択します。
任意のプロジェクト名と詳細を記載してCREATEをクリックします。
BFEC57B47136E51E7DB587E96FF98A91.png

EDITORをクリックして、プロジェクトを編集します。
CBBC30C89A2696019EAF5E513A21245D.png

 

エディット画面のGUIの説明

まずSCENESの画面からeditするsceneを選びます。
Mainを選択。
65B658F0CB314A004B11C5AE311521A3.png

Untitledをクリックすると以下の画面になります。
A360B125905F2370477BA0E291702C70.png

以下の画像を基に、GUIを簡単に説明していきます。
8AA097A5D93899E0CBE758F45CAFABAB.png

  1. メニュー(MENU)
    Photoshopなどでいうツールバーとメニューバーが合わさっている感じ。
    プロジェクトの設定やシーンの設定などもここで操作できます。

  2. ヒエラルキー(HIERARCHY)
    シーン内に存在するオブジェクトの一覧が表示されます。
    このシーンではどんなentityが使われているのかなどここで管理。
    まとめてグループ化や名前の変更などもできる。

  3. シーン(SCENE)
    3D空間が表示され、自由な位置・角度から眺めることができます。
    3DコンテンツやカメラのPositionやRotateなどを弄ることができます。

  4. アセット(ASSETS)
    プロジェクトhtmlやcss、imgといったファイルや3Dモデルのデータなどもここで表示され、ここに入れて使われるデータたちは合わせてアセットと呼ばれています。
    ディレクトリで分けたり名前を変更することもできます。各ファイルはアップロード時にIDが付与され管理されるため、同じ名前のファイル名をアップロードしても上書きアップロードにはならないことがあるので注意。

  5. インスペクター(INSPECTOR)
    ヒエラルキーやシーンで選択中のオブジェクトの設定を編集できます。
    3Dモデルのメッシュや衝突判定、物理制御に関するパラメータもここで定義することが可能。

コードエディター

基本的なGUIはこの5つで、他にコードエディターがあります。
コードエディターはメニューの下の方にあります。
D661465BE63B80816F3296B217A438C0.png

7D92D4DF895236818E45F1575C245ED8.png

コードエディターは普段使用されているであろうエディターと基本同じです。
JavaScriptのsnippetやコードのhighlightなども基本付いています。

基本ここでコードを書いて反映していきます。

Lauch実行

右上の再生ボタン的な矢印のボタンをクリックすると、Launch実行されます。
EFD619BA8AA8D149B421A6362044E895.png

Sceneの現状をLaunch実行してくれるため、開発しながら確認ができます。
Launch画面を開いたままにしておくと、Editor画面とライブリンクが持続した状態になり、Editor画面でScaleの数値などを変更するとリアルタイムでLaunch画面でもプレビューされます。

533E2936B0762A5D4A0D63B8A41B700E.png

 

 

 

新規プロジェクトの中身

新規から作ったプロジェクトなのにすでにモデルビュワーとして完成されています。
Assetsを確認するとModelデータやScriptsなどが入っています。

cube

CubeにはFBXという3Dモデルデータやマテリアル、テクスチャがあります。

cubemap

名前の通りCubeMapが入っており、メニュー下部のSETTINGS → RENDERINGとクリックしインスペクターを見るとSKyboxを指定する項目があります。
ここでCubeMapを設定することができます。
MipMapのLevelを設定できたり、Transparent Canvasを設定すれば背景透過Canvasも作ることができます。
8900D09B7FFEAC9BF01186932592504C.png

scripts

マウスの操作などはAssetsのscripts内にある以下のjsが対応しています。

  • orbit-camera.js
  • mouse-input.js
  • touch-input.js
  • keyboard-input.js

orbit-camera.js

オービットカメラを基盤ともなるscriptsです。
orbitとは軌道という意味で、ここでは特定のEntityを回転軸としてカメラが軌道を移動します。
中のコードを見るとわかりますが、distanceの最大最小値やpitchAngleの最大最小値を設定したり、inertiaFactorという慣性係数を指定したりと色々あります。
細かい調整などをしたい時にはこの中を読んで調整するのが良いでしょう

mouse-input.js, touch-input.js, keyboard-input.js

動かすためのmouseやtouchのinput情報をorbit-camera.jsに受け渡すscriptsです。
こちらも中身を見るとSensitivityなどを設定することができます。
mouseやtouchのイベントの取り扱いもこれを見ればわかってくると思いますので、この辺りのイベントを使いたい時には参考にするといいかもしれません。

これらのScriptsをCamera Entityに追加することで3Dモデルビュワーを実装しています。

新規プロジェクトからこれだけのものが用意されているので、コードを書く必要がほぼないです。
このまま使用しても良いですが、今回はこれを使ったWebページを作っていきます。

今回は下記のことを主にやっていきます。

  • DOMを乗せる
  • Vue.jsで3Dモデルを切り替える
  • 切り替え時の動きを作る
  • 3Dモデルごとに詳細ページを作る
  • 詳細ページへの切り替えなどの処理を作る

上から順に進めていきます。

 

 

 チュートリアル - Vue.jsでPlayCanvas製3Dモデルビュワーサイトを作る

チュートリアル - Vue.jsでPlayCanvas製3Dモデルビュワーサイトを作る 2/6
 

関連記事

コメント

0件のコメント

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