使用AR.js打造WebAR入门课程（三）——基于地理位置的示例

最新推荐文章于 2024-05-11 10:05:47 发布

胡晓天o0

最新推荐文章于 2024-05-11 10:05:47 发布

阅读量1.4k

点赞数 1

分类专栏： ar.js 前端笔记文章标签： ar ar.js 增强现实前端

本文链接：https://blog.csdn.net/qq_24127447/article/details/115869510

版权

前端笔记同时被 2 个专栏收录

6 篇文章 2 订阅

订阅专栏

ar.js

5 篇文章 11 订阅

订阅专栏

前面的两篇文章都是写的关于基于图像的示例，这一篇文章来写一下基于地理位置的示例。

基于地理位置也很好理解，就是通过经纬度来确定目标点，然后在目标点显示你想要的的东西。

首先还是直接放一下官方的示例代码，在代码里面我会标记出来一些解释。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>GeoAR.js demo</title>
    <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
    <script src="https://unpkg.com/aframe-look-at-component@0.8.0/dist/aframe-look-at-component.min.js"></script>
    <!-- 在这里我把这个js文件的路径更改成了本地的，因为官方示例的这个js文件没有梯子访问不到，文件具体的获取方式可以看下我前面的两篇文章（直接在github上面下载下来就行了） -->
    <script src="js/aframe-ar-nft.js"></script>
  </head>

  <body style="margin: 0; overflow: hidden;">
    <a-scene
      vr-mode-ui="enabled: false"
      embedded
      arjs="sourceType: webcam; debugUIEnabled: false;"
    >
        <!-- 下面的gps-entity-place指的就是经纬度，尽量精确一些，手机上面自带的指南针获取到的经纬度都不太精确，我用了一个第三方软件叫做“经纬度定位”，类似的软件有不少，大家可以自己找一下 -->
      <a-text
        value="This content will always face you."
        look-at="[gps-camera]"
        scale="120 120 120"
        gps-entity-place="latitude: 38.9414000; longitude: 117.2820480;"
      ></a-text>
      <a-camera gps-camera rotation-reader> </a-camera>
    </a-scene>
  </body>
</html>

使用这个示例代码，部署到https服务器上面，移动到经纬度所标记的位置，就会发现有一行字，也就是上面的代码中的“value”所对应的值。

官方的这个示例代码还是很简单的，后面的一篇文章会更加详细的讲解一下基于地理位置更多一点的使用。

胡晓天o0

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
使用AR.js打造WebAR入门课程（三）——基于地理位置的示例

前面的两篇文章都是写的关于基于图像的示例，这一篇文章来写一下基于地理位置的示例。基于地理位置也很好理解，就是通过经纬度来确定目标点，然后在目标点显示你想要的的东西。首先还是直接放一下官方的示例代码，在代码里面我会标记出来一些解释。<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content
复制链接

扫一扫