如果你准备好提升你的开发者作品集，那么这门课程非常适合你。

你将使用 Three.js、Blender 和 JavaScript 来构建一个看起来像家庭办公室的可爱作品集。

你将学习四边形拓扑、纹理烘焙、物体建模等许多内容。

https://freecodecamp.org/news/create-a-cute-room-portfolio-with-threejs-blender-javascript/…

使用 Three.js、Blender 和 JavaScript 创建可爱房间作品集

来源：https://www.freecodecamp.org/news/create-a-cute-room-portfolio-with-threejs-blender-javascript/

学习如何使用 Three.js 和 Blender 设计一个惊艳且交互式的 3D 作品集！

我们刚刚在 freeCodeCamp.org YouTube 频道上发布了一门课程，它将带你从 Blender 中 3D 建模的基础概念，一直到使用 Three.js 创建一个功能完备、值得获奖的作品集网站。

你将掌握关键技术，例如用于创建干净模型的正确四边形拓扑，以及用于优化 Web 场景的纹理烘焙。

课程结束时，你将拥有一个令人愉悦、可爱且经过专业部署的 Three.js 项目，其中包含你所有手工建模的创作。本课程由 Andrew Woan 开发。

以下是本课程的所有章节：

• 课程介绍与项目演示
• 我们将涵盖与不涵盖的内容
• 课程结构预期
• 先决条件
• 简要了解四边形拓扑
• 建模房间基底与粗模（blocking out）概览
• 建模站立式办公桌
• 建模显示器增高架
• 建模电脑
• 建模桌垫
• 建模电脑键盘
• 建模铅笔和笔筒
• 建模花盆和花朵
• 建模小型励志语录摆件
• 建模电脑音箱
• 建模耳机和耳机支架
• 调整房间
• 建模电脑
• 建模可爱角色 Mr. Whiskers
• 建模咖啡杯
• 建模椅子
• 建模抽屉
• 建模书本
• 建模花篮
• 建模洞洞板
• 建模相框
• 建模拖鞋
• 建模收纳盒
• 建模吊挂植物
• 建模钢琴
• 建模窗户
• 建模麦克风
• 建模蛋形地毯
• 建模台灯
• 建模更多浮动搁板
• 建模便利贴
• 建模波霸奶茶毛绒玩具
• 为钢琴添加更多细节
• 建模标志
• 建模时钟
• 建模迷你桌子
• 建模披萨
• 建模汽水罐
• 使用粒子系统建模另一盆吊挂植物
• 建模鸡蛋
• 建模墙壁插座
• 添加并处理文本网格
• 建模吊灯和灯泡
• 建模地板条
• 建模线缆
• 建模房间封顶
• 灯光与材质入门
• 创建第一个程序化材质作为设计探索
• 使用向量数学创建最终的第一个程序化材质
• 更多关于烘焙的技巧
• 检查面的朝向/法线
• 玻璃材质与建模鱼
• 烘焙入门
• 用于纹理烘焙的 UV 展开
• 渲染出一张图片来分享!!!!
• 开始烘焙
• 分析并调整烘焙结果以及导出准备
• 导出与分析
• 使用 Vite.js 搭建基本的 Three.js 入门项目
• 压缩模型和纹理
• 回到搭建步骤
• 设置加载器并加载项目
• 房间材质与外观调整
• 玻璃材质
• 水与气泡材质
• 屏幕材质
• 设置起始相机位置和 OrbitControls 目标
• 为 raycaster 交互做准备以及 Blender 中的模型/纹理调整
• 调整 UV 和纹理绘制以快速修补烘焙错误
• 推送到 GitHub 并使用 Vercel 部署
• 动画风扇
• Raycaster 点击/触摸交互
• 使用 GSAP 动画的基础弹窗
• （可选）加载自定义字体和 SCSS 技巧
• 使用 GSAP 的 Raycaster 悬停交互
• 自定义 OrbitControls 以限制平移和旋转
• 使用 GSAP 的入场动画
• 自定义加载屏幕详解
• 简要了解如何使用 Howler.js 处理音频
• 为响应式设计设置起始相机位置
• 最终推送到 GitHub!!!!
• 最终评论、未来方向/挑战、致谢

在 freeCodeCamp.org YouTube 频道上观看完整课程（9 小时观看时长）。

免费学习编程。freeCodeCamp 的开源课程已帮助超过 40,000 人成为开发者。开始学习（https://www.freecodecamp.org/learn）