Three.js初始编译失败求助：按文档配置后无法正常运行

问题描述 #

刚从Three.js官网入门，已按文档完成所有安装配置，但项目无法正常运行。使用VS Code的Live Server插件启动项目，相关文件、结构及报错信息如下：

index.html代码 #

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="utf-8">
    <title>My first three.js app</title>
    <style>
        body {
            margin: 0;
        }
    </style>
</head>

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

</html>

main.js代码 #

import * as THREE from 'three';

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

const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

const geometry = new THREE.BoxGeometry( 1, 1, 1 );
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
const cube = new THREE.Mesh( geometry, material );
scene.add( cube );

camera.position.z = 5;

function animate() {
    requestAnimationFrame( animate );

    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;

    renderer.render( scene, camera );
}

animate();

文件结构 #

浏览器报错 #

问题排查与解决方案 #

从浏览器报错信息（Failed to resolve module specifier "three"）可以看出，核心问题是浏览器无法解析three模块的导入路径，以下是具体解决步骤：

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

如果使用npm管理依赖，先在项目根目录执行安装命令：

npm install three

2. 修正模块导入路径 #

有两种可行的修改方式：

方式一：使用本地安装的模块路径

修改main.js中的导入语句，指向node_modules内的Three.js ES模块文件：

import * as THREE from './node_modules/three/build/three.module.js';

方式二：使用CDN链接直接导入

无需本地安装，直接通过CDN引入Three.js模块：

import * as THREE from 'https://cdn.jsdelivr.net/npm/three@latest/build/three.module.js';

（可将@latest替换为具体版本号，如@0.160.0以保证稳定性）

3. 确保Live Server启动路径正确 #

VS Code的Live Server必须从项目根目录（即包含index.html、main.js和node_modules的文件夹）启动，否则会出现路径解析错误。

4. 可选优化：添加窗口大小自适应 #

为了让场景能跟随窗口尺寸变化，可在main.js中添加监听事件：

window.addEventListener('resize', () => {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
});

完成以上调整后，重新启动Live Server，项目即可正常运行，显示旋转的绿色立方体。

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