Three.js游戏开发入门

迷茫之鹰

pc2g,电脑好游戏 以下文字转载自http://www.bimant.com/blog/threejs-game-dev-tutorial/

推荐：用 NSDT设计器 快速搭建可编程3D场景。

                                    就在不久前，创建和部署游戏的唯一方法是选择像 Unity 或 Unreal 这样的游戏引擎，学习语言，然后打包游戏并将其部署到你选择的平台上。
试图通过浏览器向用户提供游戏的想法似乎是一项不可能完成的任务。
幸运的是，由于浏览器技术的进步和硬件加速在所有流行的浏览器中都可用，JavaScript 性能的改进以及可用处理能力的稳步提高，为浏览器创建交互式游戏体验变得越来越普遍。
在本文中，我们将了解如何使用 Three.js 创建游戏。但首先，让我们回顾一下 Three.js 是什么以及为什么它是游戏开发的好选择。
1、Three.js是什么？Three.js 在 GitHub 上的项目描述恰当地将 Three.js 描述为“......一个易于使用、轻量级、跨浏览器的通用 3D 库”。
Three.js 让我们作为开发人员可以相对简单地在屏幕上绘制 3D 对象和模型。如果没有它，我们将需要直接与 WebGL 交互，虽然这并非不可能，但即使是最小的游戏开发项目也会花费大量时间。
传统上，“游戏引擎”由多个部分组成。例如，Unity 和 Unreal 提供了一种将对象渲染到屏幕上的方法，但也提供了大量其他功能，如网络、物理等等。
然而，Three.js 的方法更受限制，不包括物理或网络之类的东西。但是，这种更简单的方法意味着它更容易学习和更优化以做它最擅长的事情：将对象绘制到屏幕上。
它还有一组很棒的示例，我们可以使用它们来了解如何在屏幕上绘制各种对象。最后，它提供了一种简单且原生的方式将我们的模型加载到我们的场景中。
如果不希望用户需要通过应用商店下载应用或进行任何设置来玩你的游戏，那么Three.js 作为游戏开发引擎可能是一个有吸引力的选择。如果你的游戏在浏览器中运行，那么进入门槛最低，这只能是一件好事。
2、使用 Three.js 创建游戏今天，我们将通过制作一个使用着色器、模型、动画和游戏逻辑的游戏来浏览 Three.js。我们将创建的内容如下所示：
这个概念很简单。我们控制着一艘火箭飞船，穿越一个星球，我们的目标是拾取能量晶体。我们还需要通过增加护盾来管理飞船的健康状况，并尽量不要因为撞击场景中的岩石而严重损坏我们的船。
在我们的运行结束时，火箭飞船返回天空中的母舰，如果用户点击NEXT LEVEL，他们会再次尝试，这一次火箭要经过更长的路径。
随着用户玩游戏，火箭飞船的速度会增加，因此他们必须更快地躲避岩石并收集能量晶体。
要创建这样的游戏，我们必须回答以下问题：

• 我们怎样才能让一艘火箭飞船在一片汪洋大海上永远向前移动？
• 我们如何检测火箭飞船与物体之间的碰撞？
• 我们如何创建一个在桌面和移动设备上都可以使用的 UI？
  

到我们制作这款游戏​​时，我们将克服这些挑战。
不过，在我们开始编码之前，我们必须回顾一些简短的理论，特别是与我们将如何在游戏中创造运动感有关。

迷茫之鹰

