简介
WebXR 是一种基于 Web 技术开发虚拟现实、增强现实、混合现实应用的开发标准，提供了一套 API，使得在浏览器中构建 XR 应用更加容易。WebXR CLI 是一个 npm 包，提供了一些工具和模板，帮助开发者更容易地构建 WebXR 应用。
安装
首先在命令行中安装 webxr-cli：
npm install -g webxr-cli
如果你遇到了权限问题的话，可以在前面加 sudo。
当安装完成，通过命令行输入 webxr-cli，可以看到所有可用的命令列表：
webxr-cli [command]
创建一个示例应用程序
下面我们来尝试创建一个简单的原生 WebXR 应用程序。
首先，在终端上创建一个新目录并进入其中：
mkdir my-webxr-app cd my-webxr-app
然后使用 init 命令，创建一个最小的 WebXR 应用程序：
webxr-cli init
然后选择要创建的模板。在这个例子中，我们选择 "Native (WebXR API)"。
这个命令将创建一个 index.html 文件和一些附加文件。
现在，打开 index.html 文件，找到以下 HTML 块：
<!-- `ar|vr` is the mode, which we can change below --> <xr-scene ar|vr> <xr-light></xr-light> <!-- Add meshes or other components here. --> </xr-scene> <script src="index.js"></script>
这里是一个 XR 场景，里面有一个点光源。你可以在场景中添加一些几何体或其他组件。
接下来，打开 index.js 文件并找到以下代码块：
const scene = document.querySelector('xr-scene');这里会获取 xr-scene 元素并将其存储在 scene 变量中。
造成不良影响的一个常见错误是，xhr 请求文件，例如 .glb 文件，可能无法正确获取。在这种情况下，可以添加以下代码块：
THREE.DefaultLoadingManager.onLoad = () => {
scene.renderer.xr.enabled = true;
};这里启用了 renderer 的 xr，在加载完成后。
现在的应用程序已经可以在支持 WebXR API 的浏览器中预览：
webxr-cli serve
在浏览器中打开 http://localhost:8000/，它将启动本地服务器并在默认浏览器中打开该应用程序。
发布应用程序
要将应用程序发布到 WebXR 中，可以将 WebXR 代码部署到 GitHub Pages 上。
可以通过执行以下命令部署 WebXR 应用程序：
webxr-cli deploy
这将在 GitHub Pages 上创建一个新的分支，并将应用程序推送到该分支。
结论
webxr-cli 是一个非常有用的 npm 包，它能够为 WebXR 应用程序的开发提供很大的帮助。在这篇文章中，我们详细介绍了如何通过 webxr-cli 创建一个原生 WebXR 应用程序。希望上述内容对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005671281e8991b448e35b8