### 项目地址 https://github.com/s010s/prehistoric-animal-museum ### 类别 JS ### 项目标题 双语 3D 史前动物亲子博物馆 ### 项目描述 一个已经上线的双语 Web 3D 史前动物博物馆，面向 2～6 岁孩子和家长，不设置追逐、战斗和闯关。18 个海陆空展项可旋转缩放、按需播放中英文旁白，家长资料附有参考来源。初学者可从源码学习 React 与 Three.js 集成、GLB 模型加载、相机适配、移动端交互和双语内容组织。 ### 亮点 1. 同类儿童恐龙产品常用追逐、战斗或闯关推动体验，这个项目把重心放在自主观察和亲子讲解。孩子自行选择动物、观看角度和旁白播放时机，家长可以同步打开资料继续聊。 2. 同类 Three.js 示例常停在单模型展示。项目让 18 个体型和姿态差异很大的展项共用一套查看器，自动适配相机与灯光，也支持触屏、键盘和减少动态效果。 3. 仓库公开了移动端 Web 3D 的加载实现，包括 Meshopt 压缩、按需加载、静态首帧、内存与浏览器缓存、空闲预取，以及模型准备完成后再切换，减少空白和闪烁。 4. 每个展项都在 `src/content/animals` 下按同一结构组织 TypeScript 内容、GLB、图片、旁白与来源记录。`ANIMAL_AUTHORING_GUIDE.md` 写清怎样增加一个展项，初学者可以顺着现有目录从内容数据读到 React 界面、Three.js 渲染与资源处理。 5. 项目已经在线运行，README 同时提供本地启动、项目检查、贡献流程、新增动物指南和许可说明，读者可以边体验边对照源码。 ### 示例代码 ```markdown ``` ### 截图或演示视频 <img width="1440" height="900" alt="Image" src="https://github.com/user-attachments/assets/2c11326b-b1d1-4356-8d6b-59169cf6d078" /> <img width="1270" height="760" alt="Image" src="https://github.com/user-attachments/assets/bbe12c42-54d9-4478-b670-398f49537b7e" /> https://github.com/user-attachments/assets/6572f53e-67af-4be8-9d47-ca1f4db0348f
项目地址
https://github.com/s010s/prehistoric-animal-museum
类别
JS
项目标题
双语 3D 史前动物亲子博物馆
项目描述
一个已经上线的双语 Web 3D 史前动物博物馆，面向 2～6 岁孩子和家长，不设置追逐、战斗和闯关。18 个海陆空展项可旋转缩放、按需播放中英文旁白，家长资料附有参考来源。初学者可从源码学习 React 与 Three.js 集成、GLB 模型加载、相机适配、移动端交互和双语内容组织。
亮点
同类儿童恐龙产品常用追逐、战斗或闯关推动体验，这个项目把重心放在自主观察和亲子讲解。孩子自行选择动物、观看角度和旁白播放时机，家长可以同步打开资料继续聊。
同类 Three.js 示例常停在单模型展示。项目让 18 个体型和姿态差异很大的展项共用一套查看器，自动适配相机与灯光，也支持触屏、键盘和减少动态效果。
仓库公开了移动端 Web 3D 的加载实现，包括 Meshopt 压缩、按需加载、静态首帧、内存与浏览器缓存、空闲预取，以及模型准备完成后再切换，减少空白和闪烁。
每个展项都在
src/content/animals下按同一结构组织 TypeScript 内容、GLB、图片、旁白与来源记录。ANIMAL_AUTHORING_GUIDE.md写清怎样增加一个展项，初学者可以顺着现有目录从内容数据读到 React 界面、Three.js 渲染与资源处理。项目已经在线运行，README 同时提供本地启动、项目检查、贡献流程、新增动物指南和许可说明，读者可以边体验边对照源码。
示例代码
截图或演示视频
cnt-2026-003-xiaohongshu-draft.mp4