如何在框架中的实体的 space 中获得真实位置？

Question

我尝试了多种方法来在动画之后立即获取元素的位置，但每次我都收到我输入的实体的硬编码位置。我一直使用 tick 函数来跟踪对象。这些是我尝试跟踪实体当前位置的以下方法，但其中返回的是我分配给实体的位置。它是 aframe 1.2.0 中的错误吗，因为在以前的版本中它工作正常。

Object.values(el.getAttribute('position'))
el.object3D.animations
Object.values(document.querySelector('#duck1').object3D.getWorldPosition(new THREE.Vector3()))
Object.values(el.object3D.getWorldPosition(new THREE.Vector3()))

为了参考，我也附上了实时代码。鼠标进入立方体后，动画将立即触发。实体的动画位置结束后将显示在 console.log entry

代码：

<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
  <script>
  AFRAME.registerComponent('eventhandling', {
            tick: function () {
                var el = this.el;
              var entity = document.querySelector('#duck1');
                el.addEventListener('animationcomplete', function(){
                    console.log("getAttribute: "+Object.values(el.getAttribute('position')));
                  console.log("object3D.position: "+(el.object3D.animations));
                  console.log("document.querySelector: "+ Object.values(document.querySelector('#duck1').object3D.getWorldPosition(new THREE.Vector3())));
                  console.log("object3D.getWorldPosition(new THREE.Vector3()): "+Object.values(el.object3D.getWorldPosition(new THREE.Vector3())));
                   entity.emit('starteventforAnimation'); 
                });
          }
        });
    
  </script>
</head>

<body>
    <a-scene>
<a-entity class="rota" id="duck1" color="#FF0000" scale="0.1 0.1 .1" position="2 0 -7" animation="property: rotation;from: ; to:0 -360 0; loop:true; easing:linear; dur:30000; pauseEvents: mouseenter; resumeEvents: starteventforAnimation " animation__mouseenter="property: rotation;from: ; to:0 360 0; easing:linear; dur:4000; startEvents: mouseenter ;pauseEvents: starteventforAnimation; resumeEvents: mouseenter" eventhandling>
            <a-box class="rota" color="#FF0000" gltf-model="spaceship.glb"  position="20 0 -10"  scale="2 3 3" collison-check="el: #otherduck; radius: 0.15; other-radius: 0.15;"> </a-box>
        </a-entity>
<a-camera position="0 1.2 1.3"><a-cursor objects=".rota" ></a-cursor></a-camera>        <

    </a-scene>
</body>
</html>

Answer 1

您正在寻找一个叫做“世界位置”的东西。

关于盒子，球体总是在相同的位置。盒子的旋转导致球体移动，因为整个参考系都在旋转。它的本地位置保持不变，但它的世界位置正在改变。

获取世界位置的一种方法是：

// local position
this.el.getAttribute("position");

// grab the reference to the underlaying object
const mesh = this.el.getObject3D("mesh");
// or const mesh = this.el.object3D; 

// create a vector where the position will be copied to
const worldpos = new THREE.Vector3();

// get the world position - it's in the worldpos vector
mesh.getWorldPosition(worldpos);

就像我在这里做的那样：

<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script>
  AFRAME.registerComponent("foo", {
    init: function() {
      // i'll keep the local position here
      this.localpos = new THREE.Vector3();
      // I'll keep the world position here
      this.worldpos = new THREE.Vector3();
      // this is the reference to the <p> element
      this.textEl = document.querySelector("p")
    },
    // utility function
    posToString: function(pos) {
      return pos.x.toFixed(2) + " " + pos.y.toFixed(2) + " " + pos.z.toFixed(2);
    },
    // called on each frame
    tick: function() {
      // getAttribute("position") has the local position
      // this.el.object3D.position has the local position
      // this.el.getObject3D("mesh").position has the local position
      this.localpos.copy(this.el.getAttribute("position"))
      this.el.getObject3D("mesh").getWorldPosition(this.worldpos)

      // compose the displayed message
      let msg = "";
      msg += "Sphere local position:" + this.posToString(this.localpos)
      msg += "<br>"
      msg += "Sphere world position:" + this.posToString(this.worldpos)
      this.textEl.innerHTML = msg
    }
  })
</script>
<p style="position: fixed; z-index: 999;"></p>
<a-scene>
  <a-box position="0 1 -4" color="blue" 
         animation="property: rotation;from: ; to:0 -360 0; loop:true; easing:linear; dur:3000">
    <a-sphere position="2 0 0" color="green" radius="0.25" foo></a-sphere>
  </a-box>
</a-scene>

如何在框架中的实体的 space 中获得真实位置？

How to get real position in space of the entity in aframe?

aframe