main

分支 (4)

管理

管理

main

index

find

examples

ar
/
w.html

<!DOCTYPE html>
<html>
  <head>
    <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>
  </head>
  <body>
    <a-scene
      vr-mode-ui="enabled: false"
      arjs="sourceType: webcam; videoTexture: true; debugUIEnabled: false"
      renderer="antialias: true; alpha: true"
    >
      <a-camera id="camera" gps-new-camera="gpsMinDistance: 1"></a-camera>
      <a-text
        value="This will always face the user."
        scale="20 20 20"
        gps-new-entity-place="latitude:23.041536; longitude:113.208199"
        geometry="primitive:plane"
      ></a-text>

      <a-entity
        material="color: red"
        geometry="primitive: box"
        gps-new-entity-place="latitude:23.035546; longitude:113.207199"
        scale="20 20 20"
        rotation="-90 0 0"
      ></a-entity>
      <a-entity
        material="color: pink"
        geometry="primitive: box"
        gps-new-entity-place="latitude:23.044533; longitude:113.208007"
        scale="20 20 20"
        rotation="-45 0 0"
      ></a-entity>
      <a-entity
        material="color: pink"
        geometry="primitive: box"
        gps-new-entity-place="latitude:23.044533; longitude:113.208007"
        scale="20 20 20"
        rotation="-45 0 0"
      ></a-entity>
      <a-entity
        material="color: green"
        geometry="primitive: box"
        gps-new-entity-place="latitude:23.039546; longitude:113.206199"
        scale="20 20 20"
      ></a-entity>
    </a-scene>

    <script>
      let text = document.querySelector(".t");
      window.onload = () => {
        let testEntityAdded = false;

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

        el.addEventListener("gps-camera-update-position", (e) => {
          // alert("change!!!");
          // 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: "blue" });
          //   entity.setAttribute("gps-new-entity-place", {
          //     latitude: e.detail.position.latitude - 0.0001,
          //     longitude: e.detail.position.longitude,
          //   });
          //   document.querySelector("a-scene").appendChild(entity);
          // }

          testEntityAdded = true;
        });
      };
      // 获取相机实体
      var camera = document.querySelector("#camera");

      // 每秒更新相机经纬度
      // setInterval(function () {
      //   text.innerHTML = "";
      //   // 获取设备的地理位置信息
      //   navigator.geolocation.getCurrentPosition(function (position) {
      //     // 获取经纬度
      //     var latitude = position.coords.latitude;
      //     var longitude = position.coords.longitude;

      //     // 设置相机经纬度
      //     camera.setAttribute(
      //       "gps-entity-place",
      //       "latitude: " + latitude + "; longitude: " + longitude + ";"
      //     );
      //     text.innerHTML =
      //       "latitude: " + latitude + "; longitude: " + longitude + ";";
      //   });
      //   console.log(888);
      // }, 1000);
    </script>
  </body>
</html>