チュートリアル - 360°回転する3D空間を使ったWebサイト 2/7

ProjectをForkする

本チュートリアル用に準備したProjectがあるので、こちらをForkしてチュートリアルを始めます。

以下のURLからProjectをForkします。
https://playcanvas.com/project/741106/

 

 

Fork後、Projectページに飛ばされます。
(この時、Projectページへ飛ばなかった場合はリロードしてください)

 

ProjectのEditorをクリックしてエディット画面へ進みます。
このProjectにはあらかじめアセットの中にファイルがいくつか入っています。
これらのファイルを使用しつつ、エディットしていきます。

 

 

3Dモデルを配置

アセットにある Templateの town を編集画面にドラッグ&ドロップしてシーンに追加する。

 

 

今回は用意している town を使用していますが、
使用したい3Dモデルデータがあれば、それを使用していただいても構いません。

fbxなどの3DモデルデータがあればPlayCanvasにimportすることでglbに自動変換してくれます。

 

 

他3Dモデルも配置する

他にもAdd EntityからPrimitiveでBoxなどを追加したり、

Assetsの右上のAssets Storeから任意の3Dモデルをインポートして配置することもできます。

 

3Dモデルのサイズを調整

他モデルを追加するとサイズ感がおかしいですね。

他のモデルのサイズを調整しましょう。

townのサイズを調整
Scale x: 0.15 , y: 0.15 , z: 0.15

 

Planeのサイズを調整
Scale x: 50 , y: 1 , z: 50

 

追加したモデルも配置を変更します

 

3Dモデルの色を変更する

Assets Storeなど既存の3Dモデルをインポートしている場合はこの処理はスルーしてください。

Primitiveなモデルを追加した場合は真っ白で色がついていないので、マテリアルを付与して色をつけます。

 

Assetsからプラスマークのボタンまたは右クリックからマテリアルを追加します。

 

マテリアルを作成したら、名前を任意のものに変えてDiffuseから色を付与します。

 

マテリアルではDiffuse以外にもSpecularやEnvironmentなど設定ができます。
どれも任意でお好みに変更してみてください。

マテリアルを作成できたらEntityからPrimitiveなモデルを選択して、先ほど作成したマテリアルを当てます。

 

Planeも白のままですので任意のマテリアルに変更してあげましょう。
チュートリアルではtownに付与しているマテリアルをPlaneに当てます。

 

見た目はシックな感じになってきましたね。

素材は揃ってきたので、
次はカメラを移動させるスクリプトなどを作っていきます。