Room3D · 一间可以逛的卧室主页

一个用 Three.js 搭的沉浸式 3D 个人主页：像走进某个人的私人空间，点击房间里的物件就能看到关于他、作品、文章和音乐。

技术栈

• React + Vite
• Three.js（@react-three/fiber + @react-three/drei）
• GSAP（开场镜头、悬停弹性、弹窗过渡、昼夜灯光渐变）
• Web Audio API（生成式氛围音乐，无需任何音频文件）

运行

npm install
npm run dev      # 开发模式 http://localhost:5173
npm run build    # 生产构建
npm run preview  # 预览构建产物

玩法

• 拖拽旋转视角，滚轮缩放（镜头被限制在房间内）
• 点击发光的物件打开内容：
  • 床 → 关于我
  • 书桌 → 作品
  • 书架 → 文章
  • 唱片机 → 音乐（点 ▶ 播放生成式环境音乐）
  • 窗户 → 手动切换昼夜
  • 照片墙 → 相册
  • 吉他 → 灵感随笔
  • 门 → 联系我
• 房间自带 150 秒自动昼夜循环；右上角可手动切换或重置视角

目录结构

src/
  components/     场景、家具、弹窗、音乐播放器
  data/content.js 所有可点击物件的内容数据
  lib/            贴图生成与布局常量
scripts/smoke.mjs 基于本机 Chrome 的自动化冒烟测试（开发调试用）

冒烟测试会真实渲染页面、自动点击各物件并截图，运行方式：

npm run dev
node scripts/smoke.mjs