Skip to content
sdsunqianPublic

About

Resources

Stars

0 stars

Watchers

0 watching

Forks

Repository files navigation

拾光绘本馆 · 互动 3D 绘本

使用 Three.js、Vite 和 Web Audio 构建,支持电脑鼠标、手机触摸和键盘按钮操作。所有三维角色、纸艺、封面、字体和声音均随项目提供或在本地生成,无需素材 API。

本地启动

需要 Node.js 20.19+ 或 22.12+。

npm install
npm run dev

浏览器打开终端显示的地址,通常是 http://localhost:5173 手机与电脑连接同一个 Wi-Fi 后,可访问终端显示的 Network 地址;如无法连接,请检查系统防火墙是否允许该开发服务器。

Windows 也可双击 start.bat,首次运行会安装依赖。

发布版本

npm run build
npm run preview

dist/ 是完整静态网站,可放到任意静态 HTTP 服务上。请通过 HTTP 打开,不要双击 HTML 使用 file://。安装依赖后,本地运行不需要访问外部字体、图片或声音服务。

GitHub Pages

仓库已经包含 .github/workflows/deploy-pages.yml。推送到 main 后,GitHub Actions 会自动构建并发布 dist/。

首次使用时,在 GitHub 仓库的 Settings → Pages → Build and deployment → Source 中选择 GitHub Actions。部署完成后访问:

https://sdsunqian.github.io/3dbook/

Vite 使用相对资源路径,因此网站在 /3dbook/ 项目路径下也能正确加载脚本、样式、字体和图标。

玩法

  • 点击封面选择绘本,再点击「打开这本书」;再次点击已选封面也可以打开。
  • 点击发光的小物件触发当前事件,或使用下方对应按钮。点击兔子/小熊会挥手。
  • 事件结束后自行点击「翻到下一页」。翻页前纸艺完全收起,翻完后才展开下一场景。
  • 第四个场景结束后,完成简单中文测验,领取收藏奖励。答错可以重试。
  • 「返回书架」连续收书归架;「宝藏」查看本机已收集的奖励。
  • 首次鼠标、触摸或键盘操作后启动柔和的合成 BGM。右上角可以静音。没有朗读或人声。

内容与扩展

主绘本《月亮的碎片》包含遇见星星、点亮森林、花园阶梯和送星回家四个场景。另有《森林里的宝藏》《到云朵那边去》两个使用同一纸艺舞台的完整主题短篇,分别配有封面、台词、角色配色、测验和奖励。

  • src/books.js:三个故事的中文短句、主题色、问题和奖励。
  • src/world.js:同一 Three.js 场景内的书房、封面铰链、三维模型、相机、翻页动画和射线点击。
  • src/art.js:本地绘制的原创封面和纸张纹理。
  • src/audio.js:浏览器本地合成的低音量 BGM、点击、纸张与奖励音效。
  • src/main.js:严格按顺序推进的交互状态、动画锁、收藏和音量偏好。

奖励和静音偏好仅存在当前浏览器的 localStorage,存储不可用时仍可完成故事。启用系统「减少动态效果」时会缩短过场并关闭光标残影。WebGL 不可用时会显示明确的重试提示。

验证

npm run build
node scripts/verify.mjs

交互验证需开发服务器运行在 5173 端口,并安装 Google Chrome。脚本检查电脑/触屏布局、真实三维物体点击、连击锁、四个场景、纸艺收起时序、测验、奖励持久化、静音和返回书架。截图与报告保存在 artifacts/。

字体:Noto Sans SC 与 Noto Serif SC,使用 SIL Open Font License,由 @fontsource 包提供。

About

Resources

Stars

0 stars

Watchers

0 watching

Forks

Contributors

Languages