Reputation: 514
In the scene, I have two boxes. I am trying to make one box cloning the other one's rotation angle in real time.
<a-entity id="original" mixin="cube" position="0 1.6 -1" material="color: red" sleepy collision-filter="group: red; collidesWith: default, hands, blue" rotation="0 0 0">
<a-entity id="clone" mixin="cube" position="2 1.6 -1" material="color: blue" sleepy
collision-filter="group: blue; collidesWith: default, red" rotation="0 0 0">
I can see that the property of a cloned box updates correctly through console.log(), but in the scene the box does not change its angle. What am I missing?
The code below is my attempt to make it work.
var check = document.querySelector('.controllers');
var ori = document.getElementById('original');
var clo = document.getElementById('clone');
check.addEventListener('xbuttondown', () => {
var ori_pos = ori.getAttribute("rotation");
//console.log(ori_pos.x);
clo.object3D.rotation.set(
THREE.Math.degToRad(ori_pos.x),
THREE.Math.degToRad(ori_pos.y),
THREE.Math.degToRad(ori_pos.z)
);
console.log(clo.getAttribute("rotation"));
});
Upvotes: 0
Views: 41
Reputation: 4585
From the A-Frame FAQ: To improve performance, A-Frame does not update the HTML to save on stringification operations. This also means mutation observations will not fire. Use the debug component or .flushToDOM methods if you need to sync to the DOM
Upvotes: 1