Electron将3d模型打包为exe格式

日期：2025-04-27 人气：0

3d模型需要电脑安装3d-viewer等软件才能查看，如果电脑没有安装3dViewer等软件的话，可以将3d模型打包为exe文件，然后在电脑上就可以双击查看了。

步骤如下：
- 新建一个nodejs项目
- 安装three.js
- 安装vite
- 安装electron
- 安装electron-builder

### three.js加载模型

不详细讲解

> 注意script加载js文件时，type设置为module，这样在js中可以使用import导入依赖

```
<script src="./three.js" type="module"></script>
```

### vite打包为html,css

不详细讲解

### electron打包为exe

- package配置打包信息，注意更改build配置
```
{
  "name": "babylon-viewer-app",
  "version": "1.0.0",
  "type": "module",
  "description": "3D viewer",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "build": "electron-builder",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "three": "^0.176.0"
  },
  "devDependencies": {
    "electron": "^35.2.1",
    "electron-builder": "^26.0.12",
    "vite": "^6.3.3"
  },
  "build": {
    "appId": "com.example.babylonviewer",
    "productName": "和同开宝",
    "directories": {
      "output": "build"
    },
    "files": [
      "main.js",
      "package.json",
      "dist/**/*"
    ],
    "win": {
      "icon": "logo.ico",
      "target": "nsis"
    }
  }
}

```

- 在项目根目录下新建main.js
```
import { app, BrowserWindow } from "electron";
import path from "path";

function createWindow() {
    const win = new BrowserWindow({
        // width: 800,
        // height: 600,
        webPreferences: {
            nodeIntegration: true,
            webSecurity: false
        },
        icon: './assets/icon.png' // 设置图标路径
    });

// win.loadURL("http://localhost:5173"); // 替换为 Vite 的地址
    // win.loadFile("./index.html"); // 加载你的 HTML 文件
    // win.loadFile(path.join(__dirname, "dist/index.html"));
    win.loadFile("./dist/index.html"); // 加载你的 HTML 文件

// win.webContents.openDevTools(); // 调试时打开开发者工具
}

app.whenReady().then(createWindow);

app.on("window-all-closed", () => {
    if (process.platform !== "darwin") app.quit();
});
```

- 调试命令
```
npm run start
```

- 打包命令
```
npm run build
```

### 运行

项目build目录下的`xxxx Setup 1.0.0.exe`就是安装包，双击就可以运行

- 更改图标，更改根目录下的log.ico，至少256x256px大小
- 更改标题，更改根目录下的index.html，更改package.json中的build.productName

### 鸣谢

- [稀土掘金**千度麒麟**](https://juejin.cn/post/7439578137925533708)
- [csdn**Lovely Ruby**](https://blog.csdn.net/u010263423/article/details/146059725)
- [csdn**大前端爬坑之路**](https://download.csdn.net/blog/column/6834154/103496448)
- [csdn**小火车况且况且**](https://blog.csdn.net/weixin_43972992/article/details/133133387)
- [csdn**哈哈小鬼~FE**](https://blog.csdn.net/qq_53911056/article/details/136143691)

标签： three.js

上一篇：vscode使用Community Server Connector运行JDK1.8项目报错下一篇：Electron使用electron-builder打包时下载electron失败或慢的解决方案

随便看看

2025-07-04 vscode使用Community Server Connector运行JDK1.8项目报错
2025-07-03 vscode中为maven项目指定java版本
2025-06-27 利用puppeteer将网页保存为pdf
2025-06-27 一天二十四时辰表
2025-06-27 家谱中儿子和父母的关系有哪些？

Electron将3d模型打包为exe格式

随便看看

留言