前言
Voxel Fly 是一个为 WebVR 设计的 JavaScript 库，它可以使用户创建一个简单的类飞行游戏。Voxel Fly 在 GitHub 上的源代码是开源的，并且Webpack和借助Three.js来创建一个具有多种功能的网络游戏。在本文中，我们将学习如何使用 Voxel Fly 去构建一个简单的飞行游戏。
准备工作
使用 Voxel Fly 创建一个飞行游戏的开发环境需要安装以下软件：
为了简化起见，本教程将使用Create React App作为实现 React 应用的开发环境。
安装 Create React App 会自动安装 Node.js 和 npm。创建新的项目并切换到项目根目录。在 命令行中输入以下命令：
npx create-react-app voxel-fly-game cd voxel-fly-game
安装 Voxel Fly 库
在控制台输入以下命令以依赖项的方式安装 Voxel Fly 到我们的项目中：
npm install voxel-fly
我们还需要最新的版本的 Three.js 库，以便 Voxel Fly 能够嵌入到我们的 React 应用程序中。在我们的控制台中，我们可以使用以下命令：
npm install three现在我们可以开始操作 Voxel Fly 库来实现飞行效果。
创建游戏场景
在你的 React 项目中，创建一个名为 game.js 的新文件，并添加以下内容：
-- -------------------- ---- ------- ------ - -- ----- ---- -------- ------ - -------- - ---- ------------ ----- ---- - ------------- - ------------- - ----- ----------- - ----- ---------- - ----- ---------- - ------------------ ----------- - ------------------- ---------- - --- -------------- ------------- - --- ----------- ------------- - ------- - -- ----- ------------- - --- --------------------- ------ ---- --- ----------------------------------------------------- --------------------------------- ------------- ---------------------------------------------------- -- ---- ----------- - --- --------------------------- ---------- - ------------ -- ------ --------------------------- -- ---- -- ---- ---------- - --- -------------- -- -- ----- --- ---- ------------------------------ -- ------ -------------- - -------- - ----- ----- - ---------------------- ---------------------------- -------------------------------- ------------- ------------------------ -- --------------- - - ------ ------- -----展开代码
首先，我们从 Three.js 中导入依赖项，包括 WebGLRenderer、PerspectiveCamera 和 Scene。然后，我们使用 Voxel Fly 的 VoxelFly 类创建一个新的 Voxel Fly 实例。我们还添加了 Clock 对象和 update() 方法来处理游戏中的任何更新循环。
在 setup() 函数中，我们创建并设置一个新的 WebGLRenderer 和一个 PerspectiveCamera。PerspectiveCamera 确定了场景创景，允许相机直接对准游戏内容。向上移动相机允许我们从上方观察 3D 场景。我们还将相机放置在 (0, 3, 10) 的位置上。
最后，我们将 VoxelFly 附加到 Three.js 的 Scene 中，其中包含了实际场景的物体、光线和相机位置。而且我们第一次渲染界面并开启更新循环。
创建方块
现在我们有一个基础的场景，我们可以向其添加模型和其它任何需要的交互元素。我们将在这里添加一些方块来逐渐创建出一个实时游戏所需的元素。
在 game.js 文件中的 setup() 函数中添加以下代码：
// 创建方块 const geometry = new THREE.BoxGeometry(1, 1, 1); const material = new THREE.MeshBasicMaterial({ color: 0xffffff }); const cube = new THREE.Mesh(geometry, material); // 将方块添加到场景中 this.scene.add(cube);
我们使用 Three.js 中的 BoxGeometry 类来创建立方体，再使用 THREE.MeshBasicMaterial 类来指定材质。在 THREE.Mesh 类中创建一个新的 Mesh 实例并将其添加到场景中。
我们在项目中添加的第一个方块是一个简单的白色立方体。
开始飞行
我们现在有了渲染引擎和场景设置，我们可以开始实现 Voxel Fly 的飞行动画。在 game.js 文件中添加以下代码：
// 开始 Voxel Fly 飞行动画 const fly = Promise.promisify(this.voxelFly.fly.bind(this.voxelFly)); fly().then(() => { console.log('Voxel Fly: 导航开始'); });
使用 Voxel Fly 中的 fly() 方法来开始飞行动画。fly() 返回一个 Promise 以便在完成后执行相应的操作。在这个例子中，我们简单地打印控制台消息，告诉我们游戏已经启动。
在 React 应用程序中集成游戏场景
我们现在有了一个用于渲染 Voxel Fly 游戏场景的 Game 类。我们需要将其集成到 React 应用程序中。我们将创建一个组件来展示 Game 类的输出，而且我们将加载此组件时自动启动游戏。
添加一个新文件 GameScreen.js 到你的项目中，该文件的内容如下：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ ---- ---- --------- ----- ---------- ------- ------------------- - ------------------- - --- ------- - -------- - ------ - ---- ------------------- -- -- - - ------ ------- -----------展开代码
我们在 componentDidMount() 中实例化上面的 Game 类，而在 render() 中设置了一个 <div> 元素，它将容纳我们的游戏场景元素。如果你现在在浏览器环境中运行你的 React 应用程序，你将看到一个空白的页面，因为我们还没有将其与 React 应用程序集成。
为此，我们将在 App.js 文件中添加以下代码：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ ------------ ------ ---------- ---- --------------- -------- ----- - ------ - ---- ---------------- ----------- -- ------ -- - ------ ------- ----展开代码
这应该足够了！现在，我们的 Voxel Fly 游戏场景将嵌入到 React 应用程序中的 <div id="game-container" /> 元素中。
现在，我们可以使用 npm start 命令来启动React 应用程序并开始我们的 Voxel Fly 游戏。出于测试目的，你可以试图添加多个方块，并随着 Voxel Fly 飞行过程中，你可以跟踪游戏的进展。
结论
在这篇文章中，我们介绍了如何使用 Voxel Fly 库来构建简单的飞行游戏。我们涵盖了如何在创建游戏场景之前为 React 应用程序设置各种依赖项，如何创建游戏场景以及实现动画效果，最后将其嵌入到 React 应用程序中。
此外，你还可以在 Voxel Fly GitHub 中找到更多关于此库的信息。如果你正在构建 3D WebVR 游戏和应用程序，Voxel Fly 可以大大简化整个过程。因此，我们可以使用所学的知识创建出更复杂和更漂亮的游戏场景。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f2a70643b0ab45f74a8baf0
