WebGL中文网

Three.js教程

Threejs基础教程

前言

挪窝啦~！欢迎大家入住新家挪窝啦~！欢迎大家入住新家挪窝啦~！欢迎大家入住新家

挪窝啦~！欢迎大家入住新家

1、时间如梭

从开始接触3D开发，已快12年。大三时(1999年大学)，以为学会《计算机图形学》，就能玩转OpenGL和DX了，从而编写自己的游戏了。理想很丰满，现实很骨感，当试图去写一个3D射击游戏的时候，才知道，这比想象中的难很多。

后来玩了极品飞车、魔兽这样的游戏，更是想自己动手写一个3D游戏，大四的时候，经过好多次努力，才写成了一个射击游戏。心中的喜悦不言而喻，可惜的是，眼睛的度数也因此加深了不少。模型变换、投影变换、光线跟踪、碰撞检测等花费了自己太多太多的时间。

学习的过程中，遇到了很多苦难，自己找了很多资料，才得到理解。有时候为了明白一个迷惑，就需要几天的时间。我深信这样的过程，每一个学习者都是会遇到的。例如光线跟踪的实现、又如游戏中怎么混合正投影与透视投影的效果，来实现血条，工具菜单等。这些都是比较难的知识点。

面对这些知识点，何去何从。是逃避，还是用时间来顿悟，我想都不是好主意。也许，这本教程能够帮助您去理解这些晦涩的东西。而我们写出这些知识来，就是为了让大家用更少的时间去理解这些知识点。《英雄本色》中说得好，出来混，总有一天会还的。所以，各位，还是从现在开始，就把知识学扎实吧。

为了给大家提供优质的学习资料，我们几个清华朋友聚在了一起，利用了1年多的时间，写成了本课程，并且目前在不断的更新中，希望能够提高大家的3D开发水平。

我们这群屌丝，有太多的事情要去做。要学习，要工作，要照顾老婆，要陪伴父母，我们曾经以为我们年轻有的是时间，但是时间总是过得那么快。总结起来：社会没有给我们太多的时间，所以，我们几位主创想通过这套教程去节省你的时间，以使你较快的成为3D开发的高手。也许是找一份好的工作，也许是多挣一份钱，得到同事，老板的认可和尊重。

学习一门新的语言，或者新的平台，我们总是充满好奇，但同时它也会花费我们很多很多的时间。这些时间中的大部份，我们在寻找资料和问题的答案。特别是一些奇怪的bug和异常，在网上也找不到资料，那时候，非常郁闷，在郁闷中，一天就过去了。很多程序梦想，就这样被扼杀了。

有木有，有木有，同感。

在写教程的过程中，我想，解决大家在WebGL、Three.js中遇到的问题，将是我们写本教程最总要的原因。毕竟，我们也算国内最早接触Threejs的工程师之一。

好了，各位，如果你对WebGL感兴趣，如果你对Three.js感兴趣，认为不久的将来的一天，你会用到它，那么跟我一起来学习吧。这应该是一个不错的教程，它将做到两个第一。第一，它将是国内第一部完整讲解Threejs的教程。第二，它将是讲得最清楚的一部中文教程。

boy and gril ，让我们开始这段轻松的旅程吧。

值得注意的是，我们有很多学术情节，非常注重原理的讲解，我们相信学完本套课程，您将对任何一款3D引擎的实现有比较深入的了解。

如果通过学习，你觉得本教程不错，大家可以试着支持一下文中一些带**有隆重商业气息**的图片，你的查看等于送我一杯奶茶哦！感谢大家。希望你能看懂这句话，哈哈

2、本教程读者对象

学习图形学的大学生；

游戏开发者；

Webgl、threejs爱好者；

已工作的工程师；

想要更炫效果的前端开发者；

以批判的眼光来看本教程的童鞋们；

3、本教程技术支持

您在阅读本书的过程中若碰到什么问题，请通过以下方式联系我们，我们会及时地答复您。

