前言

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

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

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

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

1、时间如梭

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

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

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

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

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

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

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

有木有,有木有,同感。

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

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

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

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

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

2、本教程读者对象

  学习图形学的大学生;

  游戏开发者;

  Webglthreejs爱好者;

  已工作的工程师;

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

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

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

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

提问或评论

登陆后才可留言或提问哦:) 登陆 | 注册 登陆后请返回本课提问
用户名
密   码
验证码