百度前端技术学院是一个为大学生创办的免费的前端技术实践、分享、交流平台。由百度校园招聘组、百度校园品牌部、百度前端技术部以及多个百度的前端团队联合创办。学院组织了一批百度在职工程师,精心编写了数十个实践编码任务,将技术知识点系统有机地串联在各个充满趣味与挑战的任务中,同学们通过实际地编码练习来掌握知识,再辅以互相评价、学习笔记等方式,加深对于学习内容的理解。在过去的三年中,百度前端技术学院累积吸引了上万名同学参加,并且有数十名同学在学习后,顺利加入了百度,成为了百度的前端工程师。

羡辙

ECharts 团队颜值超高的羡辙可以教你怎样做出颜值超高的可视化产品。

共发布 10个任务,已经有 1944名学生在这里学习上课
课程结束

难度:普通时间:大约需要1

1468人在学习该课程,有168人已经完成该课程

WebGL No.1 - Three.js 入门

ECharts & WebVR 学院 之 WebGL 方向 在 WebGL 方向的教学过程中,你将了解到 WebGL 的一些基本原理,并且基于 Three.js 动手实现三维渲染的世界。 我们将以《Three.js 入门指南》作为主要参考教程,在此基础之上,也会补充其他的学习资料,指导大家从零基础掌握前端 3D 渲染相关知识。对于有一定图形学基础的同学,可以直接从进阶部分开始学习诸如动画、模型、光影、着色器等话题。 每一题需要提供可运行的网页链接和源码链接。 本方向的 QQ 群号:383578356 储备知识 需要对 JavaScript 比较了解; 无需了解图形学相关知识。 任务…

课程结束

难度:进阶时间:大约需要2

133人在学习该课程,有91人已经完成该课程

WebGL No. 2 - 光与影

本方向的 QQ 群号:383578356 任务目的 在这一题中,你需要了解 Three.js 中不同类型的光源,并学会将它们添加到场景中。 任务描述 学习《Three.js 入门指南》第 8 章光与影; 理解不同类型灯光的区别和适用场景; 学会为场景添加合适的灯光; 思考灯光的位置对哪些类型的灯光是无所谓的,以及为什么; 思考为什么有些灯光无法形成阴影; 在第 1 题场景的基础上,增加光照效果; 如果你没做第 1 题,也可以随便在场景中创建一些物体; 为物体设置合适的材质(预习第 4 章),使得物体的亮度根据光照有所区别; 创建一个地板平面,并将小车投影到地板上 尝试并思考,一个物体…

课程结束

难度:进阶时间:大约需要1

88人在学习该课程,有60人已经完成该课程

WebGL No. 3 - 材质与纹理

任务目的 在这一题中,你将接触到如何为物体设置不同的材质,并且使用图片作为纹理。 任务描述 学习《Three.js 入门指南》第 4 章材质; 为小车的车厢的六个面设置贴图,图片可以随便画,也可以网上找资源; 为小车的轮胎和地板设置合适的材质。 …

课程结束

难度:进阶时间:大约需要2

66人在学习该课程,有53人已经完成该课程

WebGL No. 4 - 照相机和交互控制

任务目的 在这一题中,你将了解如何为场景设置合适的照相机位置,并且配合鼠标实现交互控制照相机位置。 任务描述 学习《Three.js 入门指南》第 2 章照相机; 为场景添加合适的照相机位置; 实现交互控制照相机位置; 场景可以使用前两题的,也可以随意添加一些物体; 使用 TrackballControls 实现 Three.js 例子 的效果; 左键旋转、中键缩放、右键平移; Three.js 提供了一类辅助类的代码,比如用于交互控制的 TrackballControls ,这些代码不包括在 three.js 文件中,需要使用的话要额外引入,在这题中,可以使用这个文件快速实现效果; 可以参…

课程结束

难度:进阶时间:大约需要2

57人在学习该课程,有39人已经完成该课程

WebGL No.5 - 动画

