在前端开发中，Three.js 是一个强大的用于创建 3D 场景的 JavaScript 库。有时候，我们可能不想依赖框架，而是直接通过 unpkg 引入 Three.js 来构建项目。然而，在引入过程中，可能会遇到 main.js 中 THREE 无法识别的问题，下面我们就来详细探讨如何解决。

通过 unpkg 引入 Three.js 非常简单。在 HTML 文件中，我们可以使用 script 标签来引入 Three.js 的资源。例如：

<script src="https://unpkg.com/three/build/three.min.js"></script>

这样，Three.js 的库文件就被引入到我们的项目中了。

但是，当我们在 main.js 中尝试使用 THREE 时，可能会遇到无法识别的情况。这通常是因为 JavaScript 的模块系统和作用域问题导致的。在现代的 JavaScript 开发中，很多项目会使用 ES6 模块规范。如果 main.js 被设置为模块模式（例如通过 <script type="module"> 引入），那么直接使用全局的 THREE 变量就会出现问题。

解决这个问题有几种方法。一种方法是将引入 Three.js 的 script 标签放在 main.js 之前，确保 THREE 变量在 main.js 执行时已经存在于全局作用域中。另一种更推荐的方法是使用 ES6 模块的动态导入。

我们可以在 main.js 中这样做：

async function initThree() {
    const { THREE } = await import('https://unpkg.com/three/build/three.module.js');
    // 在这里就可以正常使用 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);
    // 其他 Three.js 相关代码
}
initThree();

通过这种动态导入的方式，我们可以确保在使用 THREE 之前，它已经被正确加载和引入到当前作用域中。

不使用框架时通过 unpkg 引入 Three.js 并解决 main.js 中 THREE 无法识别的问题，关键在于理解 JavaScript 的模块系统和作用域，合理选择引入和使用 Three.js 的方式，这样我们就能顺利地在项目中使用 Three.js 来创建精彩的 3D 场景了。