Quantcast
Channel: CSSタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8652

チュートリアル - 3D空間を使った簡単webサイト 1/5

$
0
0

※このチュートリアルはPlayCanvas運営事務局で使用しているハンズオンの資料です。

PlayCanvasでWebサイトを作る

ゲームエンジンでwebサイトを作る?

PlayCanvasはWebGL/HTML5ゲームエンジンであり、ゲームだけでなくwebへの展開もできます。
そこでPlayCanvasを使ってどんなwebサイトが作れるのか、実際に作っていきたいと思います。

このチュートリアルでは、PlayCanvasを使って3D空間のコンテンツを作成し、その上にhtmlの要素を配置して、LPページ(ランディングページ)やキャンペーンサイトのようなwebサイトを作成していきたいと思います。

できるページは以下のようなページができます。
https://playcanv.as/p/uQN2hNcm/

3Dオブジェクトをクリックするとそれに応じたhtmlが表示されるサイト。
ドラッグするとカメラの位置も変わり、3Dオブジェクトを好きな位置に配置して探す、といったこともできます。

今回は上記のものを作成するべく、チュートリアルを始めましょう。


Projectをforkする

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

以下のProjectからforkします。
https://playcanvas.com/project/623766/

スクリーンショット 2019-06-17 17.50.27.png

forkしたProjectのページに飛ぶので、forkしたプロジェクトのEDITORボタンからエディット画面に飛びます。

スクリーンショット 2019-06-17 18.00.17.png

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

まずSCENESの画面からeditするsceneを選びます。
Untitledしかないのでこちらを選択。(新規にプロジェクトを作る際もUntitledのsceneがあります)

スクリーンショット 2019-06-17 18.03.12.png

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

スクリーンショット 2019-06-17 18.14.26.png

上の画像を基に、GUIを簡単に説明していきます。

  • メニュー(MENU)
    Photoshopなどでいうツールバーとメニューバーが合わさっている感じ。
    プロジェクトの設定やシーンの設定などもここで操作できます。
  • ヒエラルキー(HIERARCHY)
    シーン内に存在するオブジェクトの一覧が表示されます。
    このシーンではどんなentityが使われているのかなどここで管理。
    まとめてグループ化や名前の変更などもできる。
  • シーン(SCENE)
    3D空間が表示され、自由な位置・角度から眺めることができます。
    3DコンテンツやカメラのPositionやRotateなどを弄ることができます。
  • アセット(ASSETS)
    プロジェクトhtmlやcss、imgといったファイルや3Dモデルのデータなどもここで表示され、ここに入れて使われるデータたちは合わせてアセットと呼ばれています。
    ディレクトリで分けたり名前を変更することもできます。各ファイルはアップロード時にIDが付与され管理されるため、同じ名前のファイル名をアップロードしても上書きアップロードにはならないことがあるので注意。
  • インスペクター(INSPECTOR)
    ヒエラルキーやシーンで選択中のオブジェクトの設定を編集できます。
    3Dモデルのメッシュや衝突判定、物理制御に関するパラメータもここで定義することが可能。

コードエディター

基本的なGUIはこの5つで、他にコードエディターがあります。

コードエディターはメニューの下の方にあります。

スクリーンショット 2019-06-17 18.34.30.png

スクリーンショット 2019-06-17 18.33.35.png

コードエディターは普段使用されているであろうエディターと基本同じです。

JavaScriptのsnippetやコードのhighlightなども基本付いています。

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

Lauch実行

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

スクリーンショット 2019-06-19 13.35.05.png

Sceneの現状をLaunch実行してくれるため、開発しながら確認ができます。

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

スクリーンショット 2019-06-19 13.41.03.png

プロジェクトを確認できたところで、次はカメラ移動の処理をつけていきます。

次回


Viewing all articles
Browse latest Browse all 8652

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>