V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
syt123450
V2EX  ›  分享创造

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

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

    受之前的一个 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
    场景灯光有点奇怪
    sobigfish
        24
    sobigfish  
       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
    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   ·   实用小工具   ·   5378 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 31ms · UTC 08:09 · PVG 16:09 · LAX 00:09 · JFK 03:09
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.