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

download地址: www.shanxueit.com?aff=9

WebGL

WebGL（Web 图形库）是一个 JavaScript API，可在任何兼容的 Web 浏览器中渲染高性能的交互式 3D 和 2D 图形，而无需使用插件。WebGL 通过引入一个与 OpenGL ES 2.0 非常一致的 API 来做到这一点，该 API 可以在 HTML5 元素中使用。这种一致性使 API 可以利用用户设备提供的硬件图形加速。

目前支持 WebGL 的浏览器有：

Firefox 4+
Google Chrome 9+
Opera 12+
Safari 5.1+
Internet Explorer 11+
Microsoft Edge build 10240+

Three.js

一个基于WebGL封装的3D库

学习过程

1. 了解WebGL基础知识：掌握WebGL的基本概念、API接口以及常见用法。了解WebGL的渲染流程、坐标系、材质、光照等概念。
2. 学习Three.js基础：掌握Three.js的基本用法、场景、相机、几何体、材质、光照等概念。了解Three.js的各种工具和插件，如动画、粒子系统、骨骼动画等。
3. 实战演练：通过实际案例，如制作3D地球、3D地形、3D游戏等，深入了解WebGL和Three.js的使用技巧和方法。在实战中不断尝试、调整和优化，提高自己的技术水平。

企业级项目

1. 通过 Vue3 + Vite 创建项目
2. 通过 Threejs 创建三维场景
3. 通过 blender 生成城市模型
4. 通过 WebGL 着色器实现楼宇颜色变换、城市扫描、楼宇扫描、光墙、扩散圆、扩散半球等特效
5. 通过 Three 粒子系统实现飞线、路径移动等特效