任务目的 在这一题中,你将学会如何让画面动起来! 任务描述 学习《Three.js 入门指南》第 5 章网格和第 6 章动画; 使用 requestAnimationFrame 实现画面更新; 使用 stats.js 监控帧率; 键盘 WASD 控制小车的前进、后退、转弯; 简单的转弯可以做成,按下一次 A 后整个小车模型瞬间左转一定角度; 有能力的同学可以做得更接近真实一些,比如按下 A 后,前轮旋转一定角度,这时小车和轮子的位置和角度需要考虑计算一下。 …

课程结束

难度:困难时间:大约需要2

37人在学习该课程,有30人已经完成该课程

WebGL No.6 - 外部模型

任务目的 在这一题中,你将学会导入外部模型。 任务描述 学习《Three.js 入门指南》第 7 章外部模型; 加载不同格式的小车模型(在网上找资源),需要导入模型的材质纹理; 如果感兴趣,可以在 blender 中创建一个简单的小车模型,了解从建模到导入模型的整个流程。 …

课程结束

难度:困难时间:大约需要3

25人在学习该课程,有15人已经完成该课程

WebGL No.7 - 着色器

任务目的 在这一题中,你将了解到着色器的相关知识,并且实现一个简单的卡通着色器。 任务描述 学习《Three.js 入门指南》第 9 章着色器; 学习《卡通渲染》,在理解代码的基础上,可以尝试一些改进(比如例子中使用了单一的颜色,那么如何将纹理和亮度结合起来生成卡通效果呢;可以自己尝试一些别的实现),前往不要直接把代码复制到自己的项目中,这样你学不到东西; 实现简单的卡通着色器。 上图(图片来源:Wikipedia)显示的是卡通渲染的例子,左图是茶壶面片的 wireframe,中间的图是用纯色着色器渲染的结果,右图是卡通渲染的结果。 实现的思路是,当亮度定为几个区间,在某个区间就用其对应…

课程结束

难度:困难时间:大约需要2

18人在学习该课程,有11人已经完成该课程

WebGL No.8 - 物理引擎

任务目的 在这一题中,你将使用物理引擎对场景中的物体进行碰撞识别和处理。 任务描述 把地板做成长条形的跑道,有能力的可以做成动态增长的; 使用 Physijs,在场景中创建多个可碰撞的物体(可以是从天而降的),玩家控制小车进行碰撞; 正方体碰撞后会得分,闪烁三秒后消失; 球体碰撞后会使小车停下,小球; 你可以自己设计一些其他功能的物体; 有能力的同学可以使用 Three.js 的音频模块 加入相应的音效。 在界面上实现得分显示。 …

课程结束

难度:困难时间:大约需要2

21人在学习该课程,有0人已经完成该课程

WebGL No.9 - WebVR

任务目的 在这一题中,你将使用 WebVR 技术实现场景浏览效果。 任务描述 使用 WebVR Boilerplate 快速搭建 WebVR 环境,支持在非 WebVR 环境下提供模拟; 将视角跟随小车,以第一人称观察,控制小车行进。 …

课程结束

难度:困难时间:大约需要7

31人在学习该课程,有0人已经完成该课程

WebGL No.10 -【综合】追风年代:第一人称三维赛车游戏

任务目的 在这一题中,将结合前面完成的题目,实现一个完整的游戏。 任务描述 以小车进行第一人称观察,屏幕中可以看到部分的小车; 动态生成无限长的跑道,在小车远离后,动态销毁后方跑道(注意倒车时的处理); 动态生成可碰撞的物体(障碍物、道具、积分等),具体功能自行设计; 根据游戏逻辑(比如计时游戏、固定时长等)设计计分板等 UI 元素; 跑道旁放置一些载入的模型,如树、石头等; 你可以为你的游戏增加一些额外的元素,以下是一些思路(选做): 不是直线型的跑道,可以为弧线或者折线; 使用 Three.js 的音频模块 加入适当的音效; 支持佩戴 VR 设备后,根据头盔移动控制视角的变化; “小…