three.js-master目录结构

three.js-master目录结构

本文是Three.js电子书的学前内容

为了方便大家学习，准备对Three.js工程目录进行简单介绍。如果能很好的利用three.js-master文件下的资源，对于Threejs学习和Web3D项目的开发会极大的帮助。

github链接查看所有目录：https://github.com/mrdoob/three.js

three.js build docs editor examples src webgl三维引擎，代码有英文注释 方便平时调试学习使用 three.js three.js压缩文件，比源文件缩小 大约2倍，可以用于在线部署 three.min.js 帮助文档，可以查看构造函数、方法和属性的 使用说明 可视化编辑器，创建在线预览的三维场景 各种三维场景案例demo three.js引擎每一个主要构造函数对应的源代码 每一个.js文件对应帮助文档doc中的一个构造函数 如果想学习webgl的引擎封装可以参考

three.js-master
└───build——src目录下各个代码模块打包后的结果
    │───three.js——开发的时候.html文件中要引入的threejs引擎库，和引入jquery一样，可以辅助浏览器调试
    │───three.min.js——three.js压缩后的结构文件体积更小，可以部署项目的时候在.html中引入。
    │
└───docs——Three.js API文档文件
    │───index.html——打开该文件可以实现离线查看threejs API文档
    │
└───editor——Three.js的可视化编辑器，可以编辑3D场景
    │───index.html——打开应用程序
    │
└───docs——Three.js API文档文件
    │───index.html——打开该文件可以实现离线查看threejs API文档
    │
└───examples——里面有大量的threejs案例，平时可以通过代码编辑全局查找某个API、方法或属性来定位到一个案例
    │
└───src——Three.js引擎的各个模块，可以通过阅读源码深度理解threejs引擎
    │───index.html——打开该文件可以实现离线查看threejs API文档
    │
└───utils——一些辅助工具
    │───\utils\exporters\blender——blender导出threejs文件的插件

html文件引入three.js引擎

在.html文件中引入three.js就像引入其它.js文件一样直接引入即可。

<script src="./three.js">script>

我已经把three.js文件上传到了我的博客服务器， 可以通过下面的URL地址去加载

<script src="http://www.yanhuangxueyuan.com/3D/example/three.js">script>

<script src="http://www.yanhuangxueyuan.com/3D/example/three.min.js">script>

.html文件中引入threejs文件之后，可以通过浏览器控制台F12验证是否成功引入，在.html文件引入three.js后可以通过THREE访问所有的API。

// 如果返回的不是未定义，说明threejs成功引入
console.log('打印场景API',THREE.Scene);