Three.js文件在Live Server仅显白屏，控制台报模块解析错误求帮助

核心错误原因 #

你遇到的Uncaught TypeError: Failed to resolve module specifier "three"是浏览器ES模块系统的限制：浏览器无法直接识别裸模块名（如"three"），必须使用相对路径（.//../）、绝对路径或CDN地址来导入模块。这个问题和WebGL状态无关，先解决模块导入问题即可。

解决方法 #

方法1：使用CDN直接导入 #

在HTML的script标签中（需指定type="module"），直接通过CDN地址导入Three.js：

<script type="module">
  // 可替换为你需要的Three.js版本号
  import * as THREE from 'https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js';
  
  // 编写你的Three.js核心代码示例
  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();
  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();
</script>

方法2：通过npm安装后本地导入 #

1. 打开终端，在项目根目录执行安装命令：

npm install three

2. 在你的模块代码中，使用相对路径导入Three.js：

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

3. 若使用Vite、Webpack等打包工具，可直接写import * as THREE from 'three'，打包工具会自动处理模块路径映射。

关于WebGL的说明 #

你在about:config中确认WebGL 1.0/2.0为硬件加速状态，说明WebGL环境正常，无需额外配置。解决模块导入问题后，即可正常渲染Three.js场景。

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