我们的邮箱是最好的交流方式：1805691606@qq.com, hewebgl@qq.com, hewebgl3@qq.com

未即时回复，可能因为是出差，旅游，陪老婆等等，嘿嘿，你懂的，不过我们由团队老师管理答疑，所以几个人同时休息的时间很少，不用担心。

4、版权声明

版权，说到版权，我们非常重视，这得于读研时，老师对我们的教导，算是我们对知识的一种尊重。知识是无价的，所以版权是对知识的一种保证和承认。

如果没有版权保护，那我们想世界上就在没多少人来分享知识经验了。

特别声明，《Three.js基础教程》欢迎大家转载，但请标明出处http://www.hewebgl.com。

《Three.js中级教程》,《Three.js高级教程》等其他课程严禁转载，请误转载，抄袭等一切违法行为。

以上所有版本归WebGL中文网团队李渊、付以亮、郑强等人所有。我们已经请美国归来好友李远胜律师，为本站法律顾问，一切侵犯我们版权的个人或公司，我们将委托律师追究责任，赔偿损失，谢谢。

WebGL中文网团队

给WebGL中文网团队的女程序员"小果妹妹"发一个鸡腿吧，微信扫一扫赞赏，感谢。

亲爱的读者，如果你觉得WebGL中文网的课程不错，您可以购买《WebGL中文网视频课程》课程支持我们哦,购买后记得给我们好评哦！我们强烈建议您不要在iphone上的网易云课堂软件中购买，这样苹果会收取31%左右的服务费，虽然这是明码标价，我们也表示认可和理解，具体选择权在您自己了。

感谢大家的支持，下面是课程的截图之一

[1楼] Chan** 2016-06-01 17:14

难道我就这样成为了首席沙发官？点了一下“提交”

WebGL中文网老师回答：

哈哈，是的，你现在稳坐沙发！

[2楼] Dami** 2016-07-19 16:43

默默地留个爪子。- -...

WebGL中文网老师回答：

我们建议男生什么都可以不留，建议女生留一个吻，万分感谢。哈哈。

[3楼] nanz** 2016-07-31 18:30

点赞，今后我的方向就是WEBGL，找了很久资料发现了这里~中文网~很开心，希望越做越好~

WebGL中文网老师回答：

我们会越做越好的，但是你也需要认真学习，才能对得起自己，对得起我们辛苦码字哦。

[4楼] wu80** 2016-08-02 13:54

三年了，准备重新看一下Three.js，记得三年前还是学僧一枚的时候，只有一本关于Three.js的一本书，今天突然发现有一个中文的教程，很开心，希望越来越好~

WebGL中文网老师回答：

除了书，你还记得学生时代的女朋友吗?那是不是你最开心浪漫的时刻呢？感谢你发现WebGL中文网，这个网站能让你学会一些新的技能，只要你相信

[5楼] 北辰神O** 2016-08-03 17:40

额，新人来看看看（手动笑脸）

WebGL中文网老师回答：

新人一般看完之后，都是送入洞房的。

[6楼] wuag** 2016-08-11 08:12

我就想先回复一个

WebGL中文网老师回答：

你真顽皮

[7楼] Medi** 2016-08-15 15:13

老师您好，我是哈尔滨工业大学的大三学生，想学习一下webgl，但是在看过案例之后，发现网页第一次打开都很慢，这是什么原因，或者有什么解决方法么。

WebGL中文网老师回答：

什么打开很慢？我们的网站吗？还是其他的demo，是不是引用了被墙的资源，例如一个js资源在国外，或者在google的服务器上，要知道google现在被墙了。

[8楼] alxr** 2016-08-16 10:57

04年毕业设计就是做的VRML虚拟实验室，当时X3D、JAVA3D都还刚起步。VRML2.0还需要安装插件才能用，所以插件限制了WEB3D的发展，商业应用中不可能要求每个客户都会下载安装插件，也不能要求每一个客户的PC都有JAVA环境。十几年过去了，从事的工作完全跟技术无关，现在发现WEBGL在HTML5帮助下可以免插件展示WEB3D，真的很不错很不错，一个VR的时代来了。

