JavaScript コンポーネント

8thwall-camera 

8thwall カメラコンポーネント。

廃止予定: https://github.com/WonderlandEngine/wonderland-ar-tracking のコンポーネントを代わりに使用してください。

anchor 

XRAnchor の位置にオブジェクトの位置を設定します。

Anchor.create() 静的関数を使用してアンカーを作成します。

カーソルと一緒に使用する例:

1cursorTarget.onClick.add((object, cursor, originalEvent) => {
2    /* XR 内のイベントにのみフレームが添付されます */
3    if(!originalEvent.frame) return;
4    Anchor.create(anchorObject, {uuid: id, persist: true}, originalEvent.frame);
5});

audio-listener 

Wonderland のオーディオリスナーコンポーネントを表します。 WebAudio リスナーインスタンスの位置と方向を更新します。

注意: 一度にアクティブにするリスナーは1つだけにしてください。

audio-source 

Wonderland Engine でのオーディオソースを表し、オーディオファイルの再生を可能にします。

cursor 

デスクトップ/モバイル/VR 用の3Dカーソル。

シーン内へのレイキャスティングカーソルを実装します。 クリック/ホバー/アンホバー/カーソルダウン/カーソルアップ/移動に反応するには、 cursor-target を使用します。

VR では、レイは this.object.getForward() の方向にキャストされます。 デスクトップとモバイルでは、 ユーザーが画面上をクリックした場所を考慮してフォワードベクトルが逆投影されます。

.globalTarget は、すべてのオブジェクトに対してコールバックを呼び出すために使用できます。 これにより、カーソルターゲットがアタッチされていないがコリジョングループに一致するオブジェクトにも適用されます。

.hitTestTarget は、WebXR ヒットテスト結果のコールバックを呼び出すために使用できます。

Animation Example を参照してください。

ヒットテストロケーションコンポーネントを cursorObject にアタッチします。 これは、cursor によって HitTestResult を hitTestTarget に送信するために使用されます。|

cursor-target 

cursor のためのクリック/ホバー/移動/ボタンターゲット。

クリック、ホバー、アンホバー、カーソル移動、カーソルボタンの押下または解除時にコードを実行するには、 .addClickFunction(f), .addHoverFunction(f), .addUnHoverFunction(f), .addMoveFunction(f), .addDownFunction(f)； .addUpFunction(f) をそれぞれ function f() {} と共に使用してください。

別のコンポーネントでメンバーを呼び出すために、カーソルターゲットを次のように設定できます：

1start: function() {
2  let target = this.object.addComponent('cursor-target');
3  target.onClick.add(this.onClick.bind(this));
4},
5onClick: function() {
6  console.log(this.object.name, "がクリックされました！");
7}

Functions:

 1const target = this.object.getComponent(CursorTarget);
 2const callback = function(object, cursorComponent) {};
 3
 4target.onHover.add(callback);
 5target.onHover.remove(callback);
 6
 7target.onUnHover.add(callback);
 8target.onUnHover.remove(callback);
 9
10target.onClick.add(callback);
11target.onClick.remove(callback);
12
13target.onMove.add(callback);
14target.onMove.remove(callback);
15
16target.onDown.add(callback);
17target.onDown.remove(callback);
18
19target.onUp.add(callback);
20target.onUp.remove(callback);

要件:

• 同じオブジェクトに collision コンポーネントが アタッチされていること。

Animation Example を参照してください。

debug-object 

オブジェクトの限られたデバッグ情報を表示します。

情報には、オブジェクトの名前、オブジェクトパラメータの名前、 オブジェクトのワールドトランスレーション、ワールドトランスフォーム、 ローカルトランスフォームが含まれます。

主にエンジン開発者によってデバッグ目的で使用されたり、例コードとして使用されます。

device-orientation-look 

モバイルデバイスからのデバイスの方向を取得し、オブジェクトの方向に設定します。

マジックウィンドウ体験に役立ちます。

finger-cursor 

カーソルターゲットとの衝突オーバーラップ、例として追跡された手の指先で、のインタラクションを可能にします。

要件:

• 同じオブジェクトへの衝突コンポーネント（通常は半径 0.05 の球体）

fixed-foveation 

WebXR セッションが開始されると、 固定フォビエーション を適用します。

固定フォビエーションは、ユーザーの視界のエッジで低解像度でレンダリングすることで、 ペリフェリーのシェーディングコストを削減します。

hand-tracking 

WebXR デバイス API での簡単なハンドトラッキング “Hand Input” API を実現します。

手をスフィアジョイントやスキンメッシュとして表示する機能を提供します。

キャッチングに反応するには、this.isGrabbing() を使用します。その他のジェスチャーについては、 this.joints - Object3D の配列を参照し、 WebXR Hand Input 仕様に記載されているジョイントインデックスを使用してください。

通常、ハンドトラッキングまたはコントローラを使用することが望ましいので、 両方は使用しません。このコンポーネントでは、ポーズが使用できない場合に ハンドトラッキングの可視化を非表示にする deactivateChildrenWithoutPose と 手の追跡ポーズが利用可能になると別のオブジェクトを無効にする controllerToDeactivate を提供します。 XR セッションの外では、トラッキングやコントローラはいずれも有効/無効にしません。 そのため、vr-mode-active-switch コンポーネントと共存します。

