Electron集成Three.js遇模块解析错误，请求技术帮助

问题描述 #

我用Electron开发应用时，引入Three.js遇到如下报错：

Uncaught TypeError: Failed to resolve module specifier "three". Relative references must start with either "/", "./" or "../"

HTML中引入render.js的代码：

<script type="module" src="./scripts/render.js"></script>

render.js里的导入代码：

import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

解决方案 #

1. 先确认Three.js已安装 #

先在项目根目录执行安装命令，确保依赖已下载：

npm install three

2. 用相对路径直接导入（无打包工具场景） #

浏览器原生ES模块不识别npm包名，需写相对路径指向node_modules里的实际文件：

// 路径根据你的项目结构调整，确保指向正确的three模块文件
import * as THREE from '../node_modules/three/build/three.module.js';
// OrbitControls对应到node_modules里的实际位置
import { OrbitControls } from '../node_modules/three/examples/jsm/controls/OrbitControls.js';

3. 开启Electron的Node集成（不推荐生产环境使用） #

在Electron主进程的窗口配置中，开启nodeIntegration并关闭contextIsolation（注意这会降低应用安全性，生产环境需谨慎）：

// main.js
const { BrowserWindow } = require('electron');

function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false
    }
  });

  win.loadFile('index.html');
}

配置完成后，可在render.js里用require导入：

const THREE = require('three');
const { OrbitControls } = require('three/addons/controls/OrbitControls.js');

4. 用打包工具处理（推荐生产环境） #

使用Vite、Webpack这类打包工具，它们能自动解析npm包名，无需修改导入代码：

• 给Electron项目集成打包工具（比如使用Vite-Electron模板）
• 安装Three.js后，直接保留你原本的导入代码即可，打包工具会自动处理模块路径问题

5. 注意OrbitControls的路径兼容性 #

Three.js r128+版本用three/addons/...作为别名，但实际文件存放在examples/jsm目录下，使用相对路径时需对应到该位置，避免因路径错误导致加载失败。

内容的提问来源于stack exchange，提问作者Cronios