[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-96055":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":15,"subscribersCount":15,"size":15,"stars1d":15,"stars7d":15,"stars30d":16,"stars90d":15,"forks30d":15,"starsTrendScore":15,"compositeScore":17,"rankGlobal":10,"rankLanguage":10,"license":18,"archived":19,"fork":19,"defaultBranch":20,"hasWiki":21,"hasPages":19,"topics":22,"createdAt":10,"pushedAt":10,"updatedAt":28,"readmeContent":29,"aiSummary":30,"trendingCount":15,"starSnapshotCount":15,"syncStatus":31,"lastSyncTime":32,"discoverSource":33},96055,"clay-safari","cclank\u002Fclay-safari","cclank","黏土风格 3D 双语动物世界 · A playful clay-style animal world built with Three.js and Blender.","https:\u002F\u002Fclay-safari.lanshuagent.com",null,"JavaScript",167,40,115,0,36,48.44,"MIT License",false,"main",true,[23,24,25,26,27],"blender","cloudflare-workers","education","threejs","webgl","2026-09-20 04:01:32","\u003Cdiv align=\"center\">\n\n# 🦁 Clay Safari · 繁忙的动物世界\n\n**黏土风格的 3D 可交互双语认知世界 — 走进去，点一点，听听 10 位动物朋友的名字和叫声**\n\nA claymation-style 3D bilingual (中文 \u002F English) animal world for kids, built with Blender-scripted models and Three.js.\n\n**[🌍 在线体验 · Play now](https:\u002F\u002Fclay-safari.lanshuagent.com\u002F)**\n\n[![License: MIT](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FLicense-MIT-f7c948.svg?style=flat-square)](LICENSE)\n[![Three.js](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FThree.js-r185-000000.svg?style=flat-square&logo=three.js&logoColor=white)](https:\u002F\u002Fthreejs.org\u002F)\n[![Vite](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FVite-8-646CFF.svg?style=flat-square&logo=vite&logoColor=white)](https:\u002F\u002Fvitejs.dev\u002F)\n[![Blender](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FBlender-5.x-E87D0D.svg?style=flat-square&logo=blender&logoColor=white)](https:\u002F\u002Fwww.blender.org\u002F)\n[![Node](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FNode-20.19%2B%20%2F%2022.12%2B-339933.svg?style=flat-square&logo=node.js&logoColor=white)](https:\u002F\u002Fnodejs.org\u002F)\n[![Zero assets](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FAudio%20%26%20Textures-100%25%20procedural-8ee68a.svg?style=flat-square)](#-技术亮点)\n[![PRs Welcome](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FPRs-welcome-ff8fb1.svg?style=flat-square)](#-参与贡献)\n\n\u003Cimg src=\"docs\u002Fimages\u002Fposter.jpg\" alt=\"俯瞰整个黏土世界\" width=\"900\" \u002F>\n\n\u003Csub>按 \u003Ckbd>M\u003C\u002Fkbd> 进入的俯瞰海报视角 · 左沙右草、一条 S 形河流和一座小桥，17 个物件都带中文 \u002F 拼音 \u002F 英文标签\u003C\u002Fsub>\n\n\u003C\u002Fdiv>\n\n---\n\n## ✨ 特性\n\n- **10 只黏土动物 + 7 件探险道具**：狮子、长颈鹿、斑马、大象、猴子、河马、鳄鱼、蛇、小鸟、鱼；探险车、照相机、望远镜、树桩、骨头、花朵、香蕉\n- **点一下就会动**：每种动物都有专属反应 — 大象举鼻子扇耳朵、鳄鱼张嘴、小鸟绕圈飞、鱼跃出水面、猴子转圈挥香蕉\n- **双语认知闭环**：弹出词卡 → 朗读英文 → 播放叫声 → 朗读中文；动物收进「探险手册」，集齐 10 只撒彩带庆祝\n- **🤖 机器人向导**：点它开始自动导览，沿探险路线逐个介绍，A\\* 寻路自动绕河走桥\n- **自由探索**：WASD 行走、点击地面前往、拖动旋转、滚轮 \u002F 双指缩放、俯瞰全景；手机端有虚拟摇杆\n- **视觉拉满**：实时阳光 + 软阴影、带流动高光和岸边泡沫的河水、飘动的黏土云、笑脸太阳、蝴蝶、飞鸟、水波、星星、彩带\n- **零素材文件**：模型由脚本生成，纹理由噪声生成，叫声由 Web Audio 合成，名字由 Web Speech 朗读 — 完全离线可玩\n\n\u003Cdiv align=\"center\">\n\u003Cimg src=\"docs\u002Fimages\u002Felephant.jpg\" alt=\"大象举鼻子\" width=\"440\" \u002F> \u003Cimg src=\"docs\u002Fimages\u002Flion.jpg\" alt=\"狮子在岩石上\" width=\"440\" \u002F>\n\u003C\u002Fdiv>\n\n## 🚀 快速开始\n\n需要 Node.js 20.19+（20.x）或 22.12+。\n\n```bash\ngit clone https:\u002F\u002Fgithub.com\u002Fcclank\u002Fclay-safari.git\ncd clay-safari\nnpm install\nnpm run dev          # http:\u002F\u002Flocalhost:5290\n```\n\n开发服务器默认仅供本机访问。需要手机在同一局域网调试时，运行 `npm run dev -- --host`。\n\n```bash\nnpm run build        # 打包到 dist\u002F\nnpm run preview      # 预览打包结果 http:\u002F\u002Flocalhost:5291\n```\n\n模型已经导出在 `public\u002Fmodels\u002F` 里，**不需要安装 Blender 就能运行**。想改动物造型再重新生成：\n\n```bash\n# 需要 Blender 5.x；BLENDER 可指向任意 Blender 可执行文件\nBLENDER=\u002FApplications\u002FBlender.app\u002FContents\u002FMacOS\u002FBlender npm run models\n```\n\n## ☁️ 部署到 Cloudflare\n\n在线地址：**https:\u002F\u002Fclay-safari.lanshuagent.com\u002F**\n\n项目使用 Cloudflare Workers Static Assets 托管 `dist\u002F`。部署配置保存在 `wrangler.jsonc`，无需配置应用 API 密钥。\n\n```bash\nnpx wrangler@4.114.0 login   # 首次部署时登录 Cloudflare\nnpm run deploy             # 构建并部署\n```\n\nFork 后请先修改 `wrangler.jsonc` 中的 Worker 名称和自定义域名，使用自己 Cloudflare 账号下的域名；也可以移除 `routes`，仅使用 `workers.dev` 地址。\n\n## 🎮 操作\n\n| 操作 | 桌面 | 手机 |\n|---|---|---|\n| 行走 | \u003Ckbd>W\u003C\u002Fkbd>\u003Ckbd>A\u003C\u002Fkbd>\u003Ckbd>S\u003C\u002Fkbd>\u003Ckbd>D\u003C\u002Fkbd> \u002F 方向键，\u003Ckbd>Shift\u003C\u002Fkbd> 加速 | 左下角摇杆 |\n| 前往某处 | 点击地面 | 点击地面 |\n| 旋转 \u002F 缩放 | 拖动 \u002F 滚轮 | 拖动 \u002F 双指 |\n| 认识动物 | 点击动物或道具 | 点击 |\n| 自动导览 | 点击 🤖 或 \u003Ckbd>T\u003C\u002Fkbd> | 点击 🤖 |\n| 俯瞰全景 | \u003Ckbd>M\u003C\u002Fkbd> | 🗺️ 按钮 |\n| 隐藏 \u002F 显示标签 | \u003Ckbd>L\u003C\u002Fkbd> | 🏷️ 按钮 |\n| 帮助 | \u003Ckbd>H\u003C\u002Fkbd> | ❓ 按钮 |\n\n## 🧱 制作流程\n\n```\n参考图定风格 ──▶ Blender 脚本捏动物 ──▶ 导出 GLB ──▶ Three.js 生成世界 ──▶ 互动 + 声音 ──▶ 实测打包\n```\n\n1. **定风格与布局** — 从参考海报提取奶油配色、圆润造型和标签样式，在 [`src\u002Fdata.js`](src\u002Fdata.js) 里重新规划地图、物件位置和一条穿过小桥的探险路线。\n2. **Blender 脚本建模** — [`blender\u002Fbuild_animals.py`](blender\u002Fbuild_animals.py) 只用球体、胶囊、贝塞尔管道和倒角盒子，每只动物 20–40 行，19 个模型一次跑完约 10 秒。会动的部位（头、尾、鼻子、下颌、翅膀、耳朵）挂在独立的 Empty 上，用 `pivot()` 把原点挪到关节处，导出后 Three.js 直接绕关节旋转，不需要骨骼。\n3. **黏土质感** — [`src\u002Fclay.js`](src\u002Fclay.js) 用分形噪声生成四方连续的灰度凹凸图，配合 `MeshPhysicalMaterial` 的 sheen 层做轮廓柔光。加载 GLB 时按「关节 × 颜色」合并网格，一只 40 个零件的动物只需约 6 次绘制。\n4. **程序化世界** — [`src\u002Fworld.js`](src\u002Fworld.js) 生成顶点色地形（沙地 \u002F 草地 \u002F 小路 \u002F 河岸）、河流刻槽、在标准材质里注入着色器的水面、拱桥、实例化植被、太阳、云和一圈「黏土台面」裙边。河道曲线和地形共用同一个公式，水面泡沫因此永远贴着岸。\n5. **互动与声音** — 相机跟随、0.5 单位网格的 A\\* 寻路、专属反应动画、机器人自动导览；[`src\u002Faudio.js`](src\u002Faudio.js) 用振荡器、噪声和滤波器合成 17 种叫声与音效，Web Speech 读中英文名字。\n6. **实测打包** — 桌面 \u002F 手机布局、Vite 打包；桌面端开启 Bloom 与 4096 阴影贴图，手机端自动降级。\n\n\u003Cdiv align=\"center\">\n\u003Cimg src=\"docs\u002Fimages\u002Fclay-compare.jpg\" alt=\"黏土质感对比\" width=\"900\" \u002F>\n\u003Cbr\u002F>\u003Csub>左：关闭凹凸和 sheen，像光滑塑料 · 中：开启后的黏土颗粒与柔光 · 右：程序生成的凹凸图\u003C\u002Fsub>\n\u003C\u002Fdiv>\n\n## 🛠 技术亮点\n\n| 模块 | 技术 |\n|---|---|\n| 建模 | Blender Python (bpy) 参数化建模，glTF 导出，`matrix_parent_inverse` 关节枢轴 |\n| 渲染 | Three.js r185，`MeshPhysicalMaterial` sheen，PCF 软阴影，ACES 色调映射，`EffectComposer` + `UnrealBloomPass` |\n| 世界 | 值噪声 \u002F fbm 地形与纹理，顶点色绘制，`InstancedMesh` 批量植被，`onBeforeCompile` 注入水面着色器 |\n| 寻路 | 网格 A\\*（八方向、禁止穿角）+ 视线拉直 |\n| 声音 | Web Audio API 合成（振荡器、噪声、双二阶滤波、波形整形），Web Speech API 朗读 |\n| 工程 | Vite 8，ES Modules，零运行时依赖（仅 three） |\n\n## 📁 目录结构\n\n```\nclay-safari\u002F\n├── blender\u002F\n│   └── build_animals.py     # Blender 脚本：19 个黏土模型 → GLB\n├── public\u002Fmodels\u002F           # 导出的 GLB（约 3.9 MB）\n├── src\u002F\n│   ├── data.js              # 地图布局、动物数据、导览路线\n│   ├── clay.js              # 黏土材质、凹凸图、GLB 加载与网格合并\n│   ├── world.js             # 地形 \u002F 河流 \u002F 植被 \u002F 天空 \u002F 寻路网格\n│   ├── nav.js               # A* 寻路\n│   ├── animals.js           # 动物摆放、浮动词卡、待机与点击动画\n│   ├── player.js            # 探险家控制与相机\n│   ├── tour.js              # 机器人自动导览\n│   ├── audio.js             # TTS + 合成叫声 + 环境音\n│   ├── effects.js           # 蝴蝶、飞鸟、水波、星星、彩带\n│   ├── ui.js                # 加载页、词卡、探险手册、摇杆\n│   ├── tween.js             # 极简补间引擎\n│   └── main.js              # 入口：渲染循环、输入、发现流程\n├── docs\u002Fimages\u002F             # README 截图\n├── index.html\n└── vite.config.js           # Vite 构建配置\n```\n\n## 🎨 自定义\n\n**加一只新动物**\n\n1. 在 `build_animals.py` 里写一个 `build_xxx()`，把会动的部位挂到 `head` \u002F `tail` 等 Empty 下并调用 `pivot()`，加进 `BUILDERS`，运行 `npm run models`\n2. 在 `src\u002Fdata.js` 的 `ITEMS` 里加一条：中文、拼音、英文、emoji、位置、朝向、缩放、导览观察点\n3. 在 `src\u002Fanimals.js` 的 `update()` 和 `react()` 里加待机和点击动作，在 `src\u002Faudio.js` 的 `CALLS` 里加叫声\n4. 如需放进探险手册，`kind` 设为 `'animal'`\n\n**换成真实动物录音** — 把录音放到 `public\u002Fsounds\u002F\u003Cid>.mp3`，在 `audio.js` 的 `animalSound(id)` 里用 `new Audio()` 播放并在 `ended` 时 resolve，其余流程不用改。\n\n**换语言** — 词卡文案全部来自 `ITEMS`，`speak()` 的语言代码在 `main.js` 的 `sayChain()` 里。\n\n## ⚡ 性能\n\n- 桌面：约 600 次绘制、90 万三角面，4096 阴影贴图 + Bloom，M 系列 Mac 上稳定 60 fps\n- 手机：自动关闭后处理、阴影降到 2048、像素比上限 1.5、竖屏自动加宽视角\n- 首屏加载约 4.6 MB（其中模型 3.9 MB），无外部字体和音频请求\n\n## 🗺 路线图\n\n- [ ] 真实动物录音（CC0）可选包\n- [ ] 昼夜循环与萤火虫\n- [ ] 更多语言（日语 \u002F 韩语 \u002F 西班牙语词卡）\n- [ ] 动物「小测验」模式：听声音找动物\n- [ ] Draco 压缩模型\n\n## 🤝 参与贡献\n\n欢迎 Issue 和 PR。新动物、新的叫声配方、性能优化、翻译都很欢迎。提交前请跑一遍 `npm run build` 确认无报错。\n\n## 📄 许可证\n\n[MIT](LICENSE) © 2026 lank\n\n\u003Cdiv align=\"center\">\u003Csub>Made with clay, code and a lot of spheres 🟠🟢🔵\u003C\u002Fsub>\u003C\u002Fdiv>\n","Clay Safari 是一个面向儿童的黏土风格 3D 双语认知互动应用，支持中英文动物名称与叫声的即时交互学习。项目基于 Three.js 构建 WebGL 渲染场景，结合 Blender 脚本化生成模型、Web Audio 合成动物叫声、Web Speech API 实现语音播报，并通过 A* 算法实现机器人自动导览；所有资源（模型\u002F纹理\u002F音频）均为程序化生成，无需外部素材文件，可完全离线运行。适用于学前教育、语言启蒙、STEAM 教学等轻量级交互式数字教具场景。",2,"2026-09-09 02:30:06","CREATED_QUERY"]