做了一个 3D 奥利奥生成器,立体沙雕 - V2EX
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
syt123450
V2EX    分享创造

做了一个 3D 奥利奥生成器,立体沙雕

  •  2
     
  •   syt123450 2019-01-15 23:48:56 +08:00 7755 次点击
    这是一个创建于 2492 天前的主题,其中的信息可能已经有所发展或是发生改变。

    受之前的一个 2D 奥利奥生成器 的感染(有毒>_<),做了一个 3D 奥利奥生成器。实现过程并不复杂,使用了 React+Three.js ,感觉自己沙雕的思绪得到了升华。

    intro

    功能介绍

    这个 3D 奥利奥生成器有很多有(一)趣(无)好(是)玩(处)的功能

    • 揉一揉奥利奥
    • 奥利奥出现了,又消失了,再次出现了,然后又消失了。。。
    • 生成特别的 奥利奥利奥利
    • 打包导出 3D奥利奥( 3D 场景,.gltf 格式)

    Demo & 代码

    56 条回复    2019-01-19 00:49:11 +08:00
    a570295535
        1
    a570295535  
       2019-01-16 00:03:57 +08:00 via Android
    你得在做一个辣鸡辣的生成器,这样以后肯德基都找你一键作图
    xiaoluoboding
        2
    xiaoluoboding  
       2019-01-16 00:11:03 +08:00   3
    内容过于沙雕
    viko16
        3
    viko16  
       2019-01-16 00:14:27 +08:00 via Android
    好评!
    不过似乎移动端按钮样式有点问题?
    wcsjtu
        4
    wcsjtu  
       2019-01-16 00:20:42 +08:00 via Android
    看饿了
    ddiu8081
        5
    ddiu8081  
       2019-01-16 00:30:55 +08:00 via Android
    好评
    手机版可以屏蔽页面缩放?用手一捏页面也跟着缩放了...
    EscYezi
        6
    EscYezi  
       2019-01-16 00:31:42 +08:00 via iPhone
    奥利奥给了你多少钱 我大牛乳业出三倍(doge)
    sdijeenx
        7
    sdijeenx  
       2019-01-16 01:24:12 +08:00
    好评,再做一下光效可以当壁纸了=3=
    https://raw.githubusercontent.com/firedom/oreo-lang/master/screen.png
    shrekshao
        8
    shrekshao  
       2019-01-16 01:52:38 +08:00
    楼主好。。我也做 webgl 相关。。已 follow github lol
    Trumeet
        9
    Trumeet  
       2019-01-16 02:21:26 +08:00 via Android
    沙雕好评,不过手机有点卡
    SeaRecluse
        10
    SeaRecluse  
       2019-01-16 09:54:41 +08:00
    新头像 get 哈哈哈
    syt123450
        11
    syt123450  
    OP
       2019-01-16 10:17:41 +08:00
    @a570295535 要不加一点生菜,做一个 辣鸡菜鸡 生成器?
    syt123450
        12
    syt123450  
    OP
       2019-01-16 10:20:36 +08:00
    @xiaoluoboding o(0.0)o
    syt123450
        13
    syt123450  
    OP
       2019-01-16 10:22:49 +08:00
    @wcsjtu 来一份 奥利奥利奥利奥
    syt123450
        14
    syt123450  
    OP
       2019-01-16 10:27:53 +08:00
    @EscYezi 3 箱草莓味伊利优酸乳,实现一个 蒙蒙蒙
    syt123450
        15
    syt123450  
    OP
       2019-01-16 10:40:11 +08:00
    @Trumeet three.js 使用 webgl 渲染,在手机端如果开启 webgl2 功能的话应该会快不少
    syt123450
        16
    syt123450  
    OP
       2019-01-16 10:48:30 +08:00
    @sdijeenx 试了好久奥利奥阴影效果,最后使用 1 面光源+4 方向光
    agoodob
        17
    agoodob  
       2019-01-16 11:33:45 +08:00
    希望下一篇帖子是 AR/VR 奥利奥生成器,可以识别平面并且在桌上进行堆叠。(期待)
    cheese
        18
    cheese  
       2019-01-16 11:39:11 +08:00
    我点了打包带走,但是我的桌子上并没有出现奥利奥。楼主骗人!还我奥利奥!(一个小 bug,在 English 语言下,打包带走还是中文)
    but0n
        19
    but0n  
       2019-01-16 11:42:08 +08:00 via iPhone
    @syt123450 感觉 WebGL2 在 iOS 上各种坑
    but0n
        20
    but0n  
       2019-01-16 11:56:40 +08:00 via iPhone
    得知 iOS Safari 可以开启 WebGL2.0 后挺兴奋的就开了一个坑,后来发现 webgl2 在 iOS 上就是个笑话
    es300 不支持,vao 也不支持,接下来打算试试 mrt 不知道会怎么样
    而且不知道为什么 iPhone 渲染正常,iPad Pro 渲染出来所有的面都是乱七八糟的
    50M 预警:
    https://but0n.github.io/Ashes/#https://but0n.github.io/Ashes/gltfsamples/FlightHelmet/glTF/FlightHelmet.gltf#10
    silencefent
        21
    silencefent  
       2019-01-16 11:59:32 +08:00
    油光发亮的奥利奥
    sdijeenx
        22
    sdijeenx  
       2019-01-16 12:01:48 +08:00
    @but0n IOS 上使用正常,第一次打开那个网站需要等待较长时间加载文件,不然你看不到 OREO 模型。
    wdv2ly
        23
    wdv2ly  
       2019-01-16 12:30:16 +08:00
    场景灯光有点奇怪
    run2
        24
    run2  
       2019-01-16 12:34:11 +08:00
    @silencefent #21 所以更像铁饼-。-
    lz,再来个汉堡王之类的(然后你可以把这个小 html 卖给他们)
    panda
        25
    panda  
       2019-01-16 12:35:35 +08:00 via Android
    还以为是 Android 标志……
    syt123450
        26
    syt123450  
    OP
       2019-01-16 13:17:44 +08:00
    @viko16 感谢提醒! 已经对手机进行了自适应~
    nezumi85757
        27
    nezumi85757  
       2019-01-16 13:27:33 +08:00
    再给自己加加难度 把奶油的膏体特征做出来
    wdytoya
        28
    wdytoya  
       2019-01-16 13:27:54 +08:00
    过于沙雕,已举报 [手动滑稽]
    cue
        29
    cue  
       2019-01-16 13:35:35 +08:00
    进来之前我以为说的是 Android 8.0 系统……
    进来之后卧槽……
    tao1991123
        30
    tao1991123  
       2019-01-16 13:40:43 +08:00
    O(∩_∩)O 哈哈~ 不错 赞一个
    syt123450
        31
    syt123450  
    OP
       2019-01-16 13:45:12 +08:00
    @shrekshao 感谢关注~
    syt123450
        32
    syt123450  
    OP
       2019-01-16 13:48:20 +08:00
    @agoodob 同期待 VR 版奥利奥
    syt123450
        33
    syt123450  
    OP
       2019-01-16 13:52:37 +08:00
    @cheese 需要一个 three.js 的盘子把打包的.gltf 奥利奥呈出来 QAQ 多语言 bug 应该已经修复了?
    cheese
        34
    cheese  
       2019-01-16 13:59:15 +08:00
    @syt123450 #33 简体中文的图标竟然是繁体的简字,也似乎不太对呢
    snowspace
        35
    snowspace  
       2019-01-16 14:18:19 +08:00
    做的太厚有点像轮胎
    syt123450
        36
    syt123450  
    OP
       2019-01-16 14:44:31 +08:00
    @ddiu8081 感谢提醒,加了个 body 禁止拖拽,已经修复了~
    syt123450
        37
    syt123450  
    OP
       2019-01-16 14:53:26 +08:00
    @but0n WebGL IOS 的浏览器兼容说多了都是泪。。。之前有个项目中 three.js 想试试使用 webgl2 renderer,结果在调了好久莫名其妙兼容之后,老老实实退回了 webgl renderer。。。
    syt123450
        38
    syt123450  
    OP
       2019-01-16 14:56:06 +08:00
    @silencefent 抹了黄油的奥利奥
    amwyyyy
        39
    amwyyyy  
       2019-01-16 14:57:37 +08:00
    奥利奥中间的奶油并没有这么多
    huruwo
        40
    huruwo  
       2019-01-16 15:28:43 +08:00
    有思路了 计划出一个 Android 版奥利奥生成器
    petelin
        41
    petelin  
       2019-01-16 15:40:05 +08:00
    看饿了
    syt123450
        42
    syt123450  
    OP
       2019-01-16 16:14:37 +08:00
    @sobigfish 堡汉堡堡汉堡
    syt123450
        43
    syt123450  
    OP
       2019-01-16 16:17:34 +08:00
    @nezumi85757 好主意,准备换一个吸光材质试试
    syt123450
        44
    syt123450  
    OP
       2019-01-16 16:18:57 +08:00
    @cheese 之前没注意 已经换了一个真简体 icon
    syt123450
        45
    syt123450  
    OP
       2019-01-16 16:19:35 +08:00
    @huruwo 期待安卓版!
    hqyswz
        46
    hqyswz  
       2019-01-16 17:01:05 +08:00
    好评,点赞
    leiuu
        47
    leiuu  
       2019-01-16 17:16:58 +08:00
    为啥泛黄泛黄的
    Valid
        48
    Valid  
       2019-01-16 17:17:18 +08:00
    emmmm,奥利奥是磨砂面的吧
    leiuu
        49
    leiuu  
       2019-01-16 17:18:40 +08:00
    打开这个页面风扇满转。。。
    locoz
        50
    locoz  
       2019-01-17 10:25:40 +08:00
    下载下来配合 win10 自带的 3D 查看器的快速动画功能,更沙雕了。。
    sannyzeng
        51
    sannyzeng  
       2019-01-17 16:50:18 +08:00
    求一个盘一盘奥利奥的功能,我想盘它!!想盘它!!
    syt123450
        52
    strong>syt123450  
    OP
       2019-01-17 19:54:12 +08:00
    @leiuu 打了泛黄的方向灯
    syt123450
        53
    syt123450  
    OP
       2019-01-17 19:55:43 +08:00
    @leiuu 已经尽力优化了。。。不过在浏览器端跑可交互 3D 程序,GPU 压力都会比较大。。。
    syt123450
        54
    syt123450  
    OP
       2019-01-17 19:57:12 +08:00
    @sannyzeng 感觉可以再做得干干巴巴,麻麻赖赖一点,这样盘起来比较有感觉
    catalina
        55
    catalina  
       2019-01-18 08:10:58 +08:00
    不知道这个是不是 bug。。。当底层为“与”、次底层为“奥”的时候,从底下看上去,没有本来应该显示的花纹和 OREO 字样。
    https://s2.ax1x.com/2019/01/18/kpX2JH.png
    syt123450
        56
    syt123450  
    OP
       2019-01-19 00:49:11 +08:00
    @catalina 黑色饼干默认文字朝上,只有在最后的时候才会翻一面。这种情况最后一层是“与”,所以倒数第二层的“饼干”没有翻面,所以直接看到平的那面了
    关于     帮助文档     自助推广系统     博客     API     FAQ     Solana     2284 人在线   最高记录 6679       Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 28ms UTC 16:03 PVG 00:03 LAX 08:03 JFK 11:03
    Do have faith in what you're doing.
    ubao msn snddm index pchome yahoo rakuten mypaper meadowduck bidyahoo youbao zxmzxm asda bnvcg cvbfg dfscv mmhjk xxddc yybgb zznbn ccubao uaitu acv GXCV ET GDG YH FG BCVB FJFH CBRE CBC GDG ET54 WRWR RWER WREW WRWER RWER SDG EW SF DSFSF fbbs ubao fhd dfg ewr dg df ewwr ewwr et ruyut utut dfg fgd gdfgt etg dfgt dfgd ert4 gd fgg wr 235 wer3 we vsdf sdf gdf ert xcv sdf rwer hfd dfg cvb rwf afb dfh jgh bmn lgh rty gfds cxv xcv xcs vdas fdf fgd cv sdf tert sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf shasha9178 shasha9178 shasha9178 shasha9178 shasha9178 liflif2 liflif2 liflif2 liflif2 liflif2 liblib3 liblib3 liblib3 liblib3 liblib3 zhazha444 zhazha444 zhazha444 zhazha444 zhazha444 dende5 dende denden denden2 denden21 fenfen9 fenf619 fen619 fenfe9 fe619 sdf sdf sdf sdf sdf zhazh90 zhazh0 zhaa50 zha90 zh590 zho zhoz zhozh zhozho zhozho2 lislis lls95 lili95 lils5 liss9 sdf0ty987 sdft876 sdft9876 sdf09876 sd0t9876 sdf0ty98 sdf0976 sdf0ty986 sdf0ty96 sdf0t76 sdf0876 df0ty98 sf0t876 sd0ty76 sdy76 sdf76 sdf0t76 sdf0ty9 sdf0ty98 sdf0ty987 sdf0ty98 sdf6676 sdf876 sd876 sd876 sdf6 sdf6 sdf9876 sdf0t sdf06 sdf0ty9776 sdf0ty9776 sdf0ty76 sdf8876 sdf0t sd6 sdf06 s688876 sd688 sdf86