学习资料1：https://pan.baidu.com/s/17c91OQcsIyeXvEOrlfGsKg 提取码: svpc 学习资料2：https://share.weiyun.com/QL6JqNUT 密码：hi8h6m

Three.js最早由西班牙的Ricardo Cabbello Miguel 开发，是JavaScript编写的WebGL第三方库,提供了非常多的3D显示功能。这里面提到的WebGL，通俗的说，其给我们提供了一系列的图形接口，能够让我们通过 JavaScript（网页端）去使用 GPU 来进行浏览器3D图形渲染。

Three.js 在 GitHub 上的项目描述恰当地将 Three.js 描述为“…一个易于使用、轻量级、跨浏览器的通用 3D 库”。 Three.js 让我们作为开发人员可以相对简单地在屏幕上绘制 3D 对象和模型。如果没有它，我们将需要直接与 WebGL 交互，虽然这并非不可能，但即使是最小的游戏开发项目也会花费大量时间。 传统上，“游戏引擎”由多个部分组成。例如，Unity 和 Unreal 提供了一种将对象渲染到屏幕上的方法，但也提供了大量其他功能，如网络、物理等等。 然而，Three.js 的方法更受限制，不包括物理或网络之类的东西。但是，这种更简单的方法意味着它更容易学习和更优化以做它最擅长的事情：将对象绘制到屏幕上。 它还有一组很棒的示例，我们可以使用它们来了解如何在屏幕上绘制各种对象。最后，它提供了一种简单且原生的方式将我们的模型加载到我们的场景中。 如果不希望用户需要通过应用商店下载应用或进行任何设置来玩你的游戏，那么Three.js 作为游戏开发引擎可能是一个有吸引力的选择。如果你的游戏在浏览器中运行，那么进入门槛最低，这只能是一件好事。

接下来我将介绍 Three.js，Three.js 是一个功能强大的 WebGL 框架，提供了丰富的 API 用于创建和渲染 3D 图形，接下来让我们通过Three.js来一步步揭开WebGL的神秘面纱吧！ 第一步：引入Three.js库 下载并引入Three.js库 首先，我们需要下载Three.js库。您可以选择通过以下方式获取：

1. 官方网站下载： 访问 Three.js官方网站，在页面上找到并下载最新版本的Three.js库。

2. CDN引入： 在HTML文件的 部分添加以下代码，使用CDN引入Three.js库。

   这将引入Three.js的最新版本。如果您需要特定版本，请更改URL中的 @latest 部分。 创建基本的HTML结构和一个包含Three.js场景的canvas元素 创建一个基本的HTML结构，并在 中添加一个包含Three.js场景的canvas元素。

要开始我们的项目，请创建一个新文件夹。在文件夹中，创建一个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" } }