JavaScript 3D动画库three.js入门篇

JavaScript 3D动画库three.js入门篇

什么是three.js？你将它理解成three+js，three表示3D的意思，js表示JavaScript的意思，合起来，three.js就是使用JavaScript来写3D程序的意思。three.js是WebGL的一个运行在浏览器上的开源框架，它省去了很多麻烦的细节，你可以用它创建各种三维场景，包括了摄影机、光影、材质等各种对象。

Three.js官网： Three.js – JavaScript 3D Library 或 https://github.com/mrdoob/three.js

three.js官网中文文档three.js docs

Threejs中文网Three.js中文网

three.js库目录结构详解

如果你直接想使用其中的three.js编辑器，或运行示例文件夹下的例子，请认真仔细的阅读这一部分。如果你想尽快感性认识一下three.js库创建3D动画的乐趣，也可以先跳过这一部分，先看第二部分，回头再看这部分。

下载解压后的目录结构如下图：

 请留意Build文件夹中包含的文件，这是three.js最终被引用的文件。three.js 是没有压缩的js文件，three.min.js已经压缩，使用这两者之一即可。three.module.js是从r106版本开始出现的模块方式。

three.js-master目录结构示意图：

特别提示：现在先介绍一下这个下载包的使用，如果你直接想使用其中的three.js编辑器，或运行示例文件夹下的例子，在未按如下步骤配置前，你看不到效果，这是对初学者最易掉进的坑。

在CMD（Windows操作系统中可用的命令行解释器应用程序）中使用npm -v命令进行npm的版本号的查看，若提示：'npm' 不是内部或外部命令，也不是可运行的程序或批处理文件。说明未安装，npm是nodejs的一个子内容，所以要使用npm，安装nodejs即可。

打开CMD（Windows操作系统中可用的命令行解释器应用程序），把当前目录切换到你下载后解压放置three.js-master目录（文件夹）下，我这里是：D:\three.js-master

再运行npm install http-server -g 安装一个简单的HTTP服务器 （其中g代表全局范围内安装http服务器，以便它可以在任何地方从命令行运行）

接着运行http-server . -p 8000 启动HTTP服务器 （其.代表当前路径，8000