main

分支 (4)

管理

管理

main

index

find

examples

ar
/
test1 copy.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>AR.js A-Frame Location-based</title>
  <script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
  <script type='text/javascript' src='./build/ar-threex-location-only.js'></script>
  <script type='text/javascript' src='./build/aframe-ar.js'></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js"></script>
  <script src="./build/ar.js"></script>
  <script>
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(function (position) {
        var latitude = position.coords.latitude;
        var longitude = position.coords.longitude;
        console.log("Latitude: " + latitude + " Longitude: " + longitude);
      });
    } else {
      console.log("Geolocation is not supported by this browser.");
    }
  </script>
</head>


<body>
  <a-scene vr-mode-ui='enabled: false' arjs='sourceType: webcam; videoTexture: true; debugUIEnabled: false'
    renderer='antialias: true; alpha: true'>
    <a-camera gps-new-camera='gpsMinDistance: 5'></a-camera>
    <a-entity material='color: green' geometry='primitive: box'
      gps-new-entity-place="latitude:23.055576827870016; longitude:113.21156611504323" scale="10 10 10"></a-entity>
  </a-scene>
  <script>
    window.onload = () => {
      let testEntityAdded = false;

      const el = document.querySelector("[gps-new-camera]");

      el.addEventListener("gps-camera-update-position", e => {
        if (!testEntityAdded) {
          alert(`Got first GPS position: lon ${e.detail.position.longitude} lat ${e.detail.position.latitude}`);
          // Add a box to the north of the initial GPS position
          const entity = document.createElement("a-box");
          entity.setAttribute("scale", {
            x: 20,
            y: 20,
            z: 20
          });
          entity.setAttribute('material', { color: 'green' });
          entity.setAttribute('gps-new-entity-place', {
            latitude: e.detail.position.latitude + 0.001,
            longitude: e.detail.position.longitude
          });
          document.querySelector("a-scene").appendChild(entity);
        }
        testEntityAdded = true;
      });
    };
  </script>
</body>

</html>