three.js学习计划（一）

最新推荐文章于 2025-03-09 14:59:00 发布

hoooooolyhu

最新推荐文章于 2025-03-09 14:59:00 发布

阅读量1.1k

点赞数

分类专栏：前端文章标签：图形 three-js 编程实例

本文链接：https://blog.youkuaiyun.com/healthy_coder/article/details/50310551

版权

本文介绍了three.js的基础知识，包括它是一个JavaScript编写的3D图形库，提供了CSS3D和WebGL渲染器。作者分享了学习three.js的计划，强调通过阅读官方实例代码和动手实践来掌握。文章详细讲解了如何设置渲染器、场景、相机，以及如何创建和动画化一个立方体，最终展示了一个旋转并下落的立方体动画效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近因为课题的原因要学习一下three.js，说实话，以前并没有接触过3D图形的编程，直接去看three.js的时候还是有点头皮发麻的，想着3D图形编程一定是难的要死要死的，可是没想到各位大神把底层图形封装的这么好，连我这种js新手加图形学白痴也能很好的阅读编写three.js的实例代码。
既然要学习一样新的东西，最好稍微了解一下它的历史渊源，这样不仅在学习的时候更加稳健，也能让你在跟大牛交流的时候不至于一头雾水。
three.js是什么，即使在three.js的github项目页上页只有短短的几句介绍，three.js是一个JavaScript编写的3D图形库，提供了<canvas>,<svg>,CSS3D和WebGL的渲染器。
three.js是托管在github上的一个开源项目，时至今日（2015-12-15）已经有519名代码贡献者。虽然在three.js的网站上提供了很多的基于three.js开发的实例，然而three.js的文档实在是不友好，只是简单的一个入门例子然后就是API，所以要学习three.js还是要去读官方实例的源代码，并且自己逐字逐句的来敲代码，做注释。
要使用three,js，首先要在你的html页面中引入它，通常我们只是使用不做调试的话直接引用three.min.js即可，引用three.js只需要一个简单的<script> 标签。

<script src="/you/path/to/three.min.js"><script>

在网页中引入three.js后你可以在网页控制台输入THREE.REVISION来查看版本信息，这里推荐chrome浏览器。

THREE.REVISION
"73"

我使用的是73版本的three.js
现在我们可以访问到THREE下的所有方法和变量了。
下面我们先来建立一个HTML标签页

<!DOCTYPE html>
<html lang="zh">
<

最低0.47元/天解锁文章