随着元宇宙、数字孪生的火热，前端3D可视化需求越来越广泛，懂 WebGL 技术的前端人才也成为行业香饽饽，薪资诱人颇有竞争力。本课程系统组织了WebGL 和 Three.js 知识内容，并结合图形学相关的数学知识，带你从0基础入门，体系化学习它们的基本、进阶、高级用法。最终通过一款高质量的 3D 可视化项目-智慧城市，让你顺利将 WebGL 和 Three.js 技术落地，掌握其实际应用。
WebGL
Three.js
通过 Vue3 + Vite 创建项目
通过 Threejs 创建三维场景
通过 blender 生成城市模型
通过 WebGL 着色器实现楼宇颜色变换、城市扫描、
楼宇扫描、光墙、扩散圆、扩散半球等特效
通过 Three 粒子系统实现飞线、路径移动等特效
正弦函数余切函数
余切函数两角和差
两角和差
标量乘以向量向量长度
点积两个向量之间的距离
叉积向量基本运算
归一化向量
矩阵基本运算透视投影矩阵
旋转矩阵矩阵与标量的运算
视图矩阵矩阵与向量
正射投影矩阵
亲，您好~两门课程差别很大，数据可视化讲得是目前网页上数据展示的各种方案，比如数据大屏，数据报表等，而 webGL ，是专门做虚拟场景的，你可以理解，是做 web 版的动画效果，2D 动画，3D 动画~~祝您学习愉快~
亲，您好~目前没有，可以看一下导学试看小节，里面可以看项目的演示效果~~祝您学习愉快~
亲，您好~可以的，可发邮件到 kf@imooc.com 服务邮箱申请~~祝您学习愉快~
亲，您好~PC端可以在线学习，APP端可以缓存下来在APP上离线观看视频学习～～祝您学习愉快~
亲，您好~support.supermap.com.cn 这个做立体图片不太了解，说下threesjs的实现吧，three有两种实现方式 1. 是通过创建一个立体模型并贴图来模拟立体图片 2. 是将二维图片组压缩到一个像素矩阵中 这是实现两种立体图片的方式，可以对比下 supermap 是如何实现的。祝您学习愉快~
向您推荐
如无法下载使用图片另存为
下载海报选课、学习遇到问题？
扫码添加指导老师 1V1 帮助你！
添加后老师会第一时间解决你的问题
