User Manual

PlayCanvasにおけるWebXR Input Sources

Input Source

XrInputSourceは、仮想世界とのやりとりを可能にする入力機構を表します。これには、手持ちのコントローラー、光学的に追跡される手、注視に基づく入力方法、タッチスクリーンなどが含まれますが、伝統的なゲームパッド、マウス、キーボードに明示的に関連付けられた入力ソースではありません。

Input Sourcesへのアクセス

入力ソースのリストは、XrManagerによって作成されるXrInputマネージャーで利用可能です:

var inputSources = app.xr.input.inputSources;
for (var i = 0; i < inputSources.length; i++) {
    // 利用可能なすべての入力ソースを反復処理する
}

入力ソースは動的に追加および削除できます。これは、物理デバイスを接続するか、基盤となるプラットフォームによって入力デバイスを切り替えることによって行われます。一部の入力ソースは、主操作中にのみ存在し、ライフスパンが制限されることもあります(例:モバイル上で AR セッションでタッチスクリーンを使用する場合)。次のようにaddおよびremoveイベントにサブスクライブできます。

app.xr.input.on('add', function (inputSource) {
    // 入力ソースが追加された

    inputSource.once('remove', function () {
        // 入力ソースが削除された時点で通知される
    });
});

主操作(選択)

各入力ソースには、主操作の selectが含まれます。注視に基づく入力ソースでは、これはスクリーン/ボタンのタッチです。手持ちのデバイスでは、これは主ボタン/トリガーです。トラッキングされた手では、親指と指の先端が接触している場合にPlayCanvasエンジンでエミュレートされます。selectstartおよびselectendイベントもあり、次のようにサブスクライブできます。 

inputSource.on('select', function () {
    // 主操作
});

または、入力マネージャーを介して:

app.xr.input.on('select', function (inputSource) {
    // 主操作
});

レイ

各入力ソースには、レイがあり、レイは、指している原点と指している方向を持ちます。レイは、ワールド空間に変換されます。いくつかの入力ソースの例は、次のようなものがあります。

以下は、レイがメッシュの境界ボックスと交差しているかどうかを確認する方法の例です。

// 入力ソースデータでレイを更新する
ray.set(inputSource.getOrigin(), inputSource.getDirection());
// メッシュの境界ボックスがレイと交差しているかを確認する
if (meshInstance.aabb.intersectsRay(ray)) {
    // 入力ソースがメッシュを指している
}

グリップ (Grip)

Oculus TouchTMのような一部の入力ソースは、物理的な手持ちデバイスに関連付けられており、位置と回転を持つことができます。その位置と回転は、ワールド空間で提供されます。

if (inputSource.grip) {
    // デバイスモデルをレンダリングできます
    // モデルで関連するエンティティの位置と回転を設定する
    entity.setPosition(inputSource.getPosition());
    entity.setRotation(inputSource.getRotation());
}

ゲームパッド (GamePad)

プラットフォームがWebXR Gamepadsモジュールをサポートしている場合、入力ソースに関連する GamePad オブジェクトを取得して、ボタン、トリガー、軸などのその他の入力ハードウェアの状態を取得できます。

var gamepad = inputSource.gamepad;
if (gamepad) {
    if (gamepad.buttons[0] && gamepad.buttons[0].pressed) {
        // ユーザーがゲームパッドのボタンを押した
    }
}

手 (Hands)

プラットフォームがWebXR Hand Inputをサポートしている場合、入力ソースに関連する手のデータを提供するXrHandがあり、XrFingerおよびXrJointの形で便利な情報を提供し、手首、指、各関節、先端、手の追跡が外れたときに検出するためのイベントなどがあります。

手のベーシックなモデルの作成:

var joints = [ ];
var hand = inputSource.hand;

if (hand) {
    for(var i = 0; i < hand.joints.length; i++) {
        var entity = new pc.Entity();
        entity.joint = hand.joints[i];
        entity.addComponent('model', { type: 'box' });
        parent.addChild(entity);
        joints.push(entity);
    }
}

そして、更新ごとに同期する:

for(var i = 0; i < joints.length; i++) {
    var entity = joints[i];
    var joint = entity.joint;
    var radius = joint.radius * 2;
    entity.setLocalScale(radius, radius, radius);
    entity.setPosition(joint.getPosition());
    entity.setRotation(joint.getRotation());
}

Profiles

それぞれの入力ソースには、入力ソースのタイプを説明する文字列のリストを持つことができ、プロファイルレジストリで説明されています。これを基に、手持ちデバイスにどのタイプのモデルをレンダリングするか、どのような機能を持つかを特定できます。さらに、プロファイルレジストリには、ボタンや軸などのゲームパッドマッピングの詳細がリストされています。 

if (inputSource.profiles.indexOf('oculus-touch-v2') !== -1) {
    // Oculus TouchTM が手持ちデバイスである
}

チュートリアル

PlayCanvasでは、WebXR機能の使用方法に関する多数のチュートリアルとサンプルが用意されています。ユーザーはこれらをフォークしてコードやコンポーネントがどのように構造化されているかを調べることができます。

This site is translated by the community. If you want to get involved visit this page