开发一个基于WEB的AR应用

AR.js

AR.js 是用于 Web 增强现实的轻量级库，具有图像跟踪、基于位置的 AR 和标记跟踪等功能。

github 地址 : https://github.com/AR-js-org/AR.js 文档: https://ar-js-org.github.io/AR.js-Docs/

基于位置的AR

gps-camera 组件

场景中允许一个该对象,将该对象绑定到 camera 实体.用于捕捉设备的运动和摄像机进行关联,处理旋转位置等变化.

<a-camera gps-camera rotation-reader></a-camera>

rotation-reader 用于处理旋转事件.参考AFrame文档 https://aframe.io/docs/0.9.0/components/camera.html#reading-position-or-rotation-of-the-camera

gps-entity-place 组件

场景中允许多个该组件.该组件定义定义了实体的GPS位置,当设备指向物体时显示该实体,如果比较远则显示的比较小,太远了则会隐藏该组件.

<a-box material="color: yellow" gps-entity-place="latitude: <your-latitude>; longitude: <your-longitude>"/>

使用Aframe的position属性可以指定该实体的高度信息,单位米. <a-box material="color: yellow" gps-entity-place="latitude: <your-latitude>; longitude: <your-longitude>" position="0 30 0"/>

添加自定义属性

const distanceMsg = document.querySelector('[gps-entity-place]').getAttribute('distanceMsg');
console.log(distanceMsg);   // "890 meters"

「真诚赞赏，手留余香」

aframe andrew-ng arduino blockchain cgi consul docker eth ethereum evm feign flask golang hw java javascript jpa js k8s kubernetes linux mac machine-learning math mysql nginx op opentcv ops poco pptp python rd spring springboot ssl thymeleaf type vagrant vpn vue webrtc workflow 技术文章新浪博客无聊生活生活记录股票运维