开发学院

您的位置:首页>教程>正文

教程正文

Three.js 以模块的形式导入

以模块的形式导入

  虽然通过script标记导入three. js是一种快速启动和运行的好方法,但对于大型复杂的项目,它有一些缺点,例如:

  您必须手动提取库的副本并将其包括在项目源代码中

  更新库的版本是一个手动过程

  签入库的新版本时,版本控制diffs会因生成文件的许多行而变得杂乱无章

  使用依赖关系管理器(如NPM )可以让您简单地下载所需版本的库并将其导入到计算机上,从而避免了这些警告。

通过npm安装

  Three.js作为一个NPM模块发布。这意味着您只需运行“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库的选定部分,例如场景:

import { Scene } from 'three';
const scene = new Scene();

警告

  目前无法以这种方式导入“examples/js”目录中的文件。这是因为一些文件依赖全局命名空间的问题。有关详细信息,请参见将“examples/js”转换为支持模块# 9562。