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 : fucntion()
{
    var camera = document.querySelector("a-camera");
    var stepFactor = 0.1;
    camera.parent.position.add(this.direction.multiplyScalar(stepFactor));
}

＆＃13;

<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>

＆＃13;

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

将Aframe相机连续移动到视线方向

1 个答案: