Three.js 进阶之旅，掘金专栏配套项目。从基础入门开始，全方位了解 Three.js 的各种特性，并结合和应用对应特性，实现令人眼前一亮的 Web 创意页面，进而逐步挖掘 Three.js 和 WebGL 深层次的知识。
📚掘金专栏配套项目：https://juejin.cn/column/7140122697622618119
对项目内容有不明白的地方可前往项目对应文章查看。
摘要：本文是Three.js 进阶之旅系列专栏的首篇文章，本专栏的主要内容具体规划如下：前两篇将简要介绍 Three.js 开发环境搭建以及Three.js 的一些基础概念和必备知识，如果读者已经有一定的 Three.js 3D项目开发基础，可以直接跳过这两章内容。后续文章会通过一个个趣味的 3D 页面实例，逐步讲解 Three.js 相关性能优化、着色器、后期渲染、物理特性等应用中知识，期间也会穿插介绍一些 3D 建模、压缩工具和技巧。本专栏适用于有一定 JavaScript 和 CSS 编程基础的同学，相信阅读完此专栏，一定会对 Three.js 有进一步的理解。
摘要：本篇文章将继续通过一个简单 3D 创意页面的开发，简要汇总一下必备的 Three.js 的基础知识，梳理要点，为后续页面的开发打下坚实的基础。通过本文的内容，你将获得的知识包括：OrbitControls 镜头轨道控制器的使用、Scene.Fog 场景雾化、Three.js 中的光源、几何体、材质、模型、贴图、动画等。
文章：Three.js 进阶之旅：模型光源结合生成明暗变化的创意页面-光与影之诗 💡
摘要：本文使用 Three.js 基础知识以及 Tween 补间动画相关的知识，创建一个使用光源和模型结合而成的 3D 创意页面。通过本文内容，你将学到的知识包括：使用 Blender 压缩模型、使用模型加载管理器管理加载进度、使用模型加载器加载压缩过的模型、优化渲染器的输出效果、使用 TWEEN 实现位移动画和镜头补间动画、点光源随鼠标移动动画、鼠标光标悬浮到导航栏时虚拟光标动画、监听页面元素可见性以及 CSS 动画效果等。
文章：Three.js 进阶之旅：神奇的粒子系统-迷失太空 👨🚀
摘要：本文将讨论关于 Three.js 中各种创建粒子的方式和以及如何优化粒子的样式和使用粒子，最终将结合本文所讲的粒子知识，制作一个充满趣味和创意的 3D 粒子页面——迷失太空。通过阅读本文及配套对应代码，你将学到的内容包括：使用 THREE.Sprite 创建粒子集合、使用 THREE.Points 创建粒子集合、如何创建样式化的粒子、使用 dat.GUI 动态控制页面参数、使用 Canvas 样式化粒子、使用纹理贴图样式化粒子、从高级几何体创建粒子、给场景添加 Fog 和 FogExp2 雾化效果、使用 正余弦函数 给模型添加动画效果、鼠标移动动画等。
摘要：本文内容主要介绍 Three.js 中的着色器知识，通过讲解什么是着色器、着色器的分类、GLSL 语言的核心语法要点、Three.js 中的两种着色器材质的 RawShaderMaterial 和 ShaderMaterial 的区别和用法等基本知识，深入理解着色器，并使用它创建出有趣的三维图形。
文章：Three.js 进阶之旅：Shader着色器基础图案-旷野之息神庙铁球 🔮
摘要：本文内容主要是 Three.js 着色器的实践和应用，将在上篇文章的基础上通过 50个 着色器简易图案例子，一步步理解使用着色器创建图案的步骤和技巧。最后，将使用绘制的着色器图案，构建一个类似于《塞尔达传说：旷野之息》游戏中的神庙铁球效果。
文章：Three.js 进阶之旅：后期处理-3D瑞克与莫蒂 🛸
摘要：本文内容就接着上文内容详细讲解一下 Three.js 后期处理的基本知识。最后，通过结合文章讲解的知识内容，将开发一个《瑞克与莫蒂》发光传送门效果的 3D 页面。
👨💻持续更新中 ···