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

课程大纲

  • 第1章 课程开篇 试看2 节 | 12分钟

    本章中,将介绍本门课的相关信息,包括知识概览、项目效果、所需知识、课程知识点整理等。

    收起列表

    • 视频:1-1 课程导学 (08:25)试看
    • 视频:1-2 课程简介 (03:11)
  • 第2章 WebGL 简单应用:学习 WebGL 简单使用,建立 WebGL 认知9 节 | 141分钟

    WebGL 简单应用,学习WebGL 简单使用,建立 WebGL 认知,具体内容包括:WebGL 基础结构、绘制一个点、WebGL 坐标系统、通过变量绘制一个点、vertexAttrib3f() 同族兄弟等。

    收起列表

    • 视频:2-1 canvas 和 webgl 的区别 (04:27)
    • 视频:2-2 认识 webgl,了解 webgl (16:56)
    • 视频:2-3 webgl 入门 – 给画布换个颜色 (10:03)
    • 视频:2-4 绘制一个点 (26:56)
    • 视频:2-5 介绍 webgl 三维坐标系 (11:49)
    • 视频:2-6 学习使用 attribute 变量-绘制一个水平移动的点 (15:46)
    • 视频:2-7 通过鼠标控制绘制 (16:36)
    • 视频:2-8 使用 uniform 变量 – 绘制不同颜色的点 (14:14)
    • 视频:2-9 实战:实现一个贪吃蛇小游戏 (23:29)
  • 第3章 WebGL 多图形绘制和动画11 节 | 109分钟

    本章节学习多图形、多缓冲区使用,学习如何实现动画,学习使用矩阵操来操作动画。

    收起列表

    • 视频:3-1 使用缓冲区对象 – 绘制多个点 (15:39)
    • 视频:3-2 多缓冲区和数据偏移 (09:01)
    • 视频:3-3 实现多种图形绘制 (08:42)
    • 视频:3-4 图形平移 – 着色器 (04:32)
    • 视频:3-5 图形缩放 – 着色器 (02:00)
    • 视频:3-6 图形旋转 – 着色器 (05:28)
    • 视频:3-7 图形平移 – 平移矩阵 (13:23)
    • 视频:3-8 图形缩放 – 缩放矩阵 (06:43)
    • 视频:3-9 图形旋转 – 旋转矩阵 (09:56)
    • 视频:3-10 图形复合变换 – 矩阵组合 (12:42)
    • 视频:3-11 实战:实现动态入场效果 (20:09)
  • 第4章 WebGL 颜色和纹理5 节 | 54分钟

    本章节,学习在WebGL 中修改图形颜色,学会使用图片进行贴图操作和使用多重纹理。

    收起列表

    • 视频:4-1 使用 varying 变量 – 绘制彩色三角形 (05:45)
    • 视频:4-2 从顶点到图形 – webgl 渲染流程介绍 (03:58)
    • 视频:4-3 给图形添加背景图 (24:15)
    • 视频:4-4 使用多重纹理 (09:05)
    • 视频:4-5 实战:实现基于 webgl 的放大镜 (10:27)
  • 第5章 WebGL原理学习:OpenGL ES 语言8 节 | 47分钟

    WebGL原理学习:OpenGL ES 语言自定义着色器的必备知识点,学习基础语法和简单使用。

    收起列表

    • 视频:5-1 OpenGL ES 语言基础 (07:24)
    • 视频:5-2 矢量和矩阵 (03:29)
    • 视频:5-3 纹理取样器 (03:03)
    • 视频:5-4 分支和循环 (02:26)
    • 视频:5-5 函数 (02:24)
    • 视频:5-6 内置函数介绍 (02:48)
    • 视频:5-7 存储限定词 (04:47)
    • 视频:5-8 实战:实现 webgl 小球融合 (19:57)
  • 第6章 WebGL 三维世界6 节 | 89分钟

    如何定义一个三维场景,如何将物体渲染到三维场景中,学会使用顶点法和索引法绘制立方体。

    收起列表

    • 视频:6-1 3D 基础 (17:19)
    • 视频:6-2 正射投影 (10:20)
    • 视频:6-3 透视投影 (17:17)
    • 视频:6-4 立方体绘制(顶点法) (11:59)
    • 视频:6-5 立方体绘制(索引法) (12:57)
    • 视频:6-6 实战:实现图形圆角 (18:35)
  • 第7章 webgl 光照2 节 | 20分钟

    没有光照的场景是不真实的,本章主要讲述光照的具体使用。

    收起列表

    • 视频:7-1 光是如何使用的 (08:10)
    • 视频:7-2 给场景添加光源 (11:03)
  • 第8章 WebGL 进阶操作3 节 | 19分钟

    在 WebGL 中如何选中物体?能不能实现圆角的物体?能不能设置透明度?本章会告诉你答案。

    收起列表

    • 视频:8-1 雾化 (11:32)
    • 视频:8-2 绘制圆形的点 (04:55)
    • 视频:8-3 绘制半透明物体 (02:31)
  • 第9章 【Threejs 基础】简单实现一些阴影、雾化的效果5 节 | 28分钟

    介绍 Threejs 基础使用和基本结构,简单实现一些阴影、雾化的效果~~

    收起列表

    • 视频:9-1 什么是 threejs (01:50)
    • 视频:9-2 渲染三维对象 (11:57)
    • 视频:9-3 场景添加灯光 (04:06)
    • 视频:9-4 添加阴影效果 (06:54)
    • 视频:9-5 添加雾化效果 (02:44)
  • 第10章 【Threejs 组件】每个组件都有其独特的使用方法,可以做特定的设置4 节 | 13分钟

    threejs 中,每个组件都有其独特的使用方法,可以做特定的设置,通过不同的相机也可以模拟不同的效果。

    收起列表

    • 视频:10-1 基础组件 – Scene (05:55)
    • 视频:10-2 基础组件 – 几何体 (02:34)
    • 视频:10-3 基础组件 – 正射投影相机 (02:20)
    • 视频:10-4 基础组件 – 透视投影相机 (01:26)
  • 第11章 【Threejs 光源】相信光,能照亮场景的每个角落,一个不够?再来几个吧。6 节 | 38分钟

    本章讲解,【光源基础】分类和属性、【聚光灯】 SpotLight、【环境光】 AmbientLight、【点光源】 PointLight、【太阳光】 Directinallight、 【半球光】 HemisphereLight~~

    收起列表

    • 视频:11-1 光源类型 (02:52)
    • 视频:11-2 聚光灯光源 (17:56)
    • 视频:11-3 环境光 (03:41)
    • 视频:11-4 点光源 (02:51)
    • 视频:11-5 平行光 (04:50)
    • 视频:11-6 半球光 (04:58)
  • 第12章 【threejs 材质】不同的材质能呈现出不同的效果,合适最重要10 节 | 45分钟

    本章讲解 MeshBasicMaterial、 MeshDepthMaterial、MeshNormalMaterial、MeshFaceMaterial、 MeshLambertMaterial、MeshPhongMaterial、ShaderMaterial、直线和虚线~~

    收起列表

    • 视频:12-1 材质简介 (05:18)
    • 视频:12-2 基础材质 (05:39)
    • 视频:12-3 深度材质 (04:23)
    • 视频:12-4 法向材质 (03:40)
    • 视频:12-5 面材质 (02:02)
    • 视频:12-6 郎伯材质 (03:47)
    • 视频:12-7 Phong 材质 (03:15)
    • 视频:12-8 着色器材质 (06:47)
    • 视频:12-9 直线和虚线 (07:17)
    • 视频:12-10 联合材质 (02:46)
  • 第13章 【Threejs 几何体】还在为物体坐标烦恼吗?内置几何体来了11 节 | 68分钟

    本章讲解分类和属性、平面、圆、自定义二维图形、立方体、球体、圆柱体、圆环、纽结、多面体、文字~~

    收起列表

    • 视频:13-1 几何体简介 (01:52)
    • 视频:13-2 二维平面 (19:12)
    • 视频:13-3 二维圆 (04:35)
    • 视频:13-4 自定义二维图形 (02:37)
    • 视频:13-5 立方体 (04:10)
    • 视频:13-6 球体 (04:44)
    • 视频:13-7 圆柱体 (04:32)
    • 视频:13-8 圆环 (04:44)
    • 视频:13-9 纽结 (03:52)
    • 视频:13-10 多面体 (08:24)
    • 视频:13-11 文字 (08:37)
  • 第14章 【Threejs 动画和相机】不同的角度看到的景色是不一样的,从多角度来观察吧6 节 | 61分钟

    本章讲解,简单动画、使用 Tween 实现动画、点击选取对象~~

    收起列表

    • 视频:14-1 基础动画 (02:24)
    • 视频:14-2 通过 Tween 实现动画 (05:28)
    • 视频:14-3 点击选取对象 (10:50)
    • 视频:14-4 加载外部文件 (05:25)
    • 视频:14-5 使用相机控件 (09:01)
    • 视频:14-6 实战:实现骨骼动画 (27:05)
  • 第15章 【Threejs 纹理】场景不再单一,丰富多了6 节 | 54分钟

    本章讲解基础纹理、凹凸贴图、法向贴图、环境贴图、canvas 贴图~~

    收起列表

    • 视频:15-1 基础纹理 (05:39)
    • 视频:15-2 凹凸贴图 (05:25)
    • 视频:15-3 法向贴图 (05:56)
    • 视频:15-4 环境贴图 (13:16)
    • 视频:15-5 canvas贴图 (05:10)
    • 视频:15-6 实战:实现辉光效果 (18:11)
  • 第16章 【Threejs 粒子】舞动的精灵,你值得拥有3 节 | 38分钟

    本章讲解粒子、粒子系统、创建水波效果、粒子组合成立方体等~~

    收起列表

    • 视频:16-1 粒子和粒子系统 (08:13)
    • 视频:16-2 使用粒子实现水波效果 (12:54)
    • 视频:16-3 粒子组合成立方体 (16:43)
  • 第17章 【智慧城市实战】基础内容怎么样了?来实战一下吧23 节 | 284分钟

    本章讲解blender基础使用,创建场景,加载 fbx 文件,以及各种特效:特效:透明墙、地面扩散、发光扩散半球、发光旋转四棱锥、飞点、道路运动等~~

    收起列表

    • 视频:17-1 blender基础使用 (04:20)
    • 视频:17-2 通过blender创建城市模型 (09:50)
    • 视频:17-3 创建项目及场景添加 (17:29)
    • 视频:17-4 加载城市模型 (21:00)
    • 视频:17-5 背景天空盒 (06:09)
    • 视频:17-6 添加交互效果 (12:15)
    • 视频:17-7 给建筑物添加渐变色 (11:53)
    • 视频:17-8 创建建筑物外围线条 (07:21)
    • 视频:17-9 添加建筑物扫描线 (09:23)
    • 视频:17-10 添加场景扫描线 (11:57)
    • 视频:17-11 特效:雷达效果 (13:50)
    • 视频:17-12 特效:透明墙 (14:49)
    • 视频:17-13 特效:地面扩散 (09:15)
    • 视频:17-14 特效:扩散半球 (05:43)
    • 视频:17-15 特效:旋转四棱锥 (09:26)
    • 视频:17-16 特效:飞线 (16:58)
    • 视频:17-17 特效:路径移动 (04:02)
    • 视频:17-18 场景文字添加 (08:59)
    • 视频:17-19 天气:冬雪 (21:10)
    • 视频:17-20 天气:夏雨 (19:28)
    • 视频:17-21 跟随鼠标缩放 (09:22)
    • 视频:17-22 建筑物生长 (11:16)
    • 视频:17-23 烟雾预警 (27:51)
  • 第18章 番外篇:webgl里的数学10 节 | 62分钟

    讲解与 webgl 相关的数学知识~~

    收起列表

    • 视频:18-1 番外 1 三角函数 (06:26)
    • 视频:18-2 番外 2 向量乘以标量 (04:42)
    • 视频:18-3 番外 3 向量长度计算 (02:28)
    • 视频:18-4 番外 4 两个向量的距离 (08:43)
    • 视频:18-5 番外 5 归一化 (01:36)
    • 视频:18-6 番外 6 点积 (08:15)
    • 视频:18-7 番外 7 叉积 (07:06)
    • 视频:18-8 番外 8 向量运算 (08:55)
    • 视频:18-9 番外 9 矩阵运算 (11:12)
    • 视频:18-10 番外 10 旋转矩阵 (02:29)

  • 领取方式:购买或签到后获取下载链接

  • 视频清晰度:超清

  • 课程总容量:7.9GB

  • 课程视频格式:mp4

  • 是否带源码等资料:是

 

隐藏内容

此处内容需要权限查看

  • 普通9.9学币
  • 永久会员免费推荐

 

课程截图