WebGL中文网老师回答：

是的，进步在进步，作为同龄人，有时候非常羡慕现在同学们所在的技术环境。VR必然成为未来技术引爆点，必然，立帖为证。

[9楼] jnss** 2016-09-01 15:48

各位老师好，我非常想把表单做成立体的，但是也没有具体的想法，希望学习完能增加知识

WebGL中文网老师回答：

这是一个好的想法。那不知道你现在做出来了没有呢？这里提供给您一点思路，可以尝试使用webgl的阴影效果，并且实现一些动画效果，例如一段文字，前面的文字比刚录入的文字，z坐标要小一些，这样可以营造文字离我们眼睛远一点的效果。

[10楼] life** 2016-11-04 10:53

学习之前默默地留个脚印

[11楼] Zhou** 2016-11-24 22:49

好开森，老师们好用心，喜欢这样的感觉

WebGL中文网老师回答：

你爽了，我们就爽。共勉。

[12楼] 凯尔萨斯** 2017-01-09 15:33

千言万语汇成一句话：感谢老师，我会努力的！

WebGL中文网老师回答：

希望能看到你成功的一天。

[13楼] blue** 2017-01-10 19:12

boy and gril ------> boys and girls

WebGL中文网老师回答：

因为专一，所以用单数，哈哈。好吧，笔误了，我们承认。

[14楼] li10** 2017-03-28 10:19

出来这么久了才发现- -感觉好low，

WebGL中文网老师回答：

什么好low，谁好low，什么意思呢？

[15楼] Cath** 2017-04-17 16:21

第一天入坑，希望以后会更好

WebGL中文网老师回答：

以后肯定会更好。

[16楼] Cath** 2017-04-17 16:22

不是为啥我第一次提交了评论之后评论的textarea里面没有清空

[17楼] XF西风** 2017-06-06 15:00

点赞，学习之前默默地留个脚印

WebGL中文网老师回答：

感谢你的脚印，5年后再回首，我们看看大家有什么变化。

[18楼] 低调奢华** 2017-06-09 12:03

21楼，还不算太晚

WebGL中文网老师回答：

才中午12点，应该不算晚。

[19楼] 星光--** 2017-06-13 17:06

希望threejs的学习结束时我能写一个属于我自己的3d游戏

WebGL中文网老师回答：

不是希望，是一定能，要有信心啊。

[20楼] Mari** 2017-06-26 09:11

boy and gril 应该是“boy and girl”吧

WebGL中文网老师回答：

惭愧，我如此喜欢女孩，却拼错了女孩，惭愧啊

[21楼] feic** 2017-06-29 11:22

前端学习中偶然碰到three.js，想深入学习一下。可是发现很多例子中拿出来的东西自己无从参考，很多别人拿来即用的东西不知所以然。没有图形学的基础，还需要提前学习一下openGL么？

WebGL中文网老师回答：

毫无疑问，你需要系统的学习课程。可能还没有人，看几个例子，就成为高手的先例。就像看几次火箭发射，还是不懂火箭是怎么做成的。

[22楼] 霞之丘の** 2017-06-30 20:06

哇，好像发现了个厉害的网站

WebGL中文网老师回答：

才发现啊

[23楼] tang** 2017-07-05 14:25

突然对这个感兴趣了，纯个人兴趣。谢谢各位大牛的奉献，么么哒~~~~~

WebGL中文网老师回答：

欢迎入坑。

[24楼] 真是日了** 2017-07-27 19:18

前端 webGL昨天刚听说，今天就来了，完全零基础

WebGL中文网老师回答：

每个人都是零基础过来的，关键在你的进步是否过快。房价涨得太快，身价不快点涨，那么学再多都无意义。加油。

