クイックスタート

Wonderland Engineへようこそ。このチュートリアルを続ける前に、Wonderland Editorをインストールしてください。

プロジェクトの作成 

好きなプロジェクト名を入力し、エディタを初めて起動したときに表示される「Project Wizard」でプロジェクトを作成します。

「VR」テンプレートを選択します。

VRテレポーテーションが設定された基本的なプロジェクトが表示されます。 少し退屈ですので、ここにアセットを追加しましょう。

左下に「Asset Browser」が表示されます。プロジェクトのディレクトリの内容が確認できます。 プロジェクトのすべてのアセットはこのディレクトリに配置する必要があります。

ブラウザで実行 

プロジェクトをパッケージ化してブラウザで表示するには、ウィンドウ上部の緑色の矢印をクリックします：

プロジェクトを「パッケージ化」するたびに（🔨アイコンをクリック）、ブラウザが自動的にリロードされ、変更が反映されます。

オブジェクトの削除 

VRテンプレートには、ライト、オブジェクト、そして特に重要なプレイヤーの設定が含まれています。

すべてのオブジェクトは必要ありません。左クリックで選択してから、右クリックして「Scene Outline」で削除するか、「Del」キーで削除します。

このオブジェクトを削除します：

• Cube
• Sphere
• Cone
• Panel

以下は保持します：

• Player
• Light
• Light.000
• 3DCursorHitLeft / 3DCursorHitRight
• TeleportIndicator

ナビゲーションメッシュの修正 

保持した平面には「collision」コンポーネントが付いており、衝突やレイキャストのための形状を定義します。

ここではテレポートナビゲーションに使用されます。次に、すでに床があるシーンを追加しますので、メッシュは削除しますが、衝突は保持します。

平面をクリックし、「Properties」で「mesh」コンポーネントの⋮（縦の点）をクリックし、最後に「Delete」を選びます：

衝突コンポーネントの緑の線が保持され、レンダリングのためのメッシュが消えたことがわかります。ブラウザ上では、この衝突のビジュアライゼーションはデフォルトでは表示されません。

アセットを追加 

右クリックでルートディレクトリを選び、「New folder」で新しいフォルダassetsを作成します。

low_poly_winter_scene.zipをダウンロードし、 解凍するか、Asset Browserの新しいフォルダにドラッグ＆ドロップします。WinRARを使用している場合は、WinRARから直接ドラッグ＆ドロップすることもできます。

この美しいシーンは"EdwinRC"によって作成され、Sketchfabで見ることができます。

シーンをインポートするには、scene.gltfを「Scene View」にドラッグ＆ドロップします（scene.binではありません）。 または、「Scene Outline」の既存のオブジェクトに直接ドラッグ＆ドロップすることもできます。

見回す 

「Scene View」で見回すには、右マウスボタンを押し続けながらマウスを動かします。W-A-S-Dキーを使用して前進、左、後退、右に移動し、右マウスボタンを押し続けます。速度を上げるには、右マウスボタンを押し続けたまま上スクロールします。

また、マウスホイールのボタンを押し続ける（MacOSではAltを押し続ける）ことで、シーンを回転させることもできます。

照明の位置を調整 

この新しいシーンの照明の位置が不適切に感じます。

適切な場所に移動するには、「Scene Outline」で1つを選び、「translation gizmo」ハンドルを使用して3Dシーン内のライトをドラッグします。

翻訳用の矢印がない場合は、以下のキーでgizmoタイプを切り替えます：

• G (“Grab”): 位置gizmo
• R (“Rotate”): 回転gizmo
• S (“Scale”): スケーリングgizmo

Gをダブルタップしてローカルスペースとワールドスペースでの翻訳を切り替えます。

シーンビューの上部にあるツールバーを使うこともできます：

コンポーネントのプロパティ 

「Light」オブジェクトはそこに「light」コンポーネントが付いているため光を発します。 ライトコンポーネントの「intensity」プロパティを減少させることで光を明るくすることができます：

まとめ 

このシーンにはほんの少しのオブジェクトしかありませんが、Wonderland Engineは多くの異なるメッシュを効率的にレンダリングできます。 Scene Optimization Exampleをご覧ください。

独自のJavaScriptコンポーネントを使ってカスタム動作を追加することで続けることができます。例：独自のJavaScriptコンポーネント作成。

または、VRコントローラーのサポートを追加することもできます。