# 参考

[html5 调用摄像头实例](https://blog.csdn.net/binquan_liang/article/details/79489989)

[H5 实现调用本地摄像头实现实时视频以及拍照功能](https://blog.csdn.net/c_kite/article/details/78536451)

[较新：H5 摄像头(新版浏览器 https)(兼容老版浏览器) html5 调用摄像头](https://blog.csdn.net/tanzongbiao/article/details/118314864)

[⭐️ 配置一个 https 的测试环境(nodejs)]https://www.jianshu.com/p/85f475b2155f

https://www.jianshu.com/p/3e6292233b5a

[如何使用 JavaScript 的 getUserMedia（）访问前后摄像头](https://blog.csdn.net/cukw6666/article/details/107985689)

[h5 js 调起摄像头进行拍照或录像，通过 canvas 对图像进行处理显示](https://blog.csdn.net/ruiti/article/details/103168228)

[MDN 权威](https://developer.mozilla.org/zh-CN/docs/Web/API/MediaDevices/getUserMedia)

[MediaDevices.getUserMedia()的部分坑和解决方案](https://blog.csdn.net/weixin_43864427/article/details/105782611)

[HTML5 指南针](https://blog.csdn.net/weixin_30242907/article/details/99407228)

[h5 写的指南针(DeviceOrientation )，调用手机罗盘,可以转动](https://blog.csdn.net/weixin_39644462/article/details/81126952)

[利用 h5,chart.js 监测手机三轴加速度，用以研究计步算法等](https://blog.csdn.net/weixin_33698823/article/details/89043585)

[在 IOS 中 DeviceMotion 及 DeviceOrientation 事件不触发的问题](https://blog.csdn.net/greenwishing/article/details/90258584)

[IOS 重力感应失效，DeviceMotion 及 DeviceOrientation 事件不触发](https://www.pianshen.com/article/27701689113/)

# 参考

[如何使用小程序的 AR 能力？官方](https://developers.weixin.qq.com/community/develop/doc/00004cead482c0c2c139b75fa51009?highLine=AR)

[陀螺仪和传感器](https://blog.csdn.net/yxx_bk/article/details/79979025)

[陀螺仪和电子罗盘的区别？](https://www.zhihu.com/question/23667945)

[ar demo](https://developers.weixin.qq.com/community/develop/article/doc/0002c602dbc4b088951ba11845b013)

[AR 导航的几种实现思路](https://juejin.cn/post/6844904030766891022)

[图片作为 Three.js 背景](http://www.yanhuangxueyuan.com/doc/Three.js/sceneBackground.html)

[关于陀螺仪 deviceorientation](https://segmentfault.com/a/1190000007183883)

# 需要处理

## 地图缩放到合适位置

https://github.com/mrdoob/three.js/pull/14526a

# 小程序相关

https://developers.weixin.qq.com/miniprogram/dev/platform-capabilities/extended/utils/api-typings.html

[threejs-miniprogram](https://github.com/wechat-miniprogram/threejs-miniprogram)

[小程序中使用 three.js](https://developers.weixin.qq.com/community/develop/article/doc/00066c4b230b085051592292f5bc13)

[](https://www.cnblogs.com/xuejiangjun/p/11815650.html)

[cover-view](https://developers.weixin.qq.com/miniprogram/dev/component/cover-view.html)

[three-platformize](https://github.com/deepkolos/three-platformize)

[wx_threeJs_project](https://github.com/ZoeLeee/wx_threeJs_project)

# 理解

视角跟随（一般来说会采用这种模式，视角跟随的话，箭头就会一直保持向上，然后旋转地图）
路线朝前（地图不动）
北向上（北方向一直向上，）

## 目前地图渲染到手机是北向上，所以只要判断罗盘仪的北方向需要和地图一致，那么就是正确的位置，否则需要做地图的旋转或者指标的旋转

## 目前地图的坐标是毫米，如果换算成米，就和实际的地图一致了，这样子 ar 也就真实了。要注意蓝牙定位返回的用户位置是什么单位的

z 为人的身高，目前定 2m

## 地图需要倾斜一定的角度，然后在路网上面绘制箭头，箭头应该是 mesh 来绘制的

## 地图不需要旋转，但是需要平移，中心点移动到用户所在的位置，这样子才能在地图上正确指路

## AR 状态下需要用户抬起手机，来录像前方，所以这块需要传感器的判断

# ⭐️⭐️⭐️ 计步器矫正算法！！！

蓝牙位置只是用来矫正而已，真正的移动是靠加速度传感器和罗盘来确定的

逻辑：
蓝牙给到第一个位置，用户获取到之后就不要动，
后面都靠用户行走加速度判断移动的，期间会一直保持获取蓝牙的位置，判断如果和蓝牙偏离太远，就直接把用户的点移过去。

# 如果绘制路网大箭头

[如何在 three.js 中设置网格大小以适应视口高度和屏幕？](https://stackoverflow.com/questions/62965903/how-to-set-mesh-size-to-fit-the-viewport-height-and-screen-in-three-js)

[THREE.JS：根据相机和屏幕上的对象位置获取对象大小](https://stackoverflow.com/questions/15331358/three-js-get-object-size-with-respect-to-camera-and-object-position-on-screen)