[25楼] kuwo** 2017-09-01 16:59

前端妹纸一枚，开启学习之路，还请各位大师多多指教！感谢感谢！！！

WebGL中文网老师回答：

每一个前端妹子后面，都有一群强大的后端帅哥，作为支撑，你找到你的帅哥了吗？要不要给你介绍一个。

[26楼] cnji** 2017-09-08 13:15

后端转前端it狮子一枚，希望各位大神多多照顾哟！

WebGL中文网老师回答：

在保加利亚人民共和国的时候用过几枚狮子硬币。

[27楼] long** 2017-10-12 13:56

请误转载，应该是请勿转载吧。

WebGL中文网老师回答：

为了证明你的用心阅读，我们就不改了，谢谢。

[28楼] yang** 2017-11-13 15:18

入前端2年多了对3d感兴趣学习中~

WebGL中文网老师回答：

好好学习，加油

[29楼] WebG** 2017-11-14 18:48

这周公司要求做个东西.赶紧来学.我是搞iOS的啊...23333333

不错.加油~有自己爱做的事~最棒的

WebGL中文网老师回答：

可以加入学习小组一起学习。

[30楼] Barr** 2017-11-15 19:15

公司项目接触到Three.js，上官网看了几个Demo，感受到了它的强大，但是在来这之前苦闷于学习资料还是比较少的，所以十分感谢各位WebGL各位老师的付出！

WebGL中文网老师回答：

同样感谢你，感恩之心，愿世界更美好。

[31楼] 1563** 2017-11-24 23:23

老师好,我是一名大四的学生最近在做一个在一个基于web的机械零件库的虚拟库的程序的设计,之前用的是java3D但是技术太落后,而且很难嵌入但网页中与多种浏览器兼容,偶然间发现还有WebGl这个技术,真是如获至宝,然后就找到这里来了,首先感谢老师提供的学习资料,为我解决很多疑惑,也让我对自己的课题有可更加的信心!

WebGL中文网老师回答：

java3d确实太落后了，包括opengl、dx其实也是落后的，要在网页上做好3D，目前就只有webgl最靠谱。而且最简单，加油。

[32楼] pete** 2017-11-29 16:14

WebGL中文网老师回答：

我们也希望，大多数同学不半途而废。

[33楼] emdr** 2017-12-20 10:21

发现新大陆了！！！

WebGL中文网老师回答：

WebGL全体老师等待您的侵略。也祝你能学习完本套课程。

[34楼] 隔壁卢大** 2017-12-20 11:56

我是模模糊糊的来的，之前接触过，但是因为js功底不强，当然现在也不强，放弃了，现在是公司要求开发vr，不得不学了，但是我不知道方向对没对

WebGL中文网老师回答：

“不得不学”有点勉强哦，就把它当做一种知识，一个工程师一生可能学习上百种技能，所以不要用不得已的心态来学习。记住一点，学习原理，才是提高学习能力的最好方法。会了原理，举一反三，以后任何3D应用至少都不会对你产生困惑了，那种感觉很好。加油。

[35楼] kath** 2018-01-17 15:51

学数学做游戏的产品狗不在本教程的读者对象中 T^T

[36楼] 前端-骚** 2018-01-19 23:18

现在才发现新大陆，希望不会太晚~~~加油！

WebGL中文网老师回答：

不完，从哥伦布发现美洲大陆开始，直到现在地球上都还有很多大陆没被发现，或者至少还没有发现有现代人上去过。

[37楼] asit** 2018-01-25 10:56

好好学习，天天向上。

WebGL中文网老师回答：

仿佛看到黑板下的老师

[38楼] 好奇的猫** 2018-02-03 14:29

42楼还不算晚

作为一位前段妹纸，先留下一个么么哒

WebGL中文网老师回答：

“摸摸哒”，是“mu a” 的谐音，是大人亲小孩时爱的表达，表示亲亲。宝贝，亲一下，一般也用于恋爱的情侣之间。突然有种现在开始谈恋爱的感觉。

