本文详解 three.js 的模块导入方式。对比传统 script 标签引入的不足，介绍通过 NPM 安装库文件的方法。结合 Webpack 或 Browserify 打包工具，演示如何使用 require 和 ES6 import 语法导入整个库或特定组件（如 Scene），并指出 examples/js 目录下的文件因依赖全局命名空间暂不支持模块导入。
前言
前言
本文主要介绍 three.js 通过模块导入的相关方法。虽然使用 script 标签引入 three.js 是快速上手和运行的便捷方式，但对于需要长期维护的项目而言，这种方式存在局限性，例如：
- 必须手动调用并引入库的副本，将其作为项目源码的一部分进行管理。
- 更新库版本时，需要手动执行操作，过程较为繁琐。
- 引入新版本库后，本地版本管理与源文件之间的差异容易变得混乱。
采用 NPM 等依赖管理工具可以有效避免上述版本管理方面的问题。
通过 NPM 安装
通过 NPM 安装
three.js 已作为 npm 模块发布，具体信息可参考 npm 官网。关于 npm 的卸载与安装步骤，读者可参考相关文章：https://www.jb51.net/article/90518.htm，此处不再赘述。安装成功后，只需运行 npm install three，three.js 即可包含在项目之中。
导入模块
导入模块
假设你使用 Webpack 或 Browserify 等打包工具，这些工具允许你在代码中使用 require('modules') 引用打包后的所有依赖项。
此时，你应当能够在源码中正常导入模块并进行开发。
var THREE = require('three');
var scene = new THREE.Scene();你也可以使用 ES6 的导入语法来实现模块引用。
import * as THREE from 'three';
const scene = new THREE.Scene();若只需导入 three.js 库中的部分功能，例如仅导入 Scene 类，代码如下：
import {Scene} from 'three';
const scene = new Scene();注意事项
警告
目前无法通过在 "examples/js" 目录下导入所有文件来支持模块。原因是部分文件依赖全局命名空间 THREE，这会导致命名空间污染。详细信息请参阅 Transform examples/js to support modules #9562。
总结
总结
以上就是本文的全部内容，希望这些内容对大家的 three.js 学习或工作有所帮助。如有疑问，欢迎留言交流，感谢支持。