欢迎来到Three.js零基础直通课程。这一小节并不会教你任何知识点,本篇更像是一个自我介绍和向大家讲述我们将在这系列课程中会学到些什么。
我是谁?
我叫大帅,是国内很早的一批FLASH工程师,后来在国际知名的广告公司从事多媒体交互开发,大部分程序员可能不太了解我所在的行业。简单点说,我的大部分工作内容是帮国际知名品牌客户搭建交互酷炫、重视展现效果的网站或APP。
早在2011年我就开创了自己的工作室,服务了很多客户,做了成百上千个网站、APP等,其中就包括一些使用Web3D技术搭建的网站,使用这种技术搭建的网站看上去真的非常酷炫。
现在,我是一名自由职业者,日常工作主要是接外包活儿和把自己所擅长的领域编写成在线的教程,我很乐于看到自己可以帮助大家学习新的技术。
为什么做这个课?
当我自己在学习Three.js的时候,并没有很多教程,只能啃当时并不太完善的官方文档。不过,今天的官方文档已经做得非常好了,学习曲线很平滑,社区内容也非常丰富。但是,以实战教学为主的Three.js课程依然不多。而我用Three.js为客户搭建过数个成熟的作品,以这些真实的项目作为教学的基础,能帮助大家更好的理解Three.js文档中的知识点,学完就可以上手做出类似的作品,是非常实用的。
在做这个课程之前,我在技术社区和自己的个人公众号里也曾发布过一些相关的免费实战教程,有很多同学留言说喜欢我的教程,实战项目很经典,很有实用价值,希望我可以结合自己丰富的实战经验和项目出一个全面的Three.js课程。
所以,就有了这个课。
你将学到什么?
Three.js这个框架所包含的技术点,知识点都非常多,你可以用它做很多你不曾想过的事情。这也是为什么相关的课程很难做的原因。
首先,我们将从学习所有基础知识开始,比如创建我们的第一个场景,添加一些3D对象,选择正确的材质,添加纹理以及使这些内容做出一些动画效果。
然后,我们将学习到一些必备的技能。比如,创建我们自己的几何物体,添加光源和阴影,让3D对象响应点击等用户交互,添加粒子效果等。
最后,我们还将学习到一些更有趣的技术,会有点难,但掌握它们后真的能让你进入一个全新的领域。比如创造真正的物理世界,生成逼真的渲染图,编写自定义着色器等。甚至,我们还将在课程里学习到Blender,这个当前非常流行的3d软件的基础使用,并用它来创建我们自己的3d模型。
在本课程中我们也会学习到如何监控WebGL的渲染性能,并用一些技巧来优化提升性能,这会使我们的Web3D作品在尽可能多的设备上运行。
当然,你可能会有点慌,担心自己是不是能学会看懂课程中的内容。有这种感觉很正常,不用过于担心。首先,我们要认识到,学习Three.js当然是有些挑战的,因为现在真正掌握这个框架并能够应用自如的人还很少很少,如果你坚持学习完并掌握了它将很具备竞争力。另外,本课程非常注重实战教学,每小节都会基于一些技术点的实际应用,学完就可以做出自己的作品。
如何学习本课程?
我建议你使用带有两块屏幕的电脑来学习本课程,或者一块足够大的屏幕。这样可以一边看课程,一边跟着敲代码。对于一个注重实战教学的课程来说,请务必把课程中的案例都跟着做出来。
课程小节
小节和小节之间是有一些递进联系的,是精心设计的学习路径,最好按顺序学习,但是如果你确定对某小节的课程内容很了解,也可以直接跳过它们。课程中的每个实战部分,都会提供响应的项目代码。
每节课都有图文教程+视频(视频课将独立售卖和交付)
源码
本课程中的所有源码,同学们都可以随意使用,我也很乐意看到这些源码能帮助大家。
注意事项
- 你得有一台性能还过得去的电脑,课程中使用的是macOS系统,在学习时可能需要注意相同软件在不同系统中的区别。
- 本课程对初学者友好,但你依然需要掌握基本的JavaScript知识,比如变量,循环,函数,事件等。
- 使用VS Code来编写课程中的项目。
- 使用Chrome浏览器来预览课程中的项目。
OK,如果你对Three.js一无所知,那么恭喜你来对地方了。
特别声明
本课程大部分内容参考翻译自广受好评的课程《Three.js Journey》,对其中不符合中国开发者实际应用场景的部分进行了优化改良。再次特别声明以及感谢《Three.js Journey》的作者Bruno Simon。