上一篇文章只是实现了官网上面的基于位置的示例，这一篇文章稍微进阶一点，来了解一下基于位置的一些参数和怎样自行更换模型。
首先我们先把上一篇文章中的代码贴出来简单解释一下，然后再在这个基础上更改。
<!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>上面比较重要的要解释的标签主要是两个，一个是a-text，另一个就是a-camera，这两个使我们可以控制的两个主要的标签。
首先说a-camera，这个标签是必须要有的，而且只能有一个，大概意思就是摄像机，里面增加了gps-camera代表是基于位置的，这个标签里面的一些属性是可以自己设置的，只不过上面的代码中并没有进行设置，都是采取的默认的，下面把官网翻译后的参数贴出来：
| 参数 | 描述 | 默认值 |
|---|---|---|
| alert | GPS讯号不足时是否显示讯息 positionMinAccuracy | false |
| positionMinAccuracy | 位置信号允许的最低精度 | 100 |
| minDistance | 如果设置，则与用户的距离小于此值的位置不会显示。只允许一个正值。价值以米为单位。 | 0（禁用） |
| maxDistance | 如果设置，则与用户的距离大于此值的位置不会显示。只允许一个正值。价值以米为单位。 | 0（禁用） |
| simulateLatitude | 设置此项可以模拟摄像机的纬度，以帮助进行测试。 | 0（禁用） |
| simulateLongitude | 设置此项可以模拟摄像机的经度，以帮助进行测试。 | 0（禁用） |
| simulateAltitude | 设置此项可以模拟摄像机海拔高度（以米为单位）的高度，以帮助进行测试。 | 0（禁用） |
| gpsMinDistance | 设置此项可以控制摄像机必须移动多远（以米为单位）以生成GPS更新事件。有助于防止由于位置的频繁微小变化而导致“跳出”增强内容。 | 5 |
| gpsTimeInterval | 设置此项可让您控制获取新GPS位置的频率。如果缓存了先前的GPS位置，则如果“年龄”小于此值（以毫秒为单位），则将使用缓存的位置，而不是新的位置。此参数直接传递给Geolocation API的watchPosition()方法。 | 0（始终使用新位置，不缓存） |
大部分时候这些参数我们是不用管的，然后再来说一下a-text这个标签。
这个标签其实就相当于一个实例，这个实例可以是文字，可以是模型，也可以是其他的东西，因为在示例代码里面放的是一串文字，所以就用的a-text这个标签，相同功能的标签还有a-box（正方体），a-entity（模型实体）。这个标签是可以无线添加的，也就是说一个场景中可以有很多个实例。在放置了这些实例之后，只要在标签里面的参数标注好经纬度，也就是想要放置的位置就可以了。
了解了这些之后我们就可以自己放置自己想要的，下面的代码示例我是放置了一串文字，一个正方体和一个模型，大家想要放置别的可以自己更改：
<!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>
<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;"
>
<!-- 模型实例 -->
<a-entity
gltf-model="module/qiche.gltf"
scale="2 2 2"
gps-entity-place="latitude: 37.9414000; longitude: 116.2820480"
position="0 -10 0"
></a-entity>
<!-- 正方体实例 -->
<a-box
material="color: yellow"
gps-entity-place="latitude: 37.9414000; longitude: 116.2820480"/>
<!-- 文字实例 -->
<a-text
value="This content will always face you."
look-at="[gps-camera]"
scale="120 120 120"
gps-entity-place="latitude: 37.9414000; longitude: 116.2820480;"
></a-text>
<a-camera gps-camera rotation-reader> </a-camera>
</a-scene>
</body>
</html>
5999
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
