在本教程中，我们将学习如何将基于Three.js的3D WebGL应用程序打包成一个独立的Windows可执行文件（.exe）。这样，用户无需在浏览器中打开应用程序，而是直接运行一个可执行文件。为完成此操作，我们将使用名为Electron的跨平台桌面应用程序开发框架。
Electron允许使用Web技术（HTML、CSS、JavaScript及Node.js等）开发跨平台桌面应用程序。在本教程中，我们将采用Electron将Three.js应用程序打包成独立的Windows可执行文件。
以下是打包Three.js应用程序的基本步骤：
1. 安装Node.js：
Electron基于Node.js，因此首先需要安装Node.js。请访问：https://nodejs.org/en/download/ 以下载和安装适用于您的操作系统的Node.js版本。
安装成功后，通过运行以下命令确认Node.js是否正确安装：
```bash
node -v
npm -v
```
2. 创建一个新的项目文件夹：
创建一个新的项目文件夹，并进入该文件夹。例如：
```bash
mkdir threejs-electron
cd threejs-electron
```
3. 初始化Node.js项目：
在项目文件夹中执行以下命令，初始化Node.js项目：
```bash
npm init -y
```
这将创建一个名为`package.json`的文件。
4. 安装Electron：
运行以下命令，将Electron添加到项目依赖项中：
```bash
npm install --save-dev electron
```
5. 创建应用程序文件：
在项目文件夹中创建如下文件：
- `index.html`：Three.js应用的HTML文件
- `style.css`：样式表
- `main.js`：Three.js和WebGL代码文件
- `electron.js`：Electron启动和配置文件
6. 编写应用程序：
按照您的需求编写Three.js和WebGL代码。请确保在`index.html`文件中引用`style.css`和`main.js`。
7. 设置Electron配置文件：
在`electron.js`文件中添加以下内容：
```javascript
const { app, BrowserWindow } = require("electron");
const url = require("url");
const path = require("path");
let mainWindow;
function createWindow() {
mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
contextIsolation: false
}
});
mainWindow.loadURL(
url.format({
pathname: path.join(__dirname, "index.html"),
protocol: "file:",
slashes: true
})
);
mainWindow.on("closed", function () {
mainWindow = null;
});
}
app.on("ready", createWindow);
app.on("window-all-closed", function () {
if (process.platform !== "darwin") {
app.quit();
}
});
app.on("activate", function () {
if (mainWindow === null) {
createWindow();
}
});
```
8. 更新`package.json`：
在`package.json`文件中，将`start`脚本改为：
```json
"scripts": {
"start": "electron ."
}
```
9. 运行和测试应用程序：
运行以下命令，启动Electron应用程序：
```bash
npm start
```
此时应看到Three.js WebGL应用程序以桌面应用程序形式运行。
10. 打包成可执行文件：
为将Electron应用程序打包成可执行文件，首先安装`electron-packager`工具：
```bash
npm install --save-dev electron-packager
```
然后将`package.json`中的`scripts`部分更新为：
```json
"scripts": {
"start": "electron .",
"package-win": "electron-packager . --overwrite --asar=true --platform=win32 --arch=ia32 --prune=true --out=release-builds"
}
```
执行以下命令以打包应用程序：
```bash
npm run package-win
```
此操作将在名为`release-builds`的文件夹中生成Windows平台的可执行文件。
完成以上步骤后，即成功将基于Three.js的3D WebGL应用程序打包成独立的Windows可执行文件。 用户无需在浏览器中打开应用程序，而是直接运行可执行文件。
注意：此教程专注于Windows平台的打包，而Electron可用于创建MacOS和Linux操作系统的应用程序。 相关文档见：https://www.electronjs.org/docs/development/build-instructions-windows。