[39楼] 亚城木梦** 2018-02-06 17:23

发现新大陆，赶紧上车

WebGL中文网老师回答：

买票请找老师哦，票价和高铁差不多，不贵，但很值。知识的旅途，一生难忘。

[40楼] PaoS** 2018-02-12 09:25

开始学习了！

WebGL中文网老师回答：

恭喜，加油

[41楼] wayn** 2018-04-13 21:42

感谢！过来支持支持，嘿嘿

[42楼] 这是一个** 2018-04-26 15:25

VR喊这么多年了但一直没有火起来，各位老师怎么看？webVR呢？

[43楼] 麻痹戒子** 2018-05-18 08:32

《英雄本色》中说得好，出来混，总有一天会还的。所以，各位，还是从现在开始，就把知识学扎实吧。

这句话是《无间道》里的-.-

WebGL中文网老师回答：

确实是，看来老师老了，哈哈。

[44楼] 奔跑吧码** 2018-07-17 16:37

吐槽一下，为什么一节的结尾没有下一节的链接捏

WebGL中文网老师回答：

有机会加上。

[45楼] zhan** 2018-08-16 20:20

首先表示这是一个非常棒的学习网站，然后做为具有不到五年（4各月）开发经验的前端开发者吐个槽。页面样式有待改进不象是大佬做出来的O(∩_∩)O哈哈~

WebGL中文网老师回答：

接受你的建议。

[46楼] zhal** 2018-08-21 09:12

面试的时候介绍了three.js，对3D非常感兴趣！

WebGL中文网老师回答：

开始学吧。

[47楼] xiat** 2018-09-07 10:22

刚刚开始看教程...

首先，谢谢分享！

然后，

为什么没有下一章按钮...

我很懒的好么...

WebGL中文网老师回答：

因为我们的重点是课程，重点是课程，重点是课程。其他的我们觉得有了下一页也不会让一个人学习快很多。如果有机会，当然，我们也会加上。

[48楼] 进步青年** 2018-11-12 18:10

感谢分享！想做这个效果，https://threejs.org/examples/#webgl_geometry_teapot

求制作思路，谢谢！

[49楼] 敲代码的** 2019-02-28 16:21

作为一名准备从事可视化方面的前端工程师，前来打卡，准备吧WebGl好好学习一下，也知道这条路需要坚持和毅力！在此立志！加油！！！

[50楼] yzy_** 2019-03-01 16:06

逛逛！然后请问在前言中第一部分这段话“在写教程的过程中，我想，解决大家在WebGL、Three.js中遇到的问题，将是我们写本教程最总要的原因。”这个“总要”是错别字吗？我怎么觉得应该是“重要”呢！嘿嘿嘿！还有评论上传图片好像不行啊，是我格式不对吗？

[51楼] zyy** 2019-04-17 18:29

很早之前看过一点关于three.js的知识，现在又重新学过，一定要坚持下去。跟楼上一样，加油！

[52楼] 呼呼呼1** 2019-04-18 08:17

前言正文倒数第三行，‘请误转载’？‘请勿转载’？....我有毒为了问这个问题而注册了...

[53楼] 萌新来报** 2019-05-16 11:02

评论区这么热闹为了体验被官方回复的感觉留吻~

[54楼] 1325** 2019-08-18 11:30

<b style="color: red;"">萌新入坑求关照哦</b>

[55楼] 兰雨革月** 2019-09-27 10:06

轻轻的，我来了，留下一个吻。感谢大佬~

[56楼] iceb** 2019-10-06 18:15

来学习的，觉得web3d好玩，随着互联网的发展，未来可能会火起来，敬重作者用业余时间将自己的经验分享给我们，我是找了百度了很多，找到这里的，真是不容易。

[57楼] 2019** 2019-12-07 07:41

嘿嘿

