课程简介：
-
随着元宇宙、数字孪生的火热，前端3D可视化需求越来越广泛，懂 WebGL 技术的前端人才也成为行业香饽饽，薪资诱人颇有竞争力。本课程系统组织了WebGL 和 Three.js 知识内容，并结合图形学相关的数学知识，带你从0基础入门，体系化学习它们的基本、进阶、高级用法。最终通过一款高质量的 3D 可视化项目-智慧城市，让你顺利将 WebGL 和 Three.js 技术落地，掌握其实际应用
目录：
-
第1章 课程开篇
第2章 WebGL 简单应用：学习 WebGL 简单使用，建立 WebGL 认知
第3章 WebGL 多图形绘制和动画
第4章 WebGL 颜色和纹理
第5章 WebGL原理学习：OpenGL ES 语言
第6章 WebGL 三维世界
第7章 webgl 光照
第8章 WebGL 进阶操作
第9章 【Threejs 基础】简单实现一些阴影、雾化的效果
第10章 【Threejs 组件】每个组件都有其独特的使用方法，可以做特定的设置
第11章 【Threejs 光源】相信光，能照亮场景的每个角落，一个不够？再来几个吧。
第12章 【threejs 材质】不同的材质能呈现出不同的效果，合适最重要
第13章 【Threejs 几何体】还在为物体坐标烦恼吗？内置几何体来了
第14章 【Threejs 动画和相机】不同的角度看到的景色是不一样的，从多角度来观察吧
第15章 【Threejs 纹理】场景不再单一，丰富多了
第16章 【Threejs 粒子】舞动的精灵，你值得拥有
第17章 【智慧城市实战】基础内容怎么样了？来实战一下吧
第18章 番外篇：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)
-
视频：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)
-
视频：16-1 粒子和粒子系统(08:13)
-
视频：16-2 使用粒子实现水波效果(12:54)
-
视频：16-3 粒子组合成立方体(16:43)
-
视频：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)
-
视频：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)
-
视频：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)
-
视频：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)
-
视频：11-1 光源类型(02:52)
-
视频：11-2 聚光灯光源(17:56)
-
视频：11-3 环境光(03:41)
-
视频：11-4 点光源(02:51)
-
视频：11-5 平行光(04:50)
-
视频：11-6 半球光(04:58)
-
视频：10-1 基础组件 – Scene(05:55)
-
视频：10-2 基础组件 – 几何体(02:34)
-
视频：10-3 基础组件 – 正射投影相机(02:20)
-
视频：10-4 基础组件 – 透视投影相机(01:26)
-
视频：9-1 什么是 threejs(01:50)
-
视频：9-2 渲染三维对象(11:57)
-
视频：9-3 场景添加灯光(04:06)
-
视频：9-4 添加阴影效果(06:54)
-
视频：9-5 添加雾化效果(02:44)
-
视频：8-1 雾化(11:32)
-
视频：8-2 绘制圆形的点(04:55)
-
视频：8-3 绘制半透明物体(02:31)
-
视频：7-1 光是如何使用的(08:10)
-
视频：7-2 给场景添加光源(11:03)
-
视频：6-1 3D 基础(17:19)
-
视频：6-2 正射投影(10:20)
-
视频：6-3 透视投影(17:17)
-
视频：6-4 立方体绘制（顶点法）(11:59)
-
视频：6-5 立方体绘制（索引法）(12:57)
-
视频：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)
-
视频：4-1 使用 varying 变量 – 绘制彩色三角形(05:45)
-
视频：4-2 从顶点到图形 – webgl 渲染流程介绍(03:58)
-
视频：4-3 给图形添加背景图(24:15)
-
视频：4-4 使用多重纹理(09:05)
-
视频：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)
-
视频：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)
-
视频：1-1 课程导学(08:25)
-
视频：1-2 课程简介(03:11)
有需要联系v；加客服窗口的联系方式
摘要：本文深入探讨了《【WEB前端】WebGL+Three.js入门与实战，系统学习Web3D技术|完结无秘18章》一书，全面解析了Web3D技术的核心内容，从基础理论到实战应用，为读者提供了一套完整的WebGL+Three.js学习路径。
1、WebGL基础
WebGL是Web图形的JavaScript API，它允许开发者使用JavaScript和HTML5在网页中创建和显示3D图形。在《【WEB前端】WebGL+Three.js入门与实战，系统学习Web3D技术|完结无秘18章》中，作者详细介绍了WebGL的基本概念、渲染管线、着色器语言等基础知识，为读者打下了坚实的理论基础。
书中通过丰富的实例，如绘制三角形、立方体等，帮助读者逐步掌握WebGL的基本操作。此外，作者还深入讲解了WebGL的坐标系、投影、光照等高级概念，使读者能够更深入地理解Web3D技术的原理。
通过学习WebGL基础，读者可以掌握如何在网页中创建和渲染3D图形，为后续的学习和应用打下坚实的基础。
2、Three.js框架
Three.js是一个基于WebGL的JavaScript库，它简化了3D图形的开发过程，提供了丰富的API和组件，使得开发者可以更加轻松地创建和操作3D场景。
在《【WEB前端】WebGL+Three.js入门与实战，系统学习Web3D技术|完结无秘18章》中，作者详细介绍了Three.js的基本用法，包括场景、相机、几何体、材质、灯光等核心概念。
书中通过实例演示了如何使用Three.js创建各种3D场景，如简单的几何体、复杂的模型、动画效果等，使读者能够快速上手并掌握Three.js的使用方法。
通过学习Three.js框架，读者可以更加高效地开发3D应用，提高开发效率。
3、实战案例
《【WEB前端】WebGL+Three.js入门与实战，系统学习Web3D技术|完结无秘18章》不仅介绍了理论知识和框架使用，还提供了大量的实战案例，帮助读者将所学知识应用到实际项目中。
书中涵盖了多个领域的实战案例，如游戏开发、虚拟现实、增强现实等，使读者能够了解Web3D技术在各个领域的应用。
通过实战案例的学习，读者可以掌握Web3D技术的实际应用，提高自己的项目开发能力。
4、总结与展望
《【WEB前端】WebGL+Three.js入门与实战，系统学习Web3D技术|完结无秘18章》一书全面系统地介绍了Web3D技术，从基础理论到实战应用，为读者提供了一套完整的WebGL+Three.js学习路径。
通过学习本书，读者可以掌握Web3D技术的核心内容，提高自己的项目开发能力，为未来的职业发展打下坚实的基础。
随着Web3D技术的不断发展，相信WebGL+Three.js将在更多领域得到应用，为我们的生活带来更多可能性。
本文由nayona.cn整理
联系我们
关注公众号
微信扫一扫
支付宝扫一扫
