如何在AR.js中的每个元素上显示distanceMsg

Question

我是使用AR.js的初学者；你能建议我如何在AR.js中的每个元素上显示distanceMsg吗，比如标签上方或下方(或者如果有其他显示方式，你能建议我们吗(

我在AR.js网站上找到了这个，但我不知道如何在每个A-Frame标签上显示。

const distanceMsg = document.querySelector('[gps-entity-place]').getAttribute('distanceMsg');

这是我的脚本代码

window.onload = () => {
const scene = document.querySelector('a-scene');
return navigator.geolocation.getCurrentPosition(function (position) {
loadPlaces(position.coords)
.then((places) => {
places.forEach((place) => {
const latitude = place.location.lat;
const longitude = place.location.lng;
const marker = place.location.mark;
const pin = document.createElement('a-image');
pin.setAttribute('gps-entity-place', `latitude: ${latitude}; longitude: ${longitude}`);
pin.setAttribute('look-at', '[gps-camera]');
pin.setAttribute('name', place.name);
pin.setAttribute('src', `${marker}`);
pin.setAttribute('scale', '2, 2');
pin.addEventListener('loaded', () => window.dispatchEvent(new CustomEvent('gps-entity-place-loaded')));
const clickListener = function(ev) {
ev.stopPropagation();
ev.preventDefault();
const name = ev.target.getAttribute('name');
const el = ev.detail.intersection && ev.detail.intersection.object.el;
if (el && el === ev.target) {
const label = document.createElement('span');
const container = document.createElement('div');
container.setAttribute('id', 'place-label');
label.innerText = name;
container.appendChild(label);
document.body.appendChild(container);
setTimeout(() => {
container.parentElement.removeChild(container);
}, 1500);
}
};
pin.addEventListener('click', clickListener);

scene.appendChild(pin);
});
})
},
(err) => console.error('Error in retrieving position', err),
{
enableHighAccuracy: true,
maximumAge: 0,
timeout: 27000,
}
);
};

非常感谢。

Answer 1

查看通过脚本添加实体的基本原理

看起来你需要使用A帧寄存器组件而不是香草js。非常重要的是要理解并理解这一点，不要试图对这种类型的框架进行挑剔，否则，你可能会断章取义。

这是一个非常精细的框架，基于位置的工作需要做很多事情，所以值得喝杯咖啡，花点时间阅读。

记住：不要像使用传统的2D脚本那样，尝试将A-Frame-related JavaScript放在原始标记中。如果我们这样做，我们将不得不采取特殊措施来确保代码在正确的时间运行。请参阅在正确的时间运行内容脚本