连续移动 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?
我试过这个是为了运动:
I tried this for motion:
AFRAME.registerComponent('listener', {
tick: function () {
var camp = document.querySelector("#cameraWrapper");
camp.setAttribute('position', camp.getAttribute('position').add(0.1)););
}
});
推荐答案
我觉得view的方向应该是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屋！
