时间戳

首页 > 解决方案 > AR.js 是否可以更新 gps-entity-place 的位置？

ar.js - AR.js 是否可以更新 gps-entity-place 的位置？

问题描述

AR.js 中是否可以通过修改其经度和纬度来移动放置在 gps-entity-place 的对象？

我试图更改实体的属性“gps-entity-place”。它第一次工作，但之后失败。

标签： ar.js

解决方案

gps-entity-place是只读属性

具有只读属性的实例化对象必须在显示它们之前准备好：

  • 通过 HTTPS 提供要点。
  • geolocation不是很准确，这里的改进可以改善场景放置。
  • createAttribute可用于非标准属性，带有连字符，如gps-entity-place.
  • gps.value用于在与 一起应用它们之前设置值setAttributeNode。
  • 调整文本，即position="[-l 0 +r] [-lower 0 +higher] [-front 0 +behind]"向左、垂直和远离。welcome-300-150
  • 使用这种快速而肮脏的估计来定位世界空间中的测试实体。

演示：markerless.html

在控制台中，实体a-scene显示markerless.html设备位置 AR：

<!doctype html>
<html>

<head>
  <link rel="canonical" href="https://inspiredlabs.github.io/ar.js/markerless.html" />
  <!-- location based aframe v0.9.2 -->
  <script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script>
  <script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar-nft.js"></script><!-- debug -->
  <script>
    const log = console.log;
    window.onload = () => {
      let scene = document.querySelector('a-scene'); /* Apply to whole scene */

      if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function (position) {
          let gps = document.createAttribute('gps-entity-place'),
            arjs = document.createAttribute('arjs'),
            welcome = document.getElementById('welcome');

          arjs.value = 'sourceType: webcam; sourceWidth: 1280; sourceHeight: 960; trackingMethod: best; debugUIEnabled: false;';
          gps.value = `latitude: ${position.coords.latitude - 0.001}; longitude: ${position.coords.longitude + 0.001}`;
          log(gps.value);
          scene.setAttributeNode(gps); /* Apply to whole scene */
          scene.setAttributeNode(arjs);
        });
      }

    };
  </script>
</head>
<a-scene vr-mode-ui="enabled: false">
  <a-entity id="wrapper" position="0 -8 0">

    <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9" shadow></a-box>
    <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E" shadow></a-sphere>
    <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D" shadow></a-cylinder>
    <a-plane position="0 0 -5.0" rotation="-90 0 0" width="7" height="7" color="#7BC8A4" shadow></a-plane>

    <a-text id="welcome" value="Welcome" scale="75 75 75" color="#000000" position="-30 0 -150"></a-text>
    <!-- look-at="[gps-camera]" -->

  </a-entity><!-- /wrapper -->

  <a-camera camera="fov: 60;" gps-camera rotation-reader></a-camera>
</a-scene>
</body>
</html>

如果您正在寻找不同的对象方法来创建属性，您可以查看Object.defineProperties().

参考：

推荐阅读