给女儿做了一个 3D 史前动物博物馆,收录 18 种史前动物,免费开源,也分享给 V 友~

18 天前
 leonleung

2015 年注册 V2EX 到现在,我一直很喜欢逛「分享创造」。这里的老哥各个都是人才,各种新奇点子源源不断。

以前大多数时候我都在看别人分享,这次终于也有一个自己做完、愿意拿出来的东西。

我给三岁的女儿做了一座 3D 史前动物博物馆

在线体验:

https://leon-made-this.work/museum

github 链接:

https://github.com/s010s/prehistoric-animal-museum

目前一共有 18 种史前动物,陆地、天空和海洋三类。免费,不用注册,没有广告。

为什么会做这个

起因其实很小。

我女儿现在三岁多,看动画里的恐龙,只要出现追逐、战斗的场景,或者恐龙突然在画面里变得很大,她就会吓得跑回房间。

但过一会儿,她又会轻手轻脚地回来,站远一点偷看。有一次甚至躲到了凳子下面,只露出头继续看,特别搞笑。

所以我当时就想做一个小小的试验:

如果把追逐和战斗拿掉,只让恐龙安静地出现在电脑上,可以自己转一转、看看不同角度,她还会不会跑?

第一版我只放了三四只恐龙。她在旁边玩闹的时候看到了我的电脑屏幕,她非但没跑,反而还会很好奇。

当时我就觉得有戏!她不怕,这个小实验可以继续做下去。

于是三四只恐龙慢慢变成了 18 只史前动物。

它最开始叫“恐龙馆”,后来长毛猛犸象、鱼龙这些不算恐龙的史前生物也加了进来,我发现这个名字已经装不下它了。

于是改成了现在的:史前动物博物馆。

现在里面能做什么

其实功能很简单。

孩子选一只动物,可以拖动模型换角度,也可以放大缩小。中英文旁白都不会自动播放,想听的时候再点。

年代、体型、一些科学上还存在不确定性的地方,我放进了家长资料里。

动作我也尽量做得克制,没有把追逐、捕食和战斗作为主要展示方式。

手机、平板、电脑都可以打开。

而且这里有一个我后来刻意坚持的设计:

孩子使用的时候不会调用 AI 。

3D 模型、图片、旁白这些内容都提前做好了。AI 参与的是制作过程,而不是孩子每次打开页面之后再现场生成东西。

做到后来,比较折腾的其实是 3D 加载

一开始的想法很朴素:18 个模型,放网页里不就完了。

真这么做以后,很快就发现不行。

3D 文件本身不小,如果首屏就背着一堆模型跑,桌面端还能忍,移动端体验就很容易崩。

后来整个加载方式陆续改成了:

现在切换动物的体感比最初好很多。

我还在继续处理一个问题:尽量把 Three.js 真正移出首屏关键路径

现在页面本身可以先出来,但从静态页面进入可交互 3D 应用之间,还有进一步优化空间。

还有一个我觉得挺好玩的东西:让翼龙真的飞起来

馆里我自己比较喜欢的是无齿翼龙。最早拿到的模型其实是静态的。

做到这里的时候我突然想:肿头龙是可以动的,无齿翼龙是不是也可以飞来?能不能让它真的有一点“飞起来”的感觉?

后来我研究了一轮 Blender ,最后尝试用 Blender 配合 MCP ,让 AI 帮我处理骨骼和动作。

这也是整个项目里我第一次比较强烈地感觉到:

AI 对我来说最有价值的地方,不一定是“把网页代码写快一点”,而是让我敢碰以前基本不会主动碰的东西。

我不会做 3D 动画,但我现在可以先知道自己想要什么,再借助工具一点点把它做出来。

当然最后动作是否自然、是不是适合孩子看,还是得自己判断。

AI 找模型也没有想象中那么省心

18 种史前动物的模型不是一次找到的。

我会让 AI 帮我搜公开来源、整理候选,它能省掉很多机械搜索时间。但它也经常觉得自己已经完成了( 5.6 sol xhigh )。

比如找到一个题材正确、License 看起来也符合要求的低模,就觉得任务结束了。

实际点进去一看:

太粗糙,模型质量不行。要么就是太丑。

那就只能继续找。

License 也是一样。我最后不会直接采用 AI 的摘要,而是回到原始页面逐项核对。

所以这个项目做到后来,我对 AI 的感受反而变得比较简单:

它能大幅扩大一个人能搜索和执行的范围,但“什么值得留下”还是人的工作。

