CODEWITHSUNDEEP
three.jsaframe
D Park
D Park

Reputation: 514

The property of the object does not update in the scene

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

Answers (1)

Diego Marcos
Diego Marcos

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

Related Questions