010-WebGL+Threejs入门与实战-系统学习Web3D技术
# WebGL+Three.js 入门与实战，系统学习 Web3D 技术
随着元宇宙、数字孪生的火热，前端3D可视化需求越来越广泛，懂 WebGL 技术的前端人才也成为行业香饽饽，薪资诱人颇有竞争力。本课程系统组织了WebGL 和 Three.js 知识内容，并结合图形学相关的数学知识，带你从0基础入门，体系化学习它们的基本、进阶、高级用法。最终通过一款高质量的 3D 可视化项目-智慧城市，让你顺利将 WebGL 和 Three.js 技术落地，掌握其实际应用。
# 课程目标
- 系统了解 Web3D 开发
- 正确认识 Web3D 的技术背景
- 学习当下热门行业的落地应用
- 26+ WebGL 核心技术
- 30+ Three.js 库核心技术
- 从0入门，技术逐步提升
- 从建模到3D特效渲染
- 完成高质量“智慧城市”项目
- 收获满意的个人3D作品
# 课程介绍
第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 文件，以及各种特效：特效：透明墙、地面扩散、发光扩散半球、发光旋转四棱锥、飞点、道路运动等~~
资源下载 (opens new window)提取码： http://dt1.8tupian.net/2/29369a296b200.pg1
编辑 (opens new window)
上次更新: 2025/04/19, 14:22:11