现在还有几个很现实的问题

目前部署主要用了 Cloudflare 的免费方案,也没有 ICP 备案。

所以国内网络访问并不理想。国内大部分环境第一次打开应该都会偏慢,在部分国内浏览器或微信内打开也可能出现提示。

这是我现在比较头疼的问题,暂时也没有好的办法,我也懒得去做 ICP 备案~

另外,目前关于孩子使用效果,我只有自己家的观察。女儿后来确实把 18 个动物都看了一遍,还学会了用 Tab 、Enter 和鼠标滚轮操作,但这不能推导成“其他孩子也一定喜欢”。

而且桌面鼠标对一个三岁的孩子来说其实挺大的,点选还不太容易。

所以它现在就是一个已经能用、但还会继续改的小产品。


再放一次链接,方便不用往上翻:

在线体验:

https://leon-made-this.work/museum

github 链接:

https://github.com/s010s/prehistoric-animal-museum

如果你愿意帮我试一下,我现在最想知道一件事:

在实际使用中,碰到什么样的问题?家里的小朋友喜欢吗

如果有明显等待,也欢迎告诉我大概的网络环境和浏览器,我想继续把这一段磨掉。

如果东西本身觉得还有点意思,GitHub 上顺手给个 Star 我也会很开心 :)

14302 次点击
所在节点    分享创造
251 条回复
keemo
18 天前
做的挺好的,已 star ,以后有了孩子再给孩子看
lefer
18 天前
很牛,要是只能 Y 轴转动,那样就不会有突兀的影子破绽了。

此外,请添加更多的史前动物,谢谢。
notppjz
18 天前
感觉小朋友会非常喜欢!
kalevi
18 天前
非常用心了,ui 界面真不错,star
emojiiii
18 天前
3D 模型可以考虑 https://studio.tripo3d.com/
fengfisher3
18 天前
楼主,请问我可以直接拿来部署到我自己的服务器和域名上吗?
我想给女儿看( 6 岁),但你那个是太慢了。
ptigertdy
18 天前
牛的,爱心加技术! cloudflare 访问的问题,如果家里是电信宽带,申请个公网 ip ,买个域名,找台电脑装 ubuntu 做成 home server ,然后想怎么玩怎么玩
shenmezhidedu
18 天前
很棒,可以采访大佬一期吗?
xavi818
18 天前
真棒,晚上回去给一起和娃看下
leonleung
18 天前
@fengfisher3 #186 没问题呀,欢迎自部署给女儿使用,或者下载项目下来就能在本机运行,所有素材都在开源仓库内。如果是商用或者通过网络提供服务,可以参考开源项目里的 license 说明哈
leonleung
18 天前
@emojiiii #185 谢谢老哥,我研究下
leonleung
18 天前
@lefer #182 哈哈,本意是想让孩子能够看到更多细节,没考虑到影子的问题
leonleung
18 天前
@xavi818 #189 可以,记得提前提前 wifi 下加载咯,会自动预加载当前动物上下一只的 3d 模型
fengfisher3
18 天前
@leonleung 感谢。回复前已经 star 了。不过,我估计有空再弄。
jwk345
17 天前
不错,我儿子很喜欢
leonleung
17 天前
@027creed @cue @jackerbauer @chengz @kingshao709 @kasheemirvinglew @Unitent @RyougiShiki @mijimoji @colinxu @body007 @SiuRayyy @DzwsGo @BrandonKevinsoon @fengqing2 @wp2wyx @woshihgs @IanHo @muxiaofei @juzilu @LongTimeNoSee @liushengxian1230 @CharlieWK @xiebaota @junlong @iv2ex @cocalrush @lovepandac @Auston @w574495524

统一回复感谢各位老哥的鼓励和支持!大家的喜欢是最大的动力,后面有更新会持续在 V 站 分享!🙏
leonleung
17 天前
@jwk345 #195 太棒了!!我非常高兴能收到 v 友们的真实家庭反馈,这对我来说很重要!
jim1874
17 天前
不错,感谢,star ,先收藏 等娃大一点给她看
leonleung
17 天前
@ptigertdy #187 哈哈多谢老哥!家宽公网 IP 建站没备案风险有点大,容易被运营商封端口或断网,自己内网折腾还行,对外公开访问就不折腾家宽啦~目前挂 CF 慢慢磨优化也勉强还能接受😀
gyjmila
17 天前
老哥,牛的,谢谢,等出差回去娃体验一下

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://v2ex.ih06.com/t/1233153

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX