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

课程简介：

随着元宇宙、数字孪生的火热，前端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 认知8 节 | 117分钟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)
- 第3章 WebGL 多图形绘制和动画10 节 | 89分钟本章节学习多图形、多缓冲区使用，学习如何实现动画，学习使用矩阵操来操作动画。收起列表
  - 视频：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)
- 第4章 WebGL 颜色和纹理4 节 | 44分钟本章节，学习在WebGL 中修改图形颜色，学会使用图片进行贴图操作和使用多重纹理。收起列表
  - 视频：4-1 使用 varying 变量 – 绘制彩色三角形 (05:45)
  - 视频：4-2 从顶点到图形 – webgl 渲染流程介绍 (03:58)
  - 视频：4-3 给图形添加背景图 (24:15)
  - 视频：4-4 使用多重纹理 (09:05)
- 第5章 WebGL原理学习：OpenGL ES 语言7 节 | 27分钟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)
- 第6章 WebGL 三维世界5 节 | 70分钟如何定义一个三维场景，如何将物体渲染到三维场景中，学会使用顶点法和索引法绘制立方体。收起列表
  - 视频：6-1 3D 基础 (17:19)
  - 视频：6-2 正射投影 (10:20)
  - 视频：6-3 透视投影 (17:17)
  - 视频：6-4 立方体绘制（顶点法） (11:59)
  - 视频：6-5 立方体绘制（索引法） (12:57)
- 第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)

声明：1、IT王子是一个资源分享和技术交流平台，本站全部资料仅供个人学习和研究使用。 2、帖子内容作者同本站拥有相关版权 3、任何个人或组织，在未征得本站以及该贴作者同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。4、如若本帖作者内容侵犯了原著者的合法权益，请参考侵权投诉按要求提供相应版权证明材料，本站审核通过后会立即予以处理。