如何快速运行nothing-to-watch本地开发环境：WebGL电影海报画廊5步安装指南（Bun + Vite）

【免费下载链接】nothing-to-watchAn experimental webgl gallery that can visualize tens of thousands of film posters as a voronoi diagram项目地址https://gitcode.com/gh_mirrors/no/nothing-to-watch点击查看免费下载nothing-to-watch是一款实验性的WebGL 电影海报画廊它能用 Voronoi沃罗诺伊图的形式把数万张电影海报渲染成一幅可交互的力导向图。想亲手跑起这个本地开发环境本文带你5 步完成装好 Bun、克隆仓库、配置环境变量、安装依赖、启动 Vite 开发服务器几分钟即可在浏览器里看到海报墙效果。 运行效果与项目一览上图就是 nothing-to-watch 跑起来后的样子无数张电影海报在黑色背景中聚合成一张会呼吸的 Voronoi 网格支持缩放、平移、点选海报查看详情。技术栈速览模块选型说明前端框架React 19 TypeScript界面与交互构建工具Vite开发服务器固定 3000 端口状态管理Zustand按 slice 切分应用状态渲染引擎OGL 自研Voroforce多线程力导向模拟 WebGL 渲染包管理器Bun推荐/ Node.js 18负责安装依赖与运行脚本 第 1 步确认 Bun 已就绪或准备 Node 环境项目推荐用 Bun 作为运行时兼包管理器速度比 npm 快很多。验证是否已安装bun --version若尚未安装可执行curl -fsSL https://bun.sh/install | bash完成安装后重新打开终端。没有 Bun 也能跑项目同时兼容 Node.js 18仓库根目录的 .nvmrc 锁定的是v20.18.1。用 nvm 执行nvm use即可对齐版本。 第 2 步克隆仓库到本地git clone https://gitcode.com/gh_mirrors/no/nothing-to-watch.git cd nothing-to-watch进入目录后你会看到两个核心目录app/React 应用层和 voroforce/独立渲染引擎这就是后面代码结构部分的主角。 第 3 步一键复制环境变量文件cp .env.local.example .env.local这一步不能跳过应用依赖VITE_前缀的变量来定位海报图片与影片数据。示例文件 .env.local.example 的关键项如下VITE_TEXTURES_BASE_URL/media # 海报图片目录public/media/ VITE_FILM_INFO_BASE_URL/json # 影片元数据目录public/json/ VITE_MEDIA_VERSION_0_LAYERS1 # 各分辨率层的加载开关 VITE_MEDIA_VERSION_1_LAYERS1 VITE_MEDIA_VERSION_2_LAYERS1 VITE_EXPERIMENTAL_MEDIA_VERSION_3_ENABLED1 # 实验性高分辨率开关 VITE_COMPRESS_GLSL # 是否压缩 GLSL 着色器 VITE_ANALYZE_BUNDLE # 是否输出打包分析报告默认值直接可用想关掉某些高分辨率层以提速把对应LAYERS改成0即可。 第 4 步一条命令安装全部依赖bun installBun 会根据 bun.lock 锁定版本安装所有依赖React、OGL、Zustand、Vite 等。package.json 中的trustedDependencies字段已放行需要执行安装脚本的包esbuild、swc/core等Bun 会自动处理无需额外操作。若使用 npm / pnpm / yarn直接npm install也完全可以。 第 5 步启动 Vite 开发服务器并访问bun devVite 启动后终端会输出本地地址。打开浏览器访问http://localhost:3000等海报墙缓缓展开就成功了 。为什么服务器能自动支持 WebGL 多线程关键配置写在 vite.config.ts 里server: { host: 0.0.0.0, port: 3000, headers: { Cross-Origin-Embedder-Policy: credentialless, Cross-Origin-Opener-Policy: same-origin, }, }host: 0.0.0.0监听所有网卡手机连同一局域网也能通过http://你的电脑IP:3000访问两个Cross-Origin-*响应头WebGL 多线程模拟SharedArrayBuffer的硬性前提Vite 已替你自动注入不需要手动配置。另外app/main.tsx 支持一个隐藏彩蛋在地址后加?disableUI参数可跳过 React 界面、只保留纯 WebGL 画布方便调试引擎本身。 常用开发命令速查命令作用bun dev启动开发服务器3000 端口bun buildTypeScript 类型检查 生产构建bun preview预览生产构建产物bun checkBiome 代码检查lint 格式bun check:write自动修复代码风格问题bun test:unit运行 Vitest 单元测试bun test:e2e运行 Playwright 端到端测试bun analyze带打包体积分析的生产构建️ 项目结构导航路径说明app/React 应用组件cmps/、状态store/、引擎接入层vf/voroforce/独立 WebGL 引擎simulation/力模拟、display/渲染、controls/交互public/media/多分辨率电影海报素材single/low/mid/high 四档public/json/影片元数据由环境变量VITE_FILM_INFO_BASE_URL指向docs/项目文档与任务清单scripts/generate-sitemap.jsSEO 站点地图生成脚本 常见问题排查FAQQ1启动后端口 3000 被占用bun dev对应脚本写死了--port 3000先停掉占用 3000 端口的进程或lsof -i:3000查出是谁占用。Q2页面白屏 / 控制台报 CORS 错误确认响应头里存在Cross-Origin-Embedder-Policy与Cross-Origin-Opener-Policy由 Vite 自动添加。不要直接用file://打开index.html必须走开发服务器。Q3浏览器要求什么版本需要支持WebGL 2.0的现代浏览器Chrome 70、Firefox 78、Safari 14、Edge 79。显卡最好是独立显卡大内存2GB体验更佳。Q4装 Bun 还是用 npm都能跑。Bun 是推荐方案安装与启动更快已有 Node 环境的同学把上面命令里的bun换成npm run即可例如npm run dev。Q5环境变量不复制可以吗不建议。缺少VITE_TEXTURES_BASE_URL等变量时海报与影片数据将无法定位页面会一片空白。一条cp命令的事别省。✅ 小结整套流程就 5 步装 Bun → 克隆仓库 → 复制.env.local.example→bun install→bun dev全程不超过 5 分钟。跑起来后建议打开 docs/ 里的文档、翻翻 voroforce/ 引擎源码深入理解这张「会呼吸的海报墙」背后的力导向模拟与 WebGL 渲染原理。祝折腾愉快海报管够 赞分享【免费下载链接】nothing-to-watchAn experimental webgl gallery that can visualize tens of thousands of film posters as a voronoi diagram项目地址https://gitcode.com/gh_mirrors/no/nothing-to-watch点击查看免费下载相关推荐解析WebGL画廊nothing-to-watch架构React 19 自研引擎如何流畅渲染上万张电影海报解析WebGL画廊nothing to watch架构React 19 自研引擎如何流畅渲染上万张电影海报 nothing to watch 是一个实验性终极指南WebGL 电影海报可视化画廊 nothing-to-watch让上万部电影在活体 Voronoi 图中流动起来终极指南WebGL 电影海报可视化画廊 nothing to watch让上万部电影在活体 Voronoi 图中流动起来 nothing to watchRope 模型加载失败8 类常见报错的完整排查路径Rope 模型加载失败8 类常见报错的完整排查路径 Rope 启动后一直卡在加载界面或者弹窗直接提示模型加载失败本文覆盖 RopeGUI focused上一篇Mekanism高级自动化物流传输器与分类器的智能物品管理技巧下一篇Squirrel中的安全性最佳实践从代码到部署的全方位保障创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考