2、创造运动感想象一下，你在现实生活中控制着一架直升机，并且正在跟踪地面上的一个物体。物体以逐渐增加的速度继续前进。为了跟上，你必须逐渐提高你所在直升机的速度。
如果对直升机或地面上的物体的速度没有限制，只要你想跟上地面上的物体，这种情况就会持续下去。
当创建一个跟随对象的游戏时，正如我们在本例中所做的那样，应用相同的逻辑可能很诱人。也就是说，在世界空间中随着物体的加速移动物体，并更新后面跟随的相机的速度。然而，这提出了一个直接的问题。
基本上，每个玩这个游戏的人都会在他们的手机或台式电脑上玩它。这些设备资源有限。如果我们尝试在相机移动时生成可能无限数量的对象，然后移动该相机，最终我们将耗尽所有可用资源，并且浏览器选项卡将变得无响应或崩溃。
我们还需要创建一个代表海洋的平面（一个平面 2D 对象）。当我们这样做时，我们必须给出海洋的尺寸。
然而，我们不能创建一个无限大的平面，我们也不能创建一个巨大的平面，只是希望用户永远不会在我们的关卡中前进到足以让他们离开平面的程度。
那是糟糕的设计，并且希望人们玩我们的游戏不足以体验错误似乎违反直觉。
3、有限范围内的无限运动我们不是在一个方向上无限期地移动我们的相机，而是让相机保持静止并移动它周围的环境。这有几个好处。
一是我们总是知道火箭飞船在哪里，因为火箭的位置不会移到远处；它只会左右移动。这让我们很容易判断物体是否在相机后面，并且可以从场景中移除以释放资源。
另一个好处是我们可以选择远处的一个点来创建对象。这意味着当物体接近玩家时，新的物品或物体将不断地在玩家视野之外的距离创建。
当它们从视野中消失时，无论是玩家与它们发生碰撞还是从玩家身后消失，这些物品都会从场景中移除，以降低内存使用量。
要创建这种效果，我们需要做两件事：首先，我们需要在程序上沿深度轴移动每个项目，以将对象移向相机。其次，我们必须为我们的水面提供一个可以抵消的值，并随着时间的推移增加这个偏移量。
这将产生水面移动越来越快的效果。
现在我们已经解决了如何在场景中向前移动火箭，让我们继续设置我们的项目。
4、游戏项目配置让我们开始制作游戏吧！我们需要做的第一件事是设置构建环境。对于这个例子，我选择使用 Typescript 和 Webpack。这篇文章不是要讨论这些技术的有点，所以除了快速总结之外，我不会在这里详细介绍它们。
使用 Webpack 意味着当我们开发项目并保存文件时，Webpack 将看到我们的文件已更改，并使用保存的更改自动重新加载浏览器。
这意味着我们无需在每次进行更改时手动刷新浏览器，从而节省大量时间。这也意味着我们可以使用像three-minifier这样的插件，它可以在我们部署它时减小我们的包的大小。
在我们的示例中使用 TypeScript 意味着我们的项目将具有类型安全性。我发现这在使用 Three.js 的一些内部类型时特别有用，比如Vector3s 和Quaternions. 知道我将正确类型的值分配给变量是非常有价值的。
我们还将在 UI 中使用Materialize CSS。对于我们将用作 UI 的几个按钮和卡片，这个 CSS 框架将有很大帮助。
要开始我们的项目，请创建一个新文件夹。在文件夹中，创建一个package.json并粘贴以下内容：
{  "dependencies": {    "materialize-css": "^1.0.0",    "nipplejs": "^0.9.0",    "three": "^0.135.0"  },  "devDependencies": {    "@types/three": "^0.135.0",    "@yushijinhun/three-minifier-webpack": "^0.3.0",    "clean-webpack-plugin": "^4.0.0",    "copy-webpack-plugin": "^9.1.0",    "html-webpack-plugin": "^5.5.0",    "raw-loader": "^4.0.2",    "ts-loader": "^9.2.5",    "typescript": "^4.5.4",    "webpack": "^5.51.1",    "webpack-cli": "^4.8.0",    "webpack-dev-server": "^4.0.0",    "webpack-glsl-loader": "git+https://github.com/grieve/webpack-glsl-loader.git",    "webpack-merge": "^5.8.0"  },  "scripts": {    "dev": "webpack serve --config ./webpack.dev.js",    "build": "webpack --config ./webpack.production.js"  }}然后，在命令窗口中，键入npm i以将包安装到新项目中。


GIT仓库源码https://github.com/flutterfromscratch/threejs-rocket-game
更详细教程请访问http://www.bimant.com/blog/threejs-game-dev-tutorial/