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

课程介绍

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

第1章 课程开篇

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

第2章 WebGL 简单应用：学习 WebGL 简单使用，建立 WebGL 认知

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

第3章 WebGL 多图形绘制和动画

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

第4章 WebGL 颜色和纹理

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

第5章 WebGL原理学习：OpenGL ES 语言

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

第6章 WebGL 三维世界

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

第7章 webgl 光照

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

第8章 WebGL 进阶操作

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

第9章 【Threejs 基础】简单实现一些阴影、雾化的效果

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

第10章 【Threejs 组件】每个组件都有其独特的使用方法，可以做特定的设置

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

第11章 【Threejs 光源】相信光，能照亮场景的每个角落，一个不够？再来几个吧。

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

第12章 【threejs 材质】不同的材质能呈现出不同的效果，合适最重要

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

第13章 【Threejs 几何体】还在为物体坐标烦恼吗？内置几何体来了

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

第14章 【Threejs 动画和相机】不同的角度看到的景色是不一样的，从多角度来观察吧

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

第15章 【Threejs 纹理】场景不再单一，丰富多了

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

第16章 【Threejs 粒子】舞动的精灵，你值得拥有

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

第17章 【智慧城市实战】基础内容怎么样了？来实战一下吧

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

第18章 番外篇：webgl里的数学

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