8th Wall タッチで3Dモデルを回したり大きくしたり動かしたりする xrextras-gesture-detector

<a-scene>にxrextras-gesture-detectorコンポーネントを追加すると、3Dモデルに対して様々な操作ができるようになる。

• xrextras-one-finger-rotate - 1つの指でまわす。(Y軸)
• xrextras-two-finger-rotate - 2本指でまわす。(Y軸)
• xrextras-pinch-scale - 2つのタッチ入力に基づいて拡大縮小する。
• xrextras-hold-drag - 1本の指で持ち上げて下にドラッグ/移動。Raycasterの設定が必要。

手順

8th WallでA-frameプロジェクトを作成する。

head.htmlにXRExtrasをインポートする。

<meta name="8thwall:package" content="@8thwall.xrextras"/>

body.htmlの<a-scene>にxrextras-gesture-detectorコンポーネントを追加する。

<a-scene
    xrextras-gesture-detector>
  ...
</a-scene>

xrextras-one-finger-rotate

<a-scene>内の3Dモデルのエンティティにコンポーネントを追加する。

<a-entity xrextras-one-finger-rotate gltf-model="#jelly-glb"></a-entity>

xrextras-two-finger-rotate

<a-scene>内の3Dモデルのエンティティにコンポーネントを追加する。

<a-entity xrextras-two-finger-rotate gltf-model="#jelly-glb"></a-entity>

xrextras-pinch-scale

<a-scene>内の3Dモデルのエンティティにコンポーネントを追加する。

<a-entity xrextras-pinch-scale gltf-model="#jelly-glb"></a-entity>

xrextras-hold-drag

<a-camera>を次のように設定する。

 <a-camera
    id="camera"
    position="0 8 8"
    raycaster="objects: .cantap"
    cursor="fuse: false; rayOrigin: mouse;">
  </a-camera>

<a-scene>内の3Dモデルのエンティティにコンポーネントを追加する。

<a-entity xrextras-hold-drag gltf-model="#jelly-glb"></a-entity>

参考記事