返回介绍

three.js-master 目录结构

发布于 2021-07-10 20:14:15 字数 1772 浏览 1345 评论 0 收藏 0

为了方便大家学习,准备对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.wenjiangs.com/wp-content/uploads/three.js/build/three.js"></script>
<!-- 压缩版本 -->
<script src="https://www.wenjiangs.com/wp-content/uploads/three.js/build/three.min.js"></script>

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

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

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文