我正在尝试在 A 框架中制作一个组件,该组件将使播放器/相机朝相机所面对的方向移动。它不应该在 y 平面上的任何位置移动,只能在 x/y 平面上移动。 dom 中的当前设置是:
<a-entity>
<a-camera></a-camera>
</a-entity>
我想将实体元素位置移动到当前相机方向上的 x 个单位,但它不应该在 y 平面上移动任何东西。我尝试了各种解决方案,但它们似乎在相机中引入了一些奇怪的变化。
最佳答案
您可以通过多种方式处理此问题。
0) 向量
在大多数 3D 引擎中简单且可用:
a-frame 组件中的上述步骤可能如下所示:
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script>
// define a custom component
AFRAME.registerComponent("foo", {
init: function() {
// grab the camera
var player = document.querySelector("a-camera")
// create a direction vector
var direction = new THREE.Vector3();
window.addEventListener("keydown", (e) => {
if (e.code === "KeyR") {
// get the cameras world direction
this.el.sceneEl.camera.getWorldDirection(direction);
// multiply the direction by a "speed" factor
direction.multiplyScalar(0.1)
// get the current position
var pos = player.getAttribute("position")
// add the direction vector
pos.add(direction)
// set the new position
player.setAttribute("position", pos);
// !!! NOTE - it would be more efficient to do the
// position change on the players THREE.Object:
// `player.object3D.position.add(direction)`
// but it would break "getAttribute("position")
}
})
}
})
</script>
<a-scene>
<a-box position="-1 0.5 -3" rotation="0 45 0" foo color="#4CC3D9"></a-box>
<a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
<a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
<a-sky color="#ECECEC"></a-sky>
<a-camera></a-camera>
</a-scene>
但是,您可能希望以更“数学”的方式执行此操作:
1) 2D - 极坐标
将 Angular 映射到 2D 空间是 polar coordinate system 的工作。 !
我们想根据相机旋转计算 x/y 坐标。坐标转换如下所示:
x = r * cos(a)
y = r * sin(a)
其中“r”是步长,“a”是 Angular 。
理论很无聊,让我们开始实践吧:
var angle = player.getAttribute("rotation") // grab angle
var x = 1 * Math.cos(angle.y * Math.PI / 180) // calculate shifts
var y = 1 * Math.sin(angle.y * Math.PI / 180)
var pos = player.getAttribute("position") // grab position
pos.x -= y; // update position
pos.z -= x;
player.setAttribute("position", pos);
这很简单——获取 Angular ,计算位移,然后设置新位置。我们可以修改前面的例子:
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script>
AFRAME.registerComponent("foo", {
init: function() {
var player = document.querySelector("a-camera")
window.addEventListener("keydown", (e) => {
if (e.code === "KeyR") {
var angle = player.getAttribute("rotation")
var x = 0.1 * Math.cos(angle.y * Math.PI / 180)
var y = 0.1 * Math.sin(angle.y * Math.PI / 180)
var pos = player.getAttribute("position")
pos.x -= y;
pos.z -= x;
player.setAttribute("position", pos);
}
})
}
})
</script>
<a-scene>
<a-box position="-1 0.5 -3" rotation="0 45 0" foo color="#4CC3D9"></a-box>
<a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
<a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
<a-sky color="#ECECEC"></a-sky>
<a-camera></a-camera>
</a-scene>
2) 3D - 球坐标
毕竟,这是我们正在谈论的 3D 空间。
概念是相同的 - 将摄像机 Angular 转换为 x/y/z 坐标。这里的绝妙技巧是来自 spherical coordinate system 的转换。 .三维使它有点困难,但最令人困惑的是-球面系统中的轴与clipspace中的轴不同。 (由 a-frame 使用):
请记住,计算应如下所示:
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script>
// same component as 2D - just different calculations
AFRAME.registerComponent("foo", {
init: function() {
var player = document.querySelector("a-camera")
window.addEventListener("keydown", (e) => {
if (e.code === "KeyR") {
// get the player rotation
var angle = player.getAttribute("rotation")
// calculate the angles
// the camera's theta == 0 is actually 90' in the clipspace
let theta = (angle.x * Math.PI / 180) + Math.PI / 2
let fi = angle.y * Math.PI / 180
let r = 0.1
// calculate the position shifts
let z = Math.sin(theta) * Math.cos(fi) * r
let x = Math.sin(theta) * Math.sin(fi) * r
let y = Math.cos(theta) * r
// update the position
var pos = player.getAttribute("position")
pos.x -= x;
pos.y -= y;
pos.z -= z;
player.setAttribute("position", pos);
}
})
}
})
</script>
<a-scene>
<a-box position="-1 0.5 -3" rotation="0 45 0" foo color="#4CC3D9"></a-box>
<a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
<a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
<a-sky color="#ECECEC"></a-sky>
<a-camera></a-camera>
</a-scene>
关于javascript - A 帧沿相机方向向前移动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48726018/