将Aframe相机连续移动到视线方向 [英] Continuously moving Aframe camera into direction of view
问题描述
我想在当前观看方向上不断移动Aframe场景的视图。
I want to continuously move the view of my Aframe scene in the current viewing direction.
似乎有两个组件可以做到这一点，（1）获得当前以正确的格式查看方向，（2）使用相机的当前查看方向定义和更新连续动画。
There seem to be two components to do this, (1) getting current viewing direction in correct format, (2) defining and updating a continuous animation with the current viewing direction of the camera.
我设法使用以下方法获取相机的查看方向代码：
I managed to get the camera's viewing direction using the following code:
<script>
AFRAME.registerComponent('listener', {
tick: function () {
var position = this.el.getAttribute('position');
var rotation = this.el.getAttribute('rotation');
}
});
</script>
如何创建一个在相机的查看方向上移动的动画，例如当前的倾斜？
How can I create an animation that moves in the camera's viewing direction, here for example with the current tilt?
我试过这个动作：
AFRAME.registerComponent('listener', {
tick: function () {
var camp = document.querySelector("#cameraWrapper");
camp.setAttribute('position', camp.getAttribute('position').add(0.1)););
}
});
推荐答案
我认为观点的方向应该是 THREE.Vector3（）类型，你可以得到这样的指示：
I think the direction of view should be in THREE.Vector3() type, you can get the direction like this:
var camera = document.querySelector("a-camera");
var direction = new THREE.Vector3().copy(camera.getWorldDirection());
如果使用组件tick功能实现，则会在每个渲染循环中执行tick函数移动，你可能不需要动画，只需让相机在视图方向上迈出一小步。代码如下：
Cause tick function would be executed in every render loop, if you use the component tick function to implement the movement, you may don't need an animation, just let the camera take a little step in the view direction. The code is like:
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元素。
I attached the component to the a-camera entity, so, this.el equals a-camera DOM element.
这篇关于将Aframe相机连续移动到视线方向的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
