【问题标题】：How to find marker position in AFrame using JavaScript?如何使用 JavaScript 在 AFrame 中查找标记位置？
【发布时间】：2018-11-28 17:30:16
【问题描述】：

我正在使用相机和条形码标记。为了让我的大炮射击，我需要在点击时生成一个球体。我尝试使用 .getAttribute('position') 来获取标记位置，但结果令人失望，例如空和[对象，对象]。有没有一种真正的方法可以访问 AFrame 中标记的坐标？到目前为止，它在相机中创建了一个球体，因为它无法找到标记的位置。

Javascript

var sceneEl = document.querySelector('a-scene'); //select scene
    var markerEl = document.querySelector('#cannonMarker');
  // trigger event when button is pressed.
  document.addEventListener("click", function (e) {
    
    var pos = markerEl.getAttribute('position');
    var Sphere = document.createElement('a-sphere');
    
    
    
    Sphere.setAttribute('dynamic-body', {
    shape: 'sphere',
    mass: 4
    });
    
    Sphere.setAttribute('position', pos);
    
    
    
    
    sceneEl.appendChild(Sphere);
    
    console.log('Sphere coordinates:' + pos);
    
    
    
 });

【问题讨论】：

这一行是一个潜在的错误：var sceneEl = document.querySelector('a-scene'); 使用 querySelector 时，如果是类，则需要包含 .，如果是 id，则需要包含 #。由于您没有包含 HTML，我无法确定，但我会先看看那里。附言如果您包含更完整的代码，我们将能够更快/更准确地帮助您。欢迎来到 SO :)

标签： javascript jquery aframe

【解决方案1】：

只要标记被识别并且引用正确

markerEl.getAttribute('position')

应该返回当前标记位置。

如果您的脚本位于<head> 元素中，则执行代码时该标记可能还不存在。

将代码放入框架组件中是个好主意：

HTML：

<a-scene ball-spawner></a-scene>

js:

AFRAME.registerComponent('ball-spawner', {
  init: function() {
  // your code here - the scene should be ready
  }
})

我对您的代码做了一些修改（working glitch here）：

var sceneEl = document.querySelector('a-scene'); //select scene
var markerEl = document.querySelector('a-marker');
// trigger event when button is pressed.
sceneEl.addEventListener("click", function (e) {
   if (markerEl.object3D.visible === false) {
     return;
   }
   var pos = markerEl.getAttribute('position');
   var Sphere = document.createElement('a-sphere');
   Sphere.setAttribute('radius', 0.5)
   Sphere.setAttribute('dynamic-body', {
      shape: 'sphere',
      mass: 4
   });
   Sphere.setAttribute('position', pos);
   sceneEl.appendChild(Sphere);
   });
  }

当标记离开视线时，它的位置是“最后记住的”。所以它在屏幕上的同一个地方。这就是为什么在标记元素不可见时会有return 的原因。

它似乎可以按照您的意愿工作，因为球从标记上的透明盒子中掉出来（盒子是确保标记被识别的好方法）：

【讨论】：

非常感谢您的努力，但是当我运行代码时，它并没有将球体放置在相同的标记点上，而是在有意义的情况下与屏幕相关。有没有办法在 AFrame 中获得 vec3 的世界位置？
在我的示例中，球体是在白框中创建的吗？我在 chrome pc 和 ff android 上试过。要获得 vec3 世界位置，您需要使用三个 localToWorld
@PiotrAdamMilewski 你能用三个 lcoalworld 更新答案吗？我努力了也没用