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

【问题标题】：Continuously moving Aframe camera into direction of view将 Aframe 相机连续移动到观察方向
【发布时间】：2017-09-10 00:56:55
【问题描述】：

我想在当前查看方向上连续移动我的 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)););
  }
});

【问题讨论】：

标签： javascript three.js aframe

【解决方案1】：

我觉得view的方向应该是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 元素。

【讨论】：

你能提供一个完整的例子吗？请参阅我的帖子的编辑以了解我尝试过的内容。