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

WebGL No.1 - Three.js 入门

普通

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

时间平均用时5.1

关键词three.js可视化WebGL

课程概述

作业提交截止时间:04-24

ECharts & WebVR 学院 之 WebGL 方向

在 WebGL 方向的教学过程中,你将了解到 WebGL 的一些基本原理,并且基于 Three.js 动手实现三维渲染的世界。

我们将以《Three.js 入门指南》作为主要参考教程,在此基础之上,也会补充其他的学习资料,指导大家从零基础掌握前端 3D 渲染相关知识。对于有一定图形学基础的同学,可以直接从进阶部分开始学习诸如动画、模型、光影、着色器等话题。

每一题需要提供可运行的网页链接源码链接

本方向的 QQ 群号:383578356

储备知识

  • 需要对 JavaScript 比较了解;
  • 无需了解图形学相关知识。

任务目的

在这一题中,你需要了解在网页中实现三维渲染的相关知识(涉及到 WebGL 和 Three.js 等),并且使用 Three.js 完成你的第一个作品。

任务描述

  • 学习《Three.js 入门指南》第 1 至 3 章;
    • 了解 WebGL 与 Three.js 的概念;
    • 掌握 Three.js 的基本知识;
    • 理解照相机概念及设置方式;
    • 学会创建基本形状,并将其添加到场景中;
  • 配置好 Three.js 环境,运行书中的代码;
  • 实现一个简单的小车模型,下图效果仅作为参考,可以根据自己掌握程度和创意实现类似的效果;
    • 在学习光影前,如果你创建的模型看起来是纯色,这完全是可以接受的;
    • 考虑如何用简单几何形状的组合,创造看起来更逼真的车;
    • 想一下,如果不用 Three.js,只使用 WebGL API 的话,实现这样的场景大概需要写哪些代码。

学员提交的作业 (-)
学员名称提交时间提交的代码预览效果评价数平均得分操作
课程优秀学习笔记
标题发布时间浏览量点赞量
three.js 基础学习笔记2017-02-24 17:06311026
Three.js入门2017-02-24 15:31221113
用THREE组个Q萌小车车2017-02-25 22:27197411
点击查看更多课程优秀笔记