[58楼] yaoy** 2019-12-09 15:27

入坑之前，居然先被各位前辈盖的楼吸引了，有意思~~~

[59楼] pkda** 2020-01-01 17:27

终于发现一个系统介绍three.js的网站了，真好，我的小程序有望插上3D的翅膀了

[60楼] 好巧55** 2020-02-17 12:16

希望越来越好

[61楼] weid** 2020-03-11 09:09

从16年的评论一直看到最近，好有意思。首先说本教程看来是很受大家欢迎，有口皆碑，第二大家提的优化界面、增加下一章等小功能，大佬们哪有时间做这些，我建议发挥开源社区的力量，让大家来帮着一起完善呢？

[62楼] 当时的明** 2020-10-19 22:51

我看一本书或一个教程都会看它的前言。因为一个前言写的有没有血肉有没有感情，像不像是一个“人”，这很重要，一个前言可以带现出作者们的表达力及思想还有感情。我们都是要和人交流的，如果没有那些，技术文档在最牛逼也是写给“仙人”看的。

代码本无情，可创造代码的人可以有“情”。

[63楼] cesh** 2021-01-16 11:52

请问老师着色器里面vec3(0.0, 0.1, 0.0)来表示颜色的话，3个参数分别是表示rgb吗？测试感觉好像不太一样，而且rgb是0-255，不应该有小数吧

[64楼] hell** 2021-02-05 15:50

今天的阳光很好，感觉自己的未来充满希望，当然作为技术人，需不断学习，不断总结，加以实践，获得回报，一直在路上，加油！

[65楼] huhu** 2021-02-25 22:07

感兴趣，抽空看看

[66楼] sxxs** 2021-04-29 14:29

冲冲冲

[67楼] sxxs** 2021-04-29 14:29

冲冲冲

[68楼] jian** 2021-06-13 20:15

高考结束啦，来踩踩～

[69楼] 学前端的** 2021-08-02 17:51

打卡留念，记录一下。希望我这个永远浮躁、永远三分钟热度、永远反复学习同一个知识点好几年的人，能坚持学完初级教程。

我把上边的前言、留言都认认真真的看了一遍，确实能感觉到温度、感觉到是在和真实的人（作者、读着）们对话，没有再一目十行。让当下迷茫混沌、心情低落的我也有了点气色。

前端姐姐一枚，对webGL和threejs很感兴趣。但之前一直都停留在观望阶段，终于找到了一个有意思的网站，开始学习之旅~

[70楼] 小半10** 2022-07-05 15:13

看到了几个可能是错别字（也有可能是我孤陋寡闻了），但并不影响我读下去的欲望！！！

对于three.js的全面教程太紧缺了，来自一个想学找不到资料的小白

[71楼] Yana** 2022-07-14 17:49

老师您好！我是一名马上即将24岁的女生，目前从事前端2年了，高中毕业后培训班学的java后面直接放弃自学了前端，个人觉得市场太饱和了，普通只能写表单的程序员太多了，我一无学历二无很顶尖的技术，无意发现webgl，想尝试学习学习！看到老师们的回复还有给读者的话，真的很震撼，按道理说高学历并且在各自行业都是很出色的人，没必看不完的邮件回不完的答疑，要这么苦逼自己。真的是非常震撼！给我的感觉就是有种师者，传道受业解惑，为学术二声普度众生的感觉！我们都能看到感受到几位老师的真诚和良苦用心！

[72楼] XinY** 2023-03-11 08:43

72楼吗？还好不算晚。

[73楼] 张磊** 2023-06-03 12:58

打卡第一天，开始学习webGL

浙江杭州

[74楼] 南瓜粥2** 2023-11-03 18:16

完全零基础的人，适合本课程吗

[75楼] 熊猫眼1** 2024-07-10 12:14

来了，才看到这个课程，相见很晚啊

前言

1、时间如梭

2、本教程读者对象

3、本教程技术支持

4、版权声明

提问或评论