教程：使用 Babylon.js 创建第一个 WebXR 应用程序

  • 项目

本教程将介绍如何使用 Babylon.js 和 Visual Studio Code 创建基本混合现实应用。 要生成的应用将呈现一个立方体，使您可以旋转它以将其他面呈现在视野中，并添加交互。 本教程介绍如何执行下列操作：

  • 设置开发环境
  • 用于创建基本 3D 元素的 Babylon.js API
  • 新建网页
  • 与 3D 元素交互
  • 在 Windows Mixed Reality 模拟器中运行应用程序

先决条件

使用入门

若要从头开始创建此项目，请首先创建一个 Visual Studio Code (VSCode) 项目。

注意

使用 VSCode 不是强制要求，但为了方便起见，我们将在本教程中使用它。 更有经验的 JavaScript 开发人员可以使用他们选择的其他编辑器，即使是最简单的记事本也可以。

  1. 下载 Babylon.js 单个文件，或使用 Babylon.js 官方网站上提供的联机版本。 还可以从 GitHub 克隆整个 Babylon.js 项目

  2. 创建一个空文件并将其另存为 html 页面，例如index.html

  3. 创建基本 html 标记并引用 Babylon.js javascript 文件。 最终代码如下所示：

    <html>
    <head>
        <title>Babylon.js sample code</title>
        <script src="https://cdn.babylonjs.com/babylon.js"></script>
    </head>
<body>
</body>
</html>

  4. 在 body 中添加 canvas HTML 元素，以呈现 Babylon.js 内容。 请注意，canvas 具有 id 属性，可让您稍后通过 JavaScript 访问此 HTML 元素。

    <html>
    <head>
        <title>Babylon.js sample code</title>
        <script src="https://cdn.babylonjs.com/babylon.js"></script>
        <style>
            body,#renderCanvas { width: 100%; height: 100%;}
        </style>
    </head>
<body>
    <canvas id="renderCanvas"></canvas>
</body>
</html>

  5. canvas 占据整个网页。 网页到此就完成了。 现在，网页已准备就绪。 您可以在任何浏览器中打开它，并确保没有显示任何错误，但目前还没有沉浸式体验。

后续步骤

下一教程：2. 准备场景