概要

スマートフォンでARマーカーを読み取らせて表示したオブジェクトをピンチ操作で拡縮したい、という需要があったのでチャレンジ。うまくいきました。

実装手順

豆腐を出すだけのシンプルなコード

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>A-Frame AR with pinch scale</title>
    <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
    <script src="https://raw.githack.com/jeromeetienne/AR.js/2.0.5/aframe/build/aframe-ar.js"></script>
  </head>
  <body>
    <a-scene embedded arjs>
      <a-marker preset="hiro">
        <a-box id="cube" material="opacity: 0.75;"></a-box>
      </a-marker>
      <a-entity camera></a-entity>
    </a-scene>
  </body>
</html>

hiroマーカーで半透明の豆腐が出ました。

ピンチ操作で拡縮できるように

a-scene に独自のアトリビュート scale-controls を追加。

<a-scene embedded arjs scale-controls>

scale-controls を A-Frame に registerComponent して中身を書く（この例では cube という id の要素に対する拡縮操作にしています）。

<script>
      AFRAME.registerComponent("scale-controls", {
        init: function() {
          this.modelPivotEl = document.getElementById("cube");

          this.onTouchStart = this.onTouchStart.bind(this);
          this.onTouchMove = this.onTouchMove.bind(this);

          document.addEventListener("touchstart", this.onTouchStart);
          document.addEventListener("touchmove", this.onTouchMove);
        },

        onTouchStart: function(evt) {
          if (evt.touches.length === 3) {
            this.onTripleTouchStart(evt);
          }
        },

        onTouchMove: function(evt) {
          if (evt.touches.length === 2) {
            this.onPinchMove(evt);
          }
        },

        onTripleTouchStart: function(evt) {
          // reset
          var modelPivotEl = this.modelPivotEl;
          var modelScale = 1;
          modelPivotEl.object3D.scale.set(modelScale, modelScale, modelScale);
          this.modelScale = modelScale;
        },

        onPinchMove: function(evt) {
          // scaling
          var dX = evt.touches[0].clientX - evt.touches[1].clientX;
          var dY = evt.touches[0].clientY - evt.touches[1].clientY;
          var modelPivotEl = this.modelPivotEl;
          var distance = Math.sqrt(dX * dX + dY * dY);
          var oldDistance = this.oldDistance || distance;
          var distanceDifference = oldDistance - distance;
          var modelScale = this.modelScale || modelPivotEl.object3D.scale.x;

          modelScale -= distanceDifference / 50;
          modelScale = Math.min(Math.max(0.1, modelScale), 2.0);
          // Clamp scale.
          modelPivotEl.object3D.scale.set(modelScale, modelScale, modelScale);

          this.modelScale = modelScale;
          this.oldDistance = distance;
        }
      });
    </script>

実行結果

ピンチで拡縮、3点タッチでリセットできるようになりました。

動作デモはこちら。スマホでQRコードから飛んで、下のHiroマーカーを写すと試せます。

A-Frame AR with pinch scale
https://yummy-rustic-shame.glitch.me

参考

A-Frame 公式サンプルの model-viewer から必要なところだけいただきました。

aframe/examples/showcase/model-viewer at master · aframevr/aframe
https://github.com/aframevr/aframe/tree/master/examples/showcase/model-viewer