本课程带你学习使用React Three Fiber搭建3D网站,全程以实战项目为导向,全面讲解打造专属3D网页体验的完整知识体系,即便你没有Three.js或R3F相关基础,也能轻松上手学习。

课程说明

助力全面提升3D网页开发能力,熟练运用当下主流工具,打造沉浸式网页交互体验。

  • 解锁全新前端技能:进阶掌握高端3D开发技术,变身创意型开发者,挖掘职业发展更多可能性。
  • 打造趣味互动页面:制作视觉效果出众的3D网页应用,让作品摆脱传统网站的局限。
  • 紧跟行业发展趋势:学习市场热门技术,提升个人竞争力,在行业竞争中占据优势。
  • 拓宽接单渠道:凭借专业的3D开发服务,对接高端客户,获得更可观的收入。

课程内容循序渐进,每个章节都会承接前文知识点,由浅入深讲解,让你稳步完成3D网页开发的学习之旅。

课程适配人群

只要你符合以下任意一种情况,这门课程都十分适合你:

  • 想要系统学习Three.js与React Three Fiber基础内容
  • 有意使用React Three Fiber开发3D网页,却不知如何起步
  • 具备Three.js使用经验,希望转型学习React Three Fiber
  • 学完Three.js Journey课程,想要深入钻研React Three Fiber相关技术
  • 需要体系化的3D开发、Three.js及React Three Fiber学习资料支撑项目开发
  • 接触过3D网站,想要独立制作属于自己的3D站点
  • 打算踏入创意编程领域,开启全新学习方向
  • 翻阅过React Three Fiber官方文档,急需系统化的分步教程入门

学习收获

完成本课程学习后,你将掌握以下技能:

  • 从零吃透Three.js和React Three Fiber核心基础知识
  • 跟随实战项目练习,熟练掌握3D开发核心概念与实操技巧
  • 学会在网页中导入、调整各类3D模型
  • 精通灯光、材质、动画等进阶功能的运用
  • 掌握3D内容优化方法,有效提升页面性能与用户体验

无论你是零基础新手,还是拥有开发经验的从业者,都能借助这门课程快速入门,逐步精通3D网页开发技术。

课程大纲

  1. 项目设置
  2. 三维对象
  3. 变换
  4. 摄像机
  5. 调试
  6. 灯光
  7. 阴影
  8. React Hooks
  9. React Three Fiber Hooks
  10. 控制器
  11. 事件
  12. 三维模型
  13. 图像和视频纹理
  14. HTML
  15. 文本
  16. 加载屏幕
  17. 滚动
  18. 动画
  19. 物理
  20. 场景布置
  21. 视图
  22. 摄像机控制
  23. 渲染目标
  24. 后期处理
  25. Theatre.js
  26. 优化
  27. 着色器介绍
  28. 形状函数
  29. 图像滑块
  30. 水着色器
  31. 着色器过渡
  32. 作品集 - 三维世界
  33. 作品集 HTML 界面
  34. 作品集 - 响应式设计
  35. VFX简介
  36. 粒子效果
  37. 轨迹效果
  38. VFX引擎
  39. 烟花效果
  40. 魔法师游戏
  41. WebGPU / TypeScript
  42. 使用TSL和WebGPU的GPGPU粒子
声明:本站所有资源、素材等全部来源于互联网,赞助VIP仅用于对IT资源服务器带宽等费用支出做支持,从本站下载资源,说明你已同意本条款。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。