A帧相机旋转和移动动画不考虑新数据

Question

我正在尝试使相机移动并旋转到js中动态指定的特定位置和旋转。

但是，摄像机将从起始值旋转到0 00。当数据显示为其他值时。 旋转立即完成，没有动画。 即使数据成功更改，位置也不会更改。

我正在使用aframe-animation-component。

// JS
var camera = document.getElementById('camera');

camera.components.animation__movecamera.data.from = camera.components.position.data;
camera.components.animation__rotatecamera.data.from = camera.components.rotation.data;

camera.components.animation__movecamera.data.to = (positions.x - positionX)+ ' ' + positions.y + ' ' + (positions.z + 10);
camera.components.animation__rotatecamera.data.to = rotations.x + ' ' + rotations.y + ' ' + rotations.z;

camera.emit('rotateCamera');
camera.emit('moveCamera');


// HTML
<a-camera id="camera"
    look-controls
    wasd-controls="acceleration:200"
    animation__rotateCamera="property: rotation; startEvents: rotateCamera;"
    animation__moveCamera="property: position; startEvents: moveCamera;"
>

谢谢您的帮助。

Answer 1

数据属性不应直接访问，它是组件的内部变量。 必须使用公共API：

el.setAttribute('animation__rotateCamera', { to: foo });

在文档中有更多详细信息：

https://aframe.io/docs/0.7.0/introduction/javascript-events-dom-apis.html#updating-a-component-with-setattribute