3D 侦探线索墙 - 浏览器端的沉浸式线索白板

devcxlcn 2026-07-28 21:46 1

Image

交互灵感来自 GTA5 抢劫前置任务中的计划黑板。用 Three.js 在浏览器里实现了一个 3D 空间,可以:



  • 张贴便利贴、A4 纸、照片、剪报、标签

  • 图钉固定资料,红绳建立关联

  • 记号笔直接批注,橡皮擦删除笔迹

  • 所有数据保存在浏览器 localStorage ,不上传服务器


技术栈:React 19 + Three.js + React Three Fiber + Zustand


Demo: https://clue-wall.devcxlcn.workers.dev/


开源地址: https://github.com/devcxl/whiteboard


欢迎体验反馈 👏

最新回复 (3)
  • xlxx 07-29 01:48
    1
    阴影的锯齿有点糙
  • codehz 07-29 11:09
    2
    说实话就这个精度来看,有什么用 three.js 的必要吗,考虑到几乎都没有视角形变,你用 css 3d 做不是基本就足够了
  • duchenpaul 07-29 13:51
    3
    加上物理效果,比如说绳子晃动
* 帖子来源V2EX
返回