three.js 模块导入：从 NPM 安装到 ES6 语法详解

前言

前言

本文主要介绍 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 学习或工作有所帮助。如有疑问，欢迎留言交流，感谢支持。