three.js-master 目录结构

优质

小牛编辑

139浏览

2023-12-01

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

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

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地址去加载

<!--http绝对地址远程加载-->
<script src="https://www.xnip.cn/wp-content/uploads/three.js/build/three.js"></script>
<!-- 压缩版本 -->
<script src="https://www.xnip.cn/wp-content/uploads/three.js/build/three.min.js"></script>

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

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