要件:

• ハンドトラッキングを使用するには、chrome://flags で “joint tracking” を有効にします。 Oculus Quest/Oculus Quest 2 用 Oculus Browser で設定します。

Hand Tracking Example を参照してください。

hit-test-location 

WebXR デバイス API “ヒットテスト”をセットアップし、 オブジェクトをヒット位置に配置します。

要件:

• AR ボタンの必須またはオプション機能に 'hit-test' を指定してください。例として Wastepaperbin AR を参照してください。

廃止予定: onHitLost と onHitFound を代わりに使用してください。|

image-texture 

URL から画像をダウンロードし、アタッチされたメッシュコンポーネントに diffuseTexture または flatTexture として適用します。

以下のシェーダーからのマテリアルがサポートされています：

• “Phong Opaque Textured”
• “Flat Opaque Textured”
• “Background”
• “Physical Opaque Textured”
• “Foliage”

input-profile 

XR コントローラの入力プロファイルを動的にロードおよびマップします。

mouse-look 

マウスの動きでカメラの向きを制御します。

マウスが動いたときにのみオブジェクトの向きに影響を与えるように効率的に実装されています。

orbital-camera 

OrbitalCamera コンポーネントは、指定された距離でターゲットポイントの周りを回転することにより、ユーザーを軌道に回らせます。これはオブジェクト自体の位置です。

備考: コンポーネントはマウスまたはタッチで作動します。そのため、VR では動作しません。

plane-detection 

WebXR デバイス API - Plane Detection を使用して XRPlanes のメッシュとコリジョンを生成します。

player-height 

Y-オフセットを地面上に設定するためのプレーヤーの高さを設定します。 ’local’ および ‘viewer’ リファレンス空間

target-framerate 

目標のフレームレートを設定します。

指定された framerate に最も近いサポートされているフレームレート に の目標フレームレートを更新します。

目標フレームレートはデバイスの VR 合成のための指標として、新しい画像で画面を更新する頻度を示します。 これは、アプリがより規則的な間隔でフレームを生成し、ドロップされる可能性のあるフレームに費やす時間を潜在的に減らします。

負荷の高いアプリにとって、適切な目標フレームレートを設定することは、アプリのレンダリングの安定性を向上させ、 スタッターの減少にも寄与します。

同様に、目標フレームレートを使用して、シンプルなアプリで Oculus Quest 2 の 120Hz リフレッシュレートを有効にすることができます。

teleport 

VR テレポート移動。

Teleport Example を参照してください。

trail 

動的なメッシュベースのトレイル

このコンポーネントは、オブジェクトが追加されたオブジェクトのワールド位置を追跡します。 固定インターバルでワールド位置が格納され、トレイルセグメントの開始および終了ポイントとして使用されます。

トレイルはその長さに沿って先細りします。UV テクスチャー座標は U軸がトレイルの幅をカバーし、 V軸がトレイルの長さをカバーするように設定されています。これにより、トレイルの外観はテクスチャーを使用して定義されます。

two-joint-ik-solver 

二関節チェーン（例：膝や肘）の逆運動学

video-texture 

URL からビデオをダウンロードし、指定されたマテリアルに diffuseTexture または flatTexture として適用します。

ビデオテクスチャは、フレームが利用可能な限り定期的に更新する必要があります。 このコンポーネントは新しいフレームの検出を処理し、ビデオの現在のフレームを反映するようにテクスチャを更新します。

以下のシェーダーからのマテリアルがサポートされています：

• “Phong Opaque Textured”
• “Flat Opaque Textured”
• “Background”
• “Physical Opaque Textured”
• “Foliage”

ビデオは this.video を通じてアクセスできます：

1  let videoTexture = this.object.getComponent('video-texture');
2  videoTexture.video.play();
3  videoTexture.video.pause();

Video Example を参照してください。

vr-mode-active-switch 

VR/AR セッションがアクティブかどうかに応じて、オブジェクト上の他のすべてのコンポーネントをアクティブ/非アクティブに切り替えることを可能にします。

例として、ユーザーが VR に入るまでコントローラを非表示にするのに便利です。

vrm 

VRM 1.0 モデルをロードおよび処理するためのコンポーネント。

モデルのポージングは専らボーンの回転によって行います。これらは .bones プロパティを使用してアクセスでき、 VRM ボーン命名に従います。すべての VRM モデルがすべての可能なボーンを持っているわけではありません。 リストポーズ（T ポーズ）は .restPose プロパティに格納されています。 ボーンをリストポーズにリセットするには次を使用します：

1vrmComponent.bones[vrmBoneName].rotationLocal = vrmComponent.restPose[vrmBoneName];

モデルを世界内で移動するには、このコンポーネントがアタッチされているオブジェクト（つまり、VRMモデルのルート）を移動します。 ボーンやその子孫オブジェクトを使用して VRM モデルを移動してはいけません。

コア拡張 VRMC_vrm や VRMC_springBone, VRMC_node_constraint のエクステンションがサポートされています。

制限事項:

• VRMC_material_mtoon のサポートはありません
• 表情のサポートはありません
• 表情ベースの lookAt はサポートされていません
• メッシュのアノテーションモード auto はサポートされていません

wasd-controls 

基本的な W/A/S/D キーによる移動。