连续将 Aframe 相机移动到观察方向

Question

我想在当前观察方向连续移动我的 Aframe 场景的视图。

似乎有两个组件可以做到这一点，(1) 以正确的格式获取当前观察方向，(2) 使用相机的当前观察方向定义和更新连续动画。

我使用以下代码设法获取了相机的观察方向：

        <script>
AFRAME.registerComponent('listener', {
  tick: function () {
    var position = this.el.getAttribute('position');
    var rotation = this.el.getAttribute('rotation');
  }
});
        </script>

如何创建沿相机观察方向移动的动画，例如此处使用当前倾斜度？

我试过这个动作：

AFRAME.registerComponent('listener', {
  tick: function () {
    var camp = document.querySelector("#cameraWrapper");
    camp.setAttribute('position', camp.getAttribute('position').add(0.1)););
  }
});

Answer 1

我觉得视角方向应该是THREE.Vector3()类型，你可以这样获取方向：

var camera = document.querySelector("a-camera");
var direction = new THREE.Vector3().copy(camera.getWorldDirection());

因为tick函数会在每个渲染循环中执行，如果你使用组件tick函数来实现移动，你可能不需要动画，只需要让相机在视图方向移动一点。代码如下：

tick : fucntion()
{
    var camera = document.querySelector("a-camera");
    var stepFactor = 0.1;
    camera.parent.position.add(this.direction.multiplyScalar(stepFactor));
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/aframe/0.5.0/aframe.min.js"></script>
<script src="//cdn.rawgit.com/donmccurdy/aframe-extras/v3.7.0/dist/aframe-extras.min.js"></script>
<!DOCTYPE html>  
<html>  
<head>
<title>Camera Movement</title>
</head>
<body>
<script type="text/javascript">
 AFRAME.registerComponent("listener", {
  schema : 
  {
   stepFactor : {
    type : "number",
    default : 0.05
   }
  },
  tick : function()
  { this.el.components.camera.camera.parent.position.add(this.el.components.camera.camera.getWorldDirection().multiplyScalar(this.data.stepFactor));
  }
 });
</script>
<a-scene>
  <a-camera  listener="stepFactor:0.01" position="0 0 30">
    <a-entity id="cursor" cursor="fuse: true;fuseTimeout:500"
     material="color:black"
     geometry="primitive:ring"
     position="0 0 -1"
     scale="0.01 0.01 0.01"
    ></a-entity>
  </a-camera>
  <a-grid></a-grid>
<a-box position="0 1 -2" color="blue" move eve></a-box>
</body>
</html>

我将组件附加到 a-camera 实体，因此，this.el 等于 a-camera DOM 元素。

连续将 Aframe 相机移动到观察方向

Continuously moving Aframe camera into direction of view

javascript

three.js

aframe