我的美丽
扩增实境一直是我最喜欢的话题。最近，随着硬件和软件的突出改进，我目睹了许多令人惊叹的创造。现在我敢于挑战自己，建立自己的AR项目。
WebAR，我选择你
我想从一个简单的网络应用开始这个项目。灵感来自于MDN Web Docs中提到的WebXR设备API。然而，这些API太新了，兼容性是个大问题。
幸运的是，现在的浏览器和3D模型库真的很方便，性能也很好，所以我们可以保证在不使用新的WebXR API的情况下获得一个体面的结果。
磨练我们的工具
这里是我的工作工具。
- 使用最新的iOS版本的iPhone 12 Pro。
- 在我的iPhone上安装了最新版本的Safari和Chrome App。
- THREE.js r139，这是本文写作时迄今为止THREE.js的最新版本。
- 一个带有HTTPS的Node.js服务器。
第四点是不可缺少的，我将在后面解释。如果你没有一个SSL服务器，你仍然可以在本地设置一个自签名的。我将在参考部分提供一个教程链接。
项目设置
对于任何网络应用，我们都需要一个服务器和一个默认的HTML模板。所以，让我们创建一个 server.js和一个 index.html 分别为***.***
medium.com/media/01ad9…medium.com/media/93cee…
同时我们在css文件夹中创建一个简单的style.css。
现在在终端输入npm start，在手机上打开浏览器，https://{YOUR IP ADDRESS}:3000，记住我们已经启用SSL，所以我们应该使用https。
Sketchfab - 为自己找一个模特
非常感谢Nyilonely公司，他们在Sketchfab上提供了很棒的模型。我为我的项目选择了一只孟加拉猫模型，并将下载的文件保存在models/source文件夹中。
在Sketchfab，你可以免费找到很多高质量的3D模型。然而，请记住要归功于作者，并牢记这些都不是用于商业用途的。
设置一个场景
有四个主要的变量来初始化一个三维世界：场景、相机、灯光和渲染器。因此，让我们创建一个脚本，在 index.html。
axesHelper是可选的。如果你是ThreeJS及其世界的新手，它对你更好地理解模型的呈现方式确实很方便。
现在我们在窗口加载时调用init函数。在
第一个演示
输入npm start并在手机浏览器中打开https://{YOURIP}:{YOUR PORT}。如果一切正常，点击左上方的Start AR按钮。你会看到我们的猫咪模型弹出来我调整了我的快照的大小，但你可以在你的手机上看到你的。
KITTY !
进入相机
任何AR项目的一个重要特征是虚拟和现实世界的结合。因此，我们将不得不访问摄像头并启用它。
我选择使用webcam-easy来启用摄像头。让我们包括它的CDN链接并添加其他变量。更新后的代码将看起来像这样。
让我们再次运行我们的服务器并启用摄像头。
实际有趣的部分
欢呼吧!我们可以看到我们的模型在AR视图中移动。但是还有一件事没有完成--模型被钉在一个固定的位置上，但实际上，模型应该根据我的位置来移动/旋转/缩放。
为了做到这一点，我们将需要从硬件中检索数据。现代智能手机有许多复杂的硬件来收集物理数据。在这个项目中，我需要的数据来自于 陀螺仪.
下面的编码需要基本的矩阵计算和了解陀螺仪的工作原理。让我们跳入代码。
获得对陀螺仪的访问权
第一件事是请求允许使用陀螺仪。我们需要使用DeviceMotionEvent API，而且只有当我们启用SSL时才能使用。这就是为什么我提到SSL服务器是必要的。
如果你不熟悉设备方向，强烈建议你使用Chrome DevTools来玩。这里是链接。
请记住，我是在纵向模式下开发的，默认的角度是0、90、0，分别为α、β和γ。更多细节请访问这个链接。
使用旋转矩阵进行角度操作
请注意handleOrientation和createRotationMatrix。
由于陀螺仪返回的是欧拉角，它是 角度的变化，而不是我们实际沿着某个轴旋转的程度。所以，我先把它们转换为旋转矩阵，在三角函数的帮助下，我们可以得到累积的数值。这些值正是我们旋转的程度。
我已经写了另一篇文章来讨论这个机制。强烈建议你看一下。
用角度旋转我的模型
让我们专注于totalRightAngularMovement和totalTopAngularMovement。它们是我的相机沿y轴和x轴旋转的程度，分别来自β和gamma值。
此外，为了获得一个更稳定的结果，我对这些角度值进行了钳制。让我们看看animate函数中发生了什么。
现在我们知道totalRightAngularMovement是我们旋转了多少度。我通过定义一个范围来夹紧这个值。
最后的结果
kitty动画
未来的工作
初步结果可以成功地展示我的想法。然而，还有很多需要改进的地方。
- 在移动摄像机时平移/缩放我的模型--对于一个更好的AR项目来说，展示我们如何与虚拟模型互动是很重要的。
- 处理模型的突然位移--我认为这是因为传感器数据带来了噪音，导致不希望的模型移动。
- 使用更稳定的数据源--如果设计一个更精细的AR项目，传感器数据并不可靠，也不全面。我认为我可以使用其他的数据源，如GPS来优化我的实现。
最后的话
你可以在这里查看我的源代码。如果你喜欢我的工作，请在我的repo上留下一颗星，并为这篇文章鼓掌。
谢谢您的支持。编码愉快!
参考资料
- www.sitepoint.com/using-devic…
- stackoverflow.com/questions/3…
- en.wikipedia.org/wiki/Gyrosc…
- sketchfab.com/3d-models/b…
- github.com/nicferrier/…
- blog.devgenius.io/gimbal-lock…
让我们用JavaScript创建你的第一个WebAR项目》最初发表在《Dev Genius》杂志上，人们通过强调和回应这个故事来继续对话。
