展示了一个互动式的 3D 房间作品集展示。用户可以在房间里点击各种物件来触发交互，比如改变灯光、切换主题、播放音乐、跳 Mario 游戏、浏览项目等。

图 1：互动式 3D 房间作品集主画面——等距视角的虚拟房间，含书桌、床、电视柜、灯光、照片墙等可交互物件（动图）

它把一个作品集从传统网页形式进化为"可交互、沉浸式、带动感"的空间体验，用现代的前端 3D 技术栈把 UI、渲染、互动融合在一起。对前端工程师而言，它是一个很好的样板，展示如何做高交互、复杂渲染的项目。

1. 一、特色功能

• React用于整体 UI 结构组织与状态管理
• **react-three/fiber（r3f）**作为 React 层对 Three.js 的封装，用于渲染 3D 场景
• Blender用来建模 3D 物件
• howler：音频播放控制
• gsap：动画效果（主题切换、过渡等）
• zustand：全局/跨组件状态管理（轻量化）
• ……

2. 二、源码

https://github.com/AT010303/Room_Portfolio

3. 三、在线预览

https://at010303.vercel.app/

4. 四、启动

npm install
npm run dev

图 2：3D 房间交互效果演示（动图）

初识Three.js的奇妙世界，走进三维空间，与小编一起拥抱前端技术