three.js - 对象的属性在场景中不更新

Question

在场景中，我有两个盒子。我正在尝试让一个盒子实时克隆另一个盒子的旋转角度。

<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">

我可以看到克隆盒子的属性通过console.log（）正确更新，但在场景中盒子并没有改变它的角度。我错过了什么？

下面的代码是我尝试使它工作。

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"));
});

标签： three.jsaframe

Answer 1

来自A-Frame 常见问题解答：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