爱意满满的作品展示区。
leonleung

史前动物博物馆更新:我把评论区的一个建议做成了「比一比」功能

  •  1
     
  •   leonleung · 5h 8m ago · 1123 views

    大家好,我又来了。

    上次我在 V2EX 分享了自己给女儿做的「 3D 史前动物博物馆」。那是这个项目第一次真正被更多人看到,也收到了很多鼓励和建议。GitHub 项目当天新增了三百多个 Star ,对我来说算是一次非常重要的破冰。

    非常感谢上次参与讨论的各位 V 友。

    「比一比」是怎么来的

    上次发帖时,有位 V 友在评论区提议:能不能在恐龙旁边放一个小朋友,或者其他孩子熟悉的参照物?这样就能更直观地感受到恐龙和其他史前生物究竟有多大。

    看到这条评论时,我马上想到了女儿那段时间睡前很喜欢听的一首歌——《大和小》。

    这首歌也是通过比较生活中常见事物的大小,帮助孩子理解“大”和“小”。于是我当时就想:这个功能我一定要做。

    它首先是为我的女儿做的,但我也希望其他年龄较小的孩子能够用到它。

    这里也特别感谢带来「比一比」灵感的两位 V 友:@maicai666 和 @hellcer

    它具体怎么玩

    进入「比一比」后,家长可以先选择男孩或女孩角色,并填写孩子的真实身高。

    我还增加了一个“是否可以靠近史前生物”的选项。因为有些年龄较小的孩子可能会害怕,家长可以让角色保持一定距离,不必走得太近。

    进入场景后,孩子的角色会按照填写的身高,与史前生物一起出现在同一个 3D 空间里。

    相比“体长十米”“翼展十二米”这类比较抽象的数字,孩子可以直接看到:

    > 如果我站在它旁边,我大概会到它身体的哪个位置?

    场景中还会有女声旁白,介绍史前生物的外形、身高、体长或者翼展。

    目前共有四类场景和 18 种史前生物:

    • 森林
    • 雪地
    • 天空
    • 海洋

    不同场景中的人物服装也不一样。

    在森林里,角色会穿丛林探险装;在雪地里会换上厚厚的防寒服;进入天空后会穿着翼装,与飞行生物一起飞翔;到了海洋里,则会穿上潜水服、脚蹼并背着氧气罐。

    角色可以使用方向键移动,从不同距离和角度观察史前生物。

    空格键在不同场景中也有不同作用:在陆地上是跳跃,在天空和水下则是加速。水下加速时,脚蹼后方还会出现水流和气泡效果。

    这些都是比较小的细节,但也是我自己做完以后比较喜欢的地方。

    比一比」海洋场景演示

    一个看起来很简单、实际做了半个月的功能

    一开始,我把这个功能想得太简单了。

    我觉得现在有 AI ,也有各种 3D 工具,把人物和史前生物放进同一个场景里,应该很快就能完成。

    真正开始做以后才发现,完全不是这么回事。

    这半个月里,我几乎没有铺开做其他新功能,主要时间都花在「比一比」的反复打磨上。

    最早的地面是用程序化方式生成的,纹理排列得非常整齐,看起来像一块块瓷砖,特别假。

    远景也试过使用 4K 、8K 图片,但图片被放到足够远、足够大的位置后,山体和背景会变得模糊,同样缺少真实感。

    后来又换了很多方案,反复调整,才做到现在这个相对自然一些的版本。

    人物模型则是另一个大坑。

    我最初想让 AI 操作 Blender ,先生成男孩和女孩两个基础模型,再分别给它们增加四个场景的服装。

    结果生成出来的装备非常离谱。

    四张早期失败装备的拼图

    做到这里时,我想起上次 V2EX 评论区里还有一位 V 友提到过 Meshy ,可以通过图片生成 3D 模型。

    于是我重新回去研究图片生成模型的流程。

    这里也感谢当时提供这条线索的 V 友:@avenger

    我最开始仍然想只做两个基础人物,再通过 Blender 增加服装,但实际效果依然很假。最后只能改变思路,针对四个场景和两个角色,分别制作八套完整模型。

    为了让同一个男孩或女孩在不同场景中保持相同的长相,还需要先生成角色的正面、背面、左侧和右侧图片,再用这些多视图图片生成 3D 模型。

    中间还有很多关于人物一致性、多视图生成和模型调整的坑。如果大家感兴趣,我之后可以再单独写一篇文章,分享这部分的尝试。

    在 AI 时代,从 60 分继续往上走

    做这个功能的过程中,我还有一个很深的感受。

    在 AI 时代,从 0 分做到 60 分,确实比以前容易了很多。

    只要把需求描述清楚,AI 很快就能生成一套看起来可以运行的东西。页面有了,3D 场景有了,人物也能够移动。仅仅从“什么都没有”走到“有一个可以演示的版本”,现在的门槛已经被大幅降低。

    但从 60 分开始,难度会迅速上升。

    从 60 分做到 80 分有点难,从 80 分做到 90 分很难,而从 90 分继续接近 100 分,可能真的难如登天。

    这里并不是说我已经把「比一比」做到了 90 分或者 100 分。以我自己的判断,它现在大概只完成到了 70 ~ 80 分,距离真正成熟、自然和完整,还有很长一段路。

    前面的 60 分,AI 可以很快帮我搭出来;但后面的每一分,都开始变得越来越具体。

    地面纹理为什么看起来像瓷砖?远景为什么一放大就显得模糊?人物的装备为什么像几块几何体拼在身上?不同场景中的光线、材质、比例和动作怎样才能看起来更协调?水下移动时应该给用户怎样的视觉反馈?

    这些问题并不是再多说几句“帮我做得真实一点”“帮我优化一下”就能自动解决的。

    AI 可以给出代码和方案,但我仍然需要先判断问题究竟出在哪里,理解不同方案的取舍,再一次次运行、观察、调整和推翻重来。如果自己不知道什么是对的,也就很难判断 AI 给出的结果到底能不能用。

    如果想让这个功能继续往上突破,我还需要认真学习更多 Three.js 的知识,也需要补上自己在 3D 场景构建、灯光、材质、镜头、动画和性能方面的不足。

    这里面存在大量无法直接写进提示词的隐性知识。它们可能来自专业基础,也可能只能在实际制作过程中,通过一次次失败慢慢积累。

    所以我现在越来越觉得,AI 降低的是“开始做”的门槛,但没有取消“把事情做好”的成本。

    它可以让一个普通人更快地拥有第一个版本,却不会自动把第一个版本变成真正成熟的产品。越接近后面的那几十分钟,越需要人的判断、审美、耐心和持续学习。

    而这半个月,我做的事情其实就是在不断尝试补上后面的这些分数。

    也在学习怎样让产品被更多人看到

    最近除了继续做产品,我也开始尝试在小红书、微信公众号和 X 上分享自己的制作过程。

    效果目前还谈不上多好,我也仍在摸索不同平台的内容方式。

    做了一段时间以后,我发现追热点获得一些流量并不难,难的是让真正对产品感兴趣、愿意持续关注的人留下来。

    单纯介绍产品,可能没有多少流量;直接放 GitHub 链接,在有些平台又可能被当作站外引流。很多规则和内容形式,只有真正开始做以后才能慢慢理解。

    我现在也没有找到标准答案,只是越来越觉得:把产品做出来是一件事,让真正需要它的人看到,又是另一件需要长期学习的事。

    对我来说,这些尝试最终还是希望让更多家长和孩子看到这个项目,而不仅仅是得到一组短期的流量数字。

    最后

    「比一比」最初来自 V2EX 评论区,也是我想为女儿做的一次尝试。

    从功能的想法,到图片生成 3D 模型的线索,都受到了上次 V 友回复的启发。所以这次更新也算是向之前关注过这个项目的朋友汇报一下进度。

    现在把它分享出来,希望大家可以帮忙体验一下。

    尤其想听听大家对下面这些问题的反馈:

    • 体型对比是否足够直观
    • 移动和观察方式是否容易理解
    • 场景和人物模型有没有明显异常
    • “保持距离”的设计是否合理
    • 在不同设备上的加载和运行是否流畅

    任何建议、问题和 Bug 都欢迎直接回复。

    如果觉得这个项目有意思,也欢迎顺手点个 Star 。

    35 replies    2026-08-26 12:32:23 +08:00
    leonleung
        1
    leonleung  
    OP
       5h 5m ago
    感谢 V 友:@avenger 、 @maicai666 提供灵感~
    感谢 V 友:@avenger 提供生成 3d 模型的网站~
    InDom
        2
    InDom  
       4h 47m ago
    Jim2Chen
        3
    Jim2Chen  
       4h 31m ago
    不错不错
    avenger
        4
    avenger  
       4h 27m ago
    真不错,越来越好了
    v00O
        5
    v00O  
       4h 27m ago
    说实话对这种动画 3D 并不太看好,如果把动画图片换成真实图片也做成 3D 效果,那种会不会更好,如果是史前动物也最好做成类真实的图片效果,不要停在动画效果上面。
    xyooyx
        6
    xyooyx  
       4h 22m ago
    不自觉的按 wasd ,想移动🤔
    leonleung
        7
    leonleung  
    OP
       4h 16m ago via Android
    @Jim2Chen 谢谢,欢迎带孩子试玩😄
    leonleung
        8
    leonleung  
    OP
       4h 15m ago via Android
    @leonleung 还有感谢 @hellcer 提供灵感建议🙏
    ShiBuYi
        9
    ShiBuYi  
       4h 6m ago
    我看了下,模型差评。
    看不到生殖器
    0754
        10
    0754  
       3h 44m ago
    很棒,小儿子很喜欢~~
    zml5d
        11
    zml5d  
       3h 37m ago
    试了剑龙和霸王龙的比一比功能 选择靠近和远距离进入都是一个距离呢。
    leonleung
        12
    leonleung  
    OP
       3h 36m ago via Android
    @avenger 谢谢你咯,不然还得头疼人物模型
    NotAfraidLP
        13
    NotAfraidLP  
       3h 13m ago
    后面有什么变现方向吗? 起码能收回点服器成本吧
    看了你的小红书, star 甚至还没有你别的文章多, 是不是有引流被限流了
    Harbor0202
        14
    Harbor0202  
       3h 8m ago
    个人网站真漂亮 OP 审美真不错
    yanguoyu
        15
    yanguoyu  
       3h 1m ago
    好棒,有几个意见不知道好不好做:

    1. 希望能记住我的对比设置,这样下次点和我比较的时候就不用重复选择了
    2. 希望第三视角看的时候如何也能移动人物就好了,也就是说当我用第一视角移动到动物旁边之后在修改成第三视角时人物不会退回到初始位置
    tianhehechu
        16
    tianhehechu  
       2h 55m ago
    楼主可以使用 ThreeJSON 来完成试试,可以省去很多手写 3D 处理的步骤,支持引入外部 3D 模型

    ThreeJSON 官网: https://threejson.org/website/

    像相机视角自适应、缩放、旋转、移动等都可以用封装好的框架完成。
    BangJQL
        17
    BangJQL  
       2h 52m ago
    感觉很棒哦
    gargar
        18
    gargar  
       2h 22m ago
    很棒。几个改进可以考虑:
    1. 人物跟动物离得有点远,不知道是我设置问题还是啥,第一次打开剑龙时我完全找不到人在哪里。小朋友的衣着跟背景完美融合。靠近点也方便比较。
    2. 小朋友的身高是公制。可以考虑根据地区改成英制。
    3. 讲英语时带的中文口音比较明显哈哈,可能跟你使用的 TTS 模型有关,
    Unitent
        19
    Unitent  
       2h 17m ago
    op 你好,我很喜欢你的产品,我可以从我的角度重构你的产品然后推广吗,当然我会标明基于你的产品创意开发的。
    Unitent
        20
    Unitent  
       2h 17m ago
    因为我也在 3d 相关的
    leonleung
        21
    leonleung  
    OP
       2h 15m ago
    @InDom #2 这是什么表情包呀?
    leonleung
        22
    leonleung  
    OP
       2h 14m ago
    @xyooyx #6 哈哈,考虑更多是小朋友玩,上下左右键直观点,后面也可以加入 WASD ,满足大孩子的习惯哈哈哈
    leonleung
        23
    leonleung  
    OP
       2h 13m ago
    @0754 #10 孩子有什么想法都可以跟叔叔提噢
    InDom
        24
    InDom  
       2h 12m ago
    @leonleung #21 史前动物

    leonleung
        25
    leonleung  
    OP
       2h 11m ago
    @zml5d #11 PC 端可以通过上下键控制或者鼠标滚轮前后移动,移动端是手指缩放。留点距离和靠近观察不是指初始进入点,指的是可以走近的距离。
    leonleung
        26
    leonleung  
    OP
       2h 7m ago
    @NotAfraidLP #13 哈哈,是的,朋友你观察的很仔细,小红书对外链管理很严格,可能是因为贴了 github 的地址,没给流量池。变现我也在慢慢探索呢,先结合我自己的实际需要做做开源产品,练练手感。以前都是工程师思维,没有主动输出的想法,现在也在慢慢转变思维,多输出干货,多输出美好的东西,我相信一切都会有的~
    leonleung
        27
    leonleung  
    OP
       2h 6m ago
    @Harbor0202 #14 谢谢,毕竟也是十多年老前端了哈哈哈,css 功底也是在的
    leonleung
        28
    leonleung  
    OP
       2h 1m ago
    @yanguoyu #15 谢谢意见哈
    1. 目前是把设置存在 sessionStorage ,当前页面切换动物是不用重新设置。不过确实也是可以存在 localStorage 里,方便孩子反复观看。
    2. 第一视角和第三视角之间切换,人物的位置不会变化呀,右上角可以切换眼睛视角和身后视角,是不是误点了退后看全身了,这个文案有点误导,我改改
    leonleung
        29
    leonleung  
    OP
       2h 0m ago
    @tianhehechu #16 感谢提供思路哈,我学习了解下~~~
    leonleung
        30
    leonleung  
    OP
       1h 59m ago
    @BangJQL #17 谢谢,带小朋友沉浸式体验下咯哈哈,建议在 PC 端,移动端移动体验不太好还得重构下
    leonleung
        31
    leonleung  
    OP
       1h 52m ago
    @gargar #18 感谢你的建议:
    1. 你说的这个问题我也注意到了,还得继续打磨。本意是想让小朋友能够直观的看到身高的差距,可能得想下相机位置或者视线指引。
    2. 你这个点我倒是没想到哈哈,英语的时候换成英制。
    3.哈哈是的,用的是 qwen 3 tts 0.6B ,主要是审校中文,英文倒是没怎么听
    leonleung
        32
    leonleung  
    OP
       1h 50m ago
    @Unitent #19 可以,没问题,注意代码仓库里的 license 说明即可
    leonleung
        33
    leonleung  
    OP
       1h 49m ago
    @InDom #24 哈哈哈,特别是迷惑龙,整个被支配住
    yanguoyu
        34
    yanguoyu  
       1h 17m ago
    @leonleung 是我没有注意到,习惯了操作都在下方,字幕可以关闭吗?小朋友现在好像还不识字,然后把视角切换放下来。

    以上是我个人感觉喜好,不代表其他人。
    justdoitzZ
        35
    justdoitzZ  
       1h 14m ago
    考不考虑增加一些当代的物品的介绍啊
    比如交通类,各种车辆,飞机,轮船,支持放大缩小
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   5231 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 62ms · UTC 05:46 · PVG 13:46 · LAX 22:46 · JFK 01:46
    ♥ Do have faith in what you're doing.