我正在使用 A-Frame 并希望对象随相机移动。为此,我将一个组件组合在一起,根据相机位置更新对象的位置:
AFRAME.registerComponent('follow', {
schema: {
distance: {type: 'vec3'},
target: {type: 'selector'}
},
tick: function() {
const targetItem = this.data.target;
const relativePosition = this.data.distance
var tempPos = targetItem.getAttribute("position").split(" ").map(Number);
targetPos = new THREE.Vector3(relativePosition.x + tempPos[0], relativePosition.y + tempPos[1], relativePosition.z + tempPos[2]);
this.el.setAttribute('position', targetPos)
}
});
当我使用 init
而不是 tick
时,这工作正常,但由于它是一个 init 函数,它只在场景开始时更新一次。出于某种原因,当我使用 tick
时,一切都中断了。我用错了吗?我是否应该做一些不同的事情来不断更新它的位置?
提前致谢!
编辑:我应该提一下,目标是让某些东西随处可见,但不固定在您的 View 中。想想时之笛中的 Navi。
最佳答案
从外部收到解决方案 SO:
我需要将我的 WASD Controller 放在包含相机的实体上:
<a-entity id="character" position="0 2 3" wasd-controls look-controls>
<a-entity id="camera" camera>
<a-ring radius-outer="0.03" radius-inner="0.02"
position="0 0 -1"
material="color: cyan; shader: flat"
cursor="fuse: true; fuseTimeout: 500">
</a-ring>
</a-camera>
</a-entity>
然后,我需要更改函数:
tick() {
const targetItem = this.data.target;
var distance = this.data.distance;
var targetPosition = targetItem.getAttribute('position');
this.el.setAttribute('position',{
x: targetPosition.x + distance.x,
y: targetPosition.y + distance.y,
z: targetPosition.z + distance.z
});
然后成功了!
关于javascript - 使用帧中的刻度函数根据相机位置更新对象位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40553485/