首次开发Three.js项目Scene不显示且报THREE未定义错误

报错1：three.js 资源加载失败（net::ERR_FILE_NOT_FOUND） #

• 原因：HTML中引入three.js的路径配置错误。你当前用了绝对路径/lib/three.js，本地直接打开HTML文件时，绝对路径会指向磁盘根目录，无法匹配到项目内的lib文件夹。
• 解决方法：把script标签的引入路径改为相对路径：

<script src="./lib/three.js"></script>

• 额外检查：确认项目的lib文件夹下确实存放了three.js的源文件，没有文件名拼写错误。

报错2：无法在模块外使用import语句（Uncaught SyntaxError: Cannot use import statement outside a module） #

• 原因：你下载的three.js是ES模块版本，直接通过普通script标签引入会触发模块语法报错。
• 解决方法二选一：
  1. 重新下载UMD格式的three.js文件放到lib文件夹，直接沿用现有script引入方式
  2. 给两个script标签都添加type="module"属性，改为模块引入模式：

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

额外代码bug修正 #

你当前main.js中存在拼写错误，会导致渲染器尺寸设置失败：

// 错误写法：window和innerHeight之间用了逗号
renderer.setSize(window.innerWidth,window,innerHeight);
// 修正为点语法
renderer.setSize(window.innerWidth,window.innerHeight);

按以上步骤修改后，重新刷新页面即可看到全黑的Three.js场景。

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