首页 实战 WebGL+Three.js 入门与实战,系统学习 Web3D 技术
收藏

WebGL+Three.js 入门与实战,系统学习 Web3D 技术

前端的技术蓝海,涨薪好选择

WebGL+Three.js 入门与实战,系统学习 Web3D 技术

¥348.00
难度 入门 时长 20小时 学习人数 250 综合评分 10.00

随着元宇宙、数字孪生的火热,前端3D可视化需求越来越广泛,懂 WebGL 技术的前端人才也成为行业香饽饽,薪资诱人颇有竞争力。本课程系统组织了WebGL 和 Three.js 知识内容,并结合图形学相关的数学知识,带你从0基础入门,体系化学习它们的基本、进阶、高级用法。最终通过一款高质量的 3D 可视化项目-智慧城市,让你顺利将 WebGL 和 Three.js 技术落地,掌握其实际应用。

yancy
讲师

高级架构师

课程预览

检测到您还没有关注慕课网服务号,无法接收课程更新通知。请扫描二维码即可绑定
重新观看

看清趋势,学习WebGL+Three.js ,提早进军 Web3D 开发工程师

非常适合前端工程师的新兴技术与职业方向

系统了解 Web3D 开发
正确认识 Web3D 的技术背景
学习当下热门行业的落地应用
把握个人职业发展前景
掌握 Web3D 核心技术
26+ WebGL 核心技术
30+ Three.js 库核心技术
从0入门,技术逐步提升
实战 Web3D 综合项目
从建模到3D特效渲染
完成高质量“智慧城市”项目
收获满意的个人3D作品

从 0 开始逐步深化,构造较完整的 Web3D 技能体系

从底层到框架,Three让 WebGL 的应用变得简单

WebGL

基础 进阶 高阶
  • WebGL清除缓冲区
  • 点的绘制
  • 通过鼠标控制绘制
  • 缓冲区对象的使用
  • 多缓冲区对象和数据偏移
  • 多图形的绘制
  • 图形旋转
  • 图形缩放
  • 图形平移体
  • 旋转矩阵
  • 缩放矩阵
  • 平移矩阵
  • 矩阵复合变换
  • 着色器数据传输
  • 使用纹理
  • 使用多重纹理
  • OpenGL ES语言
  • 三维场景创建
  • 正射投影矩阵
  • 透视投影矩阵
  • 立方体绘制
  • 光源处理
  • 实现雾化
  • 绘制圆形的点
  • 绘制半透明物

Three.js

基础 进阶 高阶
  • Three.js基础组件,正射和
       透视投影相机使用,几何体
       和场景的基础属性和功能
  • Three基础场景
       雾化实现、灯光添加
       渲染三维对象、添加阴影
  • Three.js光源
  • Three.js几何体
  • Three.js材质
  • Three.js动画和相机控件
  • Three.js加载外部文件
  • Three.js基础纹理
  • Three.js凹凸贴图
  • Three.js法向贴图
  • Three.js环境贴图
  • Three.js canvas贴图
  • 粒子效果
  • 使用粒子实现特效

上手热门企业级3D智慧城市项目,综合落地所学

打造酷炫城市街景,完成智慧城市模型搭建

涵盖目前主流的3D功能实现

通过 Vue3 + Vite 创建项目
通过 Threejs 创建三维场景
通过 blender 生成城市模型
通过 WebGL 着色器实现楼宇颜色变换、城市扫描、
楼宇扫描、光墙、扩散圆、扩散半球等特效
通过 Three 粒子系统实现飞线、路径移动等特效

课程涵盖3D紧密相关的图形学知识,深入底层学得更透彻

三角函数

正弦函数余切函数

余切函数两角和差

两角和差

向量的计算

标量乘以向量向量长度

点积两个向量之间的距离

叉积向量基本运算

归一化向量

矩阵的计算

矩阵基本运算透视投影矩阵

旋转矩阵矩阵与标量的运算

视图矩阵矩阵与向量

正射投影矩阵

第1章 课程开篇
本章中,将介绍本门课的相关信息,包括知识概览、项目效果、所需知识、课程知识点整理等。
第2章 WebGL 简单应用:学习 WebGL 简单使用,建立 WebGL 认知
WebGL 简单应用,学习WebGL 简单使用,建立 WebGL 认知,具体内容包括:WebGL 基础结构、绘制一个点、WebGL 坐标系统、通过变量绘制一个点、vertexAttrib3f() 同族兄弟等。
第3章 WebGL 多图形绘制和动画
本章节学习多图形、多缓冲区使用,学习如何实现动画,学习使用矩阵操来操作动画。
第4章 WebGL 颜色和纹理
本章节,学习在WebGL 中修改图形颜色,学会使用图片进行贴图操作和使用多重纹理。
第5章 WebGL原理学习:OpenGL ES 语言
WebGL原理学习:OpenGL ES 语言自定义着色器的必备知识点,学习基础语法和简单使用。
查看完整目录
专属服务

每个慕课网课程,都是一个专业的技术社区

个性化增值服务,学习有保障更高效

答疑专区+技术社区
连百度谷歌都搜不到的问题,在这里讲
师都将耐心详细解答,更有小伙伴一起
交流互动,共同进步。
独家“动态”教辅材料
丰富的专属教辅资料上传更新,通过课
程教案、原理图解、技术文档、演示案
例等各种教材,保障你的学习效果。
课程全套代码下载
提供课程全套源代码下载,包含:
全套组件封装镜像、私有仓库、各个服
务的镜像、项目源代码。
实用电子文档
部分简单内容以图文形式呈现,与视频相
配合,既保障学习效果,又提高了学习效
率。
适合人群
对 3D 感兴趣的同学
期望在前端领域多维度发展的同学
技术储备
有一定的 JS 基础
有一定的项目开发经验
环境参数
Node 16.17.0
NPM 8.15.0
Vue 3.2.41
提问
数据加载中...
意见反馈 帮助中心 APP下载
官方微信

学习咨询

选课、学习遇到问题?

扫码添加指导老师 1V1 帮助你!

添加后老师会第一时间解决你的问题