WebXR

介绍

大家应该都知道 Canvas ，知道 Three.js，但是对 WebXR 技术 了解的人却很少。但是我这里提及一个词 元宇宙，可能就猜到我想说什么了。

我们都知道 虚拟现实-VR，增强现实-AR 这些词。但对前端来说，最主要还是如何通过 前端代码方式来实现，而这里主要技术就是它 WebXR。

我这里不讲元宇宙的相关概念，网上很多文章已经详细介绍，咱程序员直接上干货，下面有几个链接可以点开看下。

• WebXR ：还是老规矩先看 MDN 是如何详细介绍用途 及 相关API。

• 再来看下 GitHub 仓库，里面的介绍和相应源代码。

光看代码，参与感较弱，而且枯燥很多，这里直接放上一些能看到的示例。

点进去第一个示例，此时你的页面和我的应该不一样，他会提示你没有相关工具，就会无法点击。这里先解决第一个问题，如何有一个模拟设备。

这里安装一个插件 WebXR API Emulator，Google应用商店（需漂洋过海），这里就各显神通!

安装好了之后，点击页面的 Enter VR 按钮，可以看到下面的页面

但是无法移动，此时我们的插件就有作用了，当前页面F12，找到 WebXR 这个标签

我们用鼠标点击旋转图中的两个握把或头盔，我们的展示页面就会进行相对应的操作。

如果有小伙伴在看例子中的一些源码部分，可能会注意到引入一个以.gltf后缀名结尾的文件。这个文件它是3D的模型转化成web可识别的模式。如果查看这个文件，则把这个文件所在的文件夹丢到这个能显示 gltf 的页面里即可

总结

这里讲解了元宇宙下前端 WebXR 技术的相关理解和基本示例的查看。

后续的什么技术的优缺点，相关API的使用，目前市场上的应用等，对有兴趣的伙伴可以深入进一步的去学习和研究！