unpkg 引入 three.js 后，main.js 中为何无法识别 THREE 对象

在前端开发中，使用 three.js 创建 3D 场景是一件令人兴奋的事情。不少开发者选择通过 unpkg 来引入 three.js，然而，常常会遇到在 main.js 中无法识别 THREE 对象的问题，这究竟是怎么回事呢？

检查引入路径是否正确至关重要。unpkg 是一个基于 npm 包的 CDN 服务，在引入 three.js 时，路径的准确性直接影响到能否成功加载库文件。如果路径出现拼写错误或者版本号引用错误，浏览器可能无法找到对应的脚本文件，自然也就无法识别 THREE 对象。例如，正确的引入路径可能类似 <script src="https://unpkg.com/three@0.151.0/build/three.min.js"></script>，确保版本号与实际使用的一致，并且路径没有多余的空格或特殊字符。

加载顺序也可能是罪魁祸首。JavaScript 是单线程执行的，如果在 main.js 中过早地尝试访问 THREE 对象，而此时 three.js 脚本还未完全加载完成，就会导致识别失败。可以使用脚本的 defer 或 async 属性来控制脚本的加载顺序。defer 属性会让脚本在文档解析完成后、DOMContentLoaded 事件触发前执行，async 属性则会让脚本异步加载，加载完成后立即执行。如果 main.js 依赖 three.js 的加载完成，建议使用 defer 属性，例如 <script defer src="main.js"></script>。

另外，作用域问题也不容忽视。在某些情况下，即使 three.js 成功加载，由于作用域的限制，THREE 对象可能无法在 main.js 的全局作用域中被访问。可以考虑将相关的代码封装在一个自执行函数中，确保 THREE 对象在正确的作用域内可用。

当在 unpkg 引入 three.js 后 main.js 无法识别 THREE 对象时，要从引入路径、加载顺序和作用域等多个方面进行排查。通过仔细检查和调整，就能顺利解决问题，开启精彩的 3D 开发之旅。