three.js构建网页3D模块时npm安装依赖后仍导入报错求解

你的代码存在3处会直接触发运行错误的问题，对应修复方案如下：

• 导入路径写法错误：npm安装的three包导入时不需要加.js后缀，错误写法import * as THREE from 'three.js'会让构建工具/浏览器查找不存在的文件，正确根导入路径为three；官方扩展控件（如OrbitControls）推荐使用three/addons/作为路径前缀，替代旧版的three/examples/jsm/路径
• OrbitControls初始化参数错误：构造函数仅接收2个参数，分别为相机实例、渲染器挂载的DOM元素，你代码中传入的第三个未定义变量domElement会直接触发引用错误
• 裸模块识别配置缺失：如果未使用构建工具直接在浏览器运行ES模块，浏览器默认无法解析node_modules下的裸模块导入规则，需要额外配置

方案1：使用Vite构建运行（推荐，零额外路径配置） #

1. 项目根目录执行npm install three安装依赖
2. HTML入口文件中引入业务脚本时必须添加type="module"标识：

   <script type="module" src="./main.js"></script>
   

3. 直接修正代码中的语法错误即可运行，无需额外配置路径映射

方案2：无构建工具原生浏览器运行 #

1. 在业务脚本前添加importmap配置，映射three对应的实际文件路径：

   <script type="importmap">
   {
     "imports": {
       "three": "./node_modules/three/build/three.module.js",
       "three/addons/": "./node_modules/three/examples/jsm/"
     }
   }
   </script>
   

2. 不能直接通过file://协议打开本地HTML文件，会触发跨域报错，需要启动本地静态服务（如VSCode Live Server插件、执行npx serve命令）后通过http://localhost地址访问

修正后可运行完整代码 #

import * as THREE from 'three'
import { OrbitControls } from 'three/addons/controls/OrbitControls.js'
const renderer = new THREE.WebGLRenderer();

renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera(
    75,
    window.innerWidth / window.innerHeight,
    0.1,
    1000
);

// 修正OrbitControls传参
const orbit = new OrbitControls(camera, renderer.domElement);

const axesHelper = new THREE.AxesHelper(5);
scene.add(axesHelper);

camera.position.set(0, 2, 7.5);
orbit.update();

const boxGeometry = new THREE.BoxGeometry();
const boxMaterial = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const box = new THREE.Mesh(boxGeometry, boxMaterial);
scene.add(box);

box.rotation.x = 5;
box.rotation.y = 5;

function animate() {
    box.rotation.x += 0.01;
    box.rotation.y += 0.01;
    renderer.render(scene, camera);
}

renderer.setAnimationLoop(animate);

报错参考截图 #

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