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

ECharts & WebVR学院

ECharts是现在国内最受欢迎的开源前端数据可视化产品,在GitHub上有16k的star,同时团队在WebGL上也有四年的技术积累,产出了像基础图形库 qtek,世界杯彩蛋,ECharts-X,百度大屏等产品。在这里大家可以学到如何基于ECharts将手上的数据制作成美观的可视化作品,以及如何使用WebVR制作VR展现。

关键词 echarts webgl
共发布 19个课程,已经有 2757名学生在这里学习上课
邹淼江
百度前端工程师,前端多面手,专注web全端工程化,可视化和webGL, webVR发烧追捧者。
李德清
气质优雅的李德清老师来自echarts团队,毕业于浙大可视化与可视分析实验室,echarts数据方向负责人,可以为你解答echarts以及数据可视化方面的问题
羡辙
ECharts 团队颜值超高的羡辙可以教你怎样做出颜值超高的可视化产品。
沈毅
百度资深前端工程师,echarts 团队成员,专注前端图形绘制三十年。
课程结束

难度:普通时间:大约需要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 设备后,根据头盔移动控制视角的变化; “小…

课程结束

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

400人在学习该课程,有146人已经完成该课程

ECharts NO.1 - 零基础绘制ECharts图表

任务目的 了解基础的 ECharts 用法 了解基础的前端页面编写 任务描述 参考 ECharts 基础教程 编写一个简单的包含 ECharts 柱状图和折线图的展示页面 任务注意事项 作品需要在一个直角坐标系上同时显示折线图和柱状图 可以使用自己收集的数据 参考资料 可以参考echarts的官方示例 …

课程结束

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

99人在学习该课程,有75人已经完成该课程

ECharts NO.2 - 实现自定义的统计图表

任务目的 了解 ECharts 中坐标轴,系列颜色,标签等常见的自定义配置。 任务描述 通过修改图表中的样式实现自定义的统计图表,如下示意图: 修改图中的 坐标轴,标题,图例,系列颜色 等组件样式,实现一个自定义样式的统计图表 任务注意事项 图表中至少有两个系列(系列对应ECharts中的series) 可以使用任务一中的数据 参考资料 参考ECharts的官方示例, 直接在示例页修改配置并运行,可以看到样式效果 …

课程结束

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

68人在学习该课程,有35人已经完成该课程

ECharts No.4 - 可视化前的数据预处理

任务目的 学会使用 Node.js 将获取的 csv 格式的数据转换成能够用 echarts 展现的格式。 为什么要『数据预处理』? 我们拿到数据,或者自己整理数据,常使用『电子表格』(例如微软的 Excel、苹果的 Numbers)。csv 是这些电子表格软件都能识别的文件格式,这种格式很简单(只用逗号和换行符分隔数据)。而图表库一般都有自己的数据格式要求。例如 JavaScript 图表库要求数据的输入是 JSON 或者 JavaScript Array 格式:[ [20090821, A, 25.6, 25.61, 25.22, 25.55, 34758], [20090824…

课程结束

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

33人在学习该课程,有22人已经完成该课程

ECharts No.5 - 动态数据

任务目的 了解如何动态的修改图表中的数据 实现时序数据的实时更新 任务描述 在前一个任务(ECharts No.4 - 可视化前的数据预处理)的基础上,将展示改为: 首次进入,显示 30 天时间窗口的数据。 每隔 200ms 将时间窗口往后推一天,动态更新图表。 任务注意事项 除了我们提供的数据外可以也使用其它的时序数据。 可以参考这个教程:异步数据加载和更新 前一个任务(ECharts No.4 - 可视化前的数据预处理)要求使用 dataZoom 组件,本任务中可不使用。 …

课程结束

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

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

ECharts No.6 - 绘制人物关系图

任务目的 学习一些常见的关系数据(网络数据)可视化手段 任务描述 从 http://www-personal.umich.edu/~mejn/netdata/ 选择一份关系数据下载 用 gephi 对数据进行处理,布局,分类后导出成 gexf 格式。 解析 gexf 格式后用 ECharts 的 graph 类型图表展现。 任务注意事项 这个是 graph 图的 配置项手册。 echarts 中目前默认提供了两种『自动布局』方式:径向布局 和 力引导布局。另外,echarts 也支持展示『预先布局』好的数据(如例子)。 小数据集可以直接在 echarts 中用 力引导布局 布局。 …

课程结束

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

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

WebGL & ECharts - 【综合】绘制三维地图

任务目的 更深入的了解 GeoJSON 的格式 能够处理顶点数据,学会显示自定义的 WebGL 图形。 任务描述 解析 绘制地图 任务中得到世界地图的 GeoJSON 文件,用代码实时转成三维的模型后绘制。并且能够有一定的交互,比如点击高亮某个区域。 展现的效果如图(下图是中国地图,请自行替换成世界地图)https://github.com/100pah/ife/blob/master/2017Q1/echarts_3d_map/geo3d.png …

课程结束

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

68人在学习该课程,有46人已经完成该课程

ECharts NO.3 - 绘制地图

任务目的 了解 GeoJSON 格式并且能够用 ECharts 展示 任务描述 从 naturalearth 下载原始的世界地图数据并且转成 GeoJSON 格式。 使用 ECharts 提供的 geo 组件绘制上面步骤得到的 GeoJSON 文件。 任务注意事项 地图格式转换可以使用 mapshaper GeoJSON 文件大小需要控制在 1M 以内。 …

课程结束

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

24人在学习该课程,有6人已经完成该课程

ECharts NO.7 - 空气质量可视化

任务目的 学会数据的收集处理,能够综合应用地图,折线图等多种图表 任务描述 在网上收集不同城市最近一段时间空气质量的数据,通过散点图,折线图,饼图等手段多维度的去可视化空气质量。 任务注意事项 至少应用三种以上的图表类型 至少包含时序数据,地理数据两种类型数据的可视化 数据集可以使用 https://github.com/feelinglucky/AQI 参考资料 可以参考ECharts的官方示例 …

课程结束

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

13人在学习该课程,有3人已经完成该课程

WebGL & ECharts - 【综合】三维地球

前置课程:WebGL No. 3 - 材质与纹理ECharts NO.3 - 绘制地图 任务目的 能够综合使用 ECharts 地图的绘制和 ThreeJS 三维场景的绘制。 任务描述 用 ECharts 绘制世界地图,然后将绘制的结果作为纹理贴到 WebGL 绘制的地球上。 地球能够旋转缩放查看不同国家 ECharts 地图更新后地球贴图也能相应的更新 效果如图 附加如果能够实现鼠标 hover 区域高亮的效果更好 任务注意事项 展现尽量美观 echarts.init 可以使用 Canvas 作为容器,这个 Canvas 可以作为 WebGL 的纹理。 …