クイックスタート

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.binではありません）「Scene View」にドラッグ＆ドロップします。 また、「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コンポーネントを使ってカスタム動作を追加することもできます。

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