Question

我正在使用A-Frame（webVR）制作多全景浏览器。世界上有几个3d按钮（每个按钮位置都有全景映射的球体）。单击一个按钮，然后动画组件将摄影机从其当前位置移动到按钮位置。一个包含侦听器（用于按钮上的单击事件）的自定义组件，使用setAttribute设置相机上动画组件的“ to”和“ from”属性。发射命令触发动画。不幸的是，它失败了，我可以看到'from'属性设置不正确（它设置为与'to'相同）。它不会引发错误，但是即使在显式设置中，我也可以在控制台中看到from不会被设置。

我已经在以前的版本中使用过此功能。您可以在此处查看和测试： https://glitch.com/~camera-jumper

在此版本中，我没有设置from属性，但它仍然可以正常工作，大概是因为它将默认值作为以前的值。

然后我建立了一些其他功能，现在它失败了。您可以在此处查看当前版本： https://glitch.com/~panojumper

AFRAME.registerComponent('buttoncontrol', { 
    schema: {
        pano:{type:'string',default: 'pSphere1'} 
    },  
    init: function(){   
        var el = this.el;       
        var cam = document.querySelector('#camera'); 
        var panoManEntity = document.querySelector('#panoMan'); 
        var panoName = this.data.pano;
        console.log(cam.getAttribute('animation__jump', 'to'));
        this.el.addEventListener('click', function(evt){

            // Animate the camera moving to the button position
            var btnpos = el.getAttribute('position'); 
            var cam = document.querySelector('#camera');
            var campos = cam.getAttribute('position');              

            cam.setAttribute('animation__jump','to', {x: btnpos.x, y: 
              btnpos.y, z: btnpos.z });             
            cam.setAttribute('animation__jump','from', {x: campos.x, y: 
              campos.y, z: campos.z });     
            cam.emit('camjump');
        }); 
    }
});

我希望'from'的setAttribute是我将其设置为的属性，但是它与'to'值相同。

Answer 1

设置from属性似乎有效，您可以通过修改第一个故障来验证它。添加from属性，它仍然可以正常工作：

var campos = cam.getAttribute('position')
// Animate the camera moving to the button position
cam.setAttribute('animation__jump','to', {x: btnpos.x, y: btnpos.y, z: btnpos.z });
cam.setAttribute('animation__jump','from', {x: campos.x, y: campos.y, z: campos.z });

提琴here。

如果您在<head>中或至少在<a-scene>之前注册了自定义组件，则其他故障也将起作用。 docs中还有一条注释。

提琴here。

Answer 2

您钉了它！自定义组件一定不能在场景中，而应该在头部。我将其移动是因为我的资产标签位于场景标签之前，这引发了错误，因此我将场景标签向北移动了太远。将场景标签移到registerComponents下方即可解决。所有这些都在文档中，但是我是菜鸟。谢谢你的帮助！

使用位置的动画组件“至”属性的setAttribute无法设置

2 个答案: