setAttribute for animation component 'to' attribute using position fails to set
Question
I'm using A-Frame (webVR) to make a multi panorama explorer. The world has a few 3d buttons (with panorama mapped spheres at each button position). You click on a button, and an animation component moves the camera from its current location to the button location. A custom component containing a listener (for click events on buttons), uses setAttribute to set the 'to' and 'from' attributes of an animation component on the camera. An emit command triggers the animation. Unfortunately it fails, and I can see that the 'from' attribute is not setting correctly (it is setting to the same as 'to'). It doesn't throw errors, but I can see in the console that the from will not set,even though I set it explicitly.
I've already got this working in a previous version. You can see and test it here: https://glitch.com/~camera-jumper
In this version, I don't set the from attribute, and it still works fine, presumably because it takes the previous value as a default.
Then I built in some other functionality and now it is failing. You can see the current version here: 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');
});
}
});
I expect setAttribute for 'from' to be what I am setting it to, but it is the same as the 'to' value.
2 answers
solution1
0 ACCPTED 2019-06-13 07:52:14
Setting the from attribute seems to be working, you can verify it by modifying your first glitch. Add the from attribute, and its still working properly:
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 });
fiddle here .
The other glitch will also work if you register the custom components in the <head> or at least before the <a-scene> . There is also a note on it in the docs .
fiddle here .
solution2
0 2019-06-14 01:24:15
You nailed it! Custom components must not be in the scene, but in the head. I moved it because my assets tag was before the scene tag, which threw an error, so I moved the scene tag too far north. Moving the scene tag below registerComponents solved it. All of this is in the docs, but I'm a noob. Thanks for your help!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.