本文是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就像引入其它.js文件一样直接引入即可。
<!--相对地址加载--> <script src="./three.js"></script>
我已经把three.js文件上传到了我的博客服务器, 可以通过下面的URL地址去加载
<!--http绝对地址远程加载--> <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);