如何通过 A 型框架中的光学跟踪夹点来控制相机装备方向？

Question

我想复制 this guy 所做的事情。基本上，你从房间的一个角落到另一个角落来回走动，当你到达守卫栅栏时旋转场景。

https://repl.it/@tetegithub/aframe#index.html

<!DOCTYPE html>
<html>
<head>
    <script src="https://aframe.io/releases/1.1.0/aframe.min.js">
    </script>
</head>
<body>
    <a-scene>
        <a-box id="box" position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
        <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
        <a-sky color="#ECECEC"></a-sky>

        <a-entity id="rig" rotation="0 0 0">
            
      <a-entity id="camera" camera look-controls></a-entity>
            
      <!-- *** -->
      
      <a-entity id="leftHand" 
      hand-tracking-controls="hand: left;modelColor:#E9967A;" 
      onpinchstarted="rig.object3D.rotation.x +=Math.Pi;"></a-entity>
            
      <!-- *** -->
      
      <a-entity id="rightHand" hand-tracking-controls="hand: right;modelColor:#E9967A"></a-entity>

        </a-entity>
    </a-scene>
</body>
</html>

我在左手的标签中添加了“onpinchstarted”事件，希望当我用左手捏合时，相机装置会旋转。它并不t.I 认为我必须以某种方式使用事件侦听器和处理程序，但我阅读的所有文档看起来都是为机器人编写的。任何建议表示赞赏。

Answer 1

如果在事件侦听器之外触发旋转，旋转是否有效？我看到您指的是 onpinchstarted 中的“rig”，“rig”是否作为该范围内的变量存在？

一个解决方案是从执行旋转的辅助函数开始，然后运行在控制台中确认它是否有效。然后，通过 javascript 而不是 html 将其附加到场景（不一定是组件，但它可能更容易重用）。

文档不清楚 onpinchstarted 与 pinchstarted 是否有效 https://aframe.io/docs/1.1.0/components/hand-tracking-controls.html#events_pinchended

Answer 2

好吧，我通过剖析 the example project 想出了一种解决方案。

rig.js

AFRAME.registerComponent('rig', {

  init: function () {

    this.bindMethod();
    this.el.sceneEl.addEventListener('pinchstarted', this.onPinchStarted);
  },


//I still don't get what this thing does.
  bindMethod: function () {
    this.onPinchStarted = this.onPinchStarted.bind(this);
  },
  
  onPinchStarted: function () {
    this.el.setAttribute('rotation', {y: this.el.getAttribute('rotation').y + 30});
     },

});

index.html

<script src="rig.js"></script>

<a-entity rig>
    <a-entity camera look-controls position="0 1 0"></a-entity>
    <a-entity hand-tracking-controls="hand: left; modelColor:#E9967A;"></a-entity>
    <a-entity hand-tracking-controls="hand: right; modelColor:#E9967A;"></a-entity>
</a-entity>

现在我希望在我用左手握住捏点时，钻机偏转的角度与相机旋转的角度相同。

感谢。

我在一段时间后让它工作了

index.html

<script src="rotator.js"></script>

 <a-entity id="rig">
        
        <a-camera></a-camera>

        <a-entity
          oculus-touch-controls="hand: left;"
          hand-tracking-controls="hand: left; modelColor:#E9967A;"
          rotator="rig: #rig"
        ></a-entity>

        <a-entity
          oculus-touch-controls="hand: right;"
          hand-tracking-controls="hand: right; modelColor:#E9967A;"
          rotator="rig: #rig"
        ></a-entity>
      
      </a-entity>

由于我测试的 Oculus 浏览器中的 web XR 手部跟踪仍处于实验阶段且不稳定，因此我添加了触摸控制器的抓握按钮。

rotator.js

/* global AFRAME, THREE */

AFRAME.registerComponent("rotator", {
  schema: {
    rig: { type: "selector" },
  },

  init: function() {
    this.bindMethods();

    this.el.addEventListener("pinchstarted", this.onPinchStarted);
    this.el.addEventListener("pinchended", this.onPinchEnded);
    this.el.addEventListener("gripdown", this.onPinchStarted);
    this.el.addEventListener("gripup", this.onPinchEnded);

    this.rig = this.data.rig;
    this.box = this.data.box;
    this.box2 = this.data.box2;
    this.camera = this.el.sceneEl.camera.el;
    this.axisY = new THREE.Vector3(0, 1, 0);
  },

  bindMethods: function() {
    this.onPinchStarted = this.onPinchStarted.bind(this);
    this.onPinchEnded = this.onPinchEnded.bind(this);
  },

  onPinchStarted: function() {
    this.trigger = 1;
    this.oldCameraAngle = this.camera.getAttribute("rotation").y;
  },

  tick: function() {
    
    if (this.trigger == 1) {
      
      var angleDifference = THREE.Math.degToRad(
      this.oldCameraAngle - this.camera.getAttribute("rotation").y );
      
      this.oldCameraAngle = this.camera.getAttribute("rotation").y;

      var cameraPosition = new THREE.Vector3();
    cameraPosition.setFromMatrixPosition(this.camera.object3D.matrixWorld);

      this.rig.object3D.position.add( cameraPosition.negate() );
      this.rig.object3D.position.applyAxisAngle( this.axisY, angleDifference );
      this.rig.object3D.position.add( cameraPosition.negate() );
      this.rig.object3D.rotateOnAxis( this.axisY, angleDifference );
    }
  },

  onPinchEnded: function() {
    this.trigger = 0;
  }
  
});

GitHub link and the version 发表在我的网站上。

如何通过 A 型框架中的光学跟踪夹点来控制相机装备方向？

How to control camera rig orientation with optically tracked pinch in A-frame?

aframe