V2EX = way to explore
V2EX 是一个关于分享和探索的地方
Sign Up Now
For Existing Member  Sign In
爱意满满的作品展示区。
syt123450

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

  •  2
     
  •   syt123450 · Jan 15, 2019 · 8065 views
    This topic created in 2668 days ago, the information mentioned may be changed or developed.

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

    intro

    功能介绍

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

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

    Demo & 代码

    56 replies    2019-01-19 00:49:11 +08:00
    a570295535
        1
    a570295535  
       Jan 16, 2019 via Android
    你得在做一个辣鸡辣的生成器,这样以后肯德基都找你一键作图
    xiaoluoboding
        2
    xiaoluoboding  
       Jan 16, 2019   ❤️ 3
    内容过于沙雕
    viko16
        3
    viko16  
       Jan 16, 2019 via Android
    好评!
    不过似乎移动端按钮样式有点问题?
    wcsjtu
        4
    wcsjtu  
       Jan 16, 2019 via Android
    看饿了
    ddiu8081
        5
    ddiu8081  
       Jan 16, 2019 via Android
    好评🌝
    手机版可以屏蔽页面缩放?用手一捏页面也跟着缩放了...
    EscYezi
        6
    EscYezi  
       Jan 16, 2019 via iPhone
    奥利奥给了你多少钱 我大牛乳业出三倍(doge)
    sdijeenx
        7
    sdijeenx  
       Jan 16, 2019
    好评,再做一下光效可以当壁纸了=3=
    https://raw.githubusercontent.com/firedom/oreo-lang/master/screen.png
    shrekshao
        8
    shrekshao  
       Jan 16, 2019
    楼主好屌。。我也做 webgl 相关。。已 follow github lol
    Trumeet
        9
    Trumeet  
       Jan 16, 2019 via Android
    沙雕好评,不过手机有点卡
    SeaRecluse
        10
    SeaRecluse  
       Jan 16, 2019
    新头像 get 哈哈哈
    syt123450
        11
    syt123450  
    OP
       Jan 16, 2019
    @a570295535 要不加一点生菜,做一个 辣鸡菜鸡 生成器?
    syt123450
        12
    syt123450  
    OP
       Jan 16, 2019
    @xiaoluoboding o(0.0)o
    syt123450
        13
    syt123450  
    OP
       Jan 16, 2019
    @wcsjtu 来一份 奥利奥利奥利奥
    syt123450
        14
    syt123450  
    OP
       Jan 16, 2019
    @EscYezi 3 箱草莓味伊利优酸乳,实现一个 蒙蒙蒙
    syt123450
        15
    syt123450  
    OP
       Jan 16, 2019
    @Trumeet three.js 使用 webgl 渲染,在手机端如果开启 webgl2 功能的话应该会快不少
    syt123450
        16
    syt123450  
    OP
       Jan 16, 2019
    @sdijeenx 试了好久奥利奥阴影效果,最后使用 1 面光源+4 方向光
    agoodob
        17
    agoodob  
       Jan 16, 2019
    希望下一篇帖子是 AR/VR 奥利奥生成器,可以识别平面并且在桌上进行堆叠。(期待)
    cheese
        18
    cheese  
       Jan 16, 2019
    我点了打包带走,但是我的桌子上并没有出现奥利奥。楼主骗人!还我奥利奥!(一个小 bug,在 English 语言下,打包带走还是中文)
    but0n
        19
    but0n  
       Jan 16, 2019 via iPhone
    @syt123450 感觉 WebGL2 在 iOS 上各种坑
    but0n
        20
    but0n  
       Jan 16, 2019 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  
       Jan 16, 2019
    油光发亮的奥利奥
    sdijeenx
        22
    sdijeenx  
       Jan 16, 2019
    @but0n IOS 上使用正常,第一次打开那个网站需要等待较长时间加载文件,不然你看不到 OREO 模型。
    wdv2ly
        23
    wdv2ly  
       Jan 16, 2019
    场景灯光有点奇怪
    run2
        24
    run2  
       Jan 16, 2019
    @silencefent #21 所以更像铁饼-。-
    lz,再来个汉堡王之类的(然后你可以把这个小 html 卖给他们)😂
    panda
        25
    panda  
       Jan 16, 2019 via Android
    还以为是 Android 标志……
    syt123450
        26
    syt123450  
    OP
       Jan 16, 2019
    @viko16 感谢提醒! 已经对手机进行了自适应~
    nezumi85757
        27
    nezumi85757  
       Jan 16, 2019
    再给自己加加难度 把奶油的膏体特征做出来
    wdytoya
        28
    wdytoya  
       Jan 16, 2019
    过于沙雕,已举报 [手动滑稽]
    cue
        29
    cue  
       Jan 16, 2019
    进来之前我以为说的是 Android 8.0 系统……
    进来之后卧槽……
    tao1991123
        30
    tao1991123  
       Jan 16, 2019
    O(∩_∩)O 哈哈~ 不错 赞一个
    syt123450
        31
    syt123450  
    OP
       Jan 16, 2019
    @shrekshao 感谢关注~
    syt123450
        32
    syt123450  
    OP
       Jan 16, 2019
    @agoodob 同期待 VR 版奥利奥
    syt123450
        33
    syt123450  
    OP
       Jan 16, 2019
    @cheese 需要一个 three.js 的盘子把打包的.gltf 奥利奥呈出来 QAQ 多语言 bug 应该已经修复了?
    cheese
        34
    cheese  
       Jan 16, 2019
    @syt123450 #33 简体中文的图标竟然是繁体的简字,也似乎不太对呢
    snowspace
        35
    snowspace  
       Jan 16, 2019
    做的太厚有点像轮胎
    syt123450
        36
    syt123450  
    OP
       Jan 16, 2019
    @ddiu8081 感谢提醒,加了个 body 禁止拖拽,已经修复了~
    syt123450
        37
    syt123450  
    OP
       Jan 16, 2019
    @but0n WebGL IOS 的浏览器兼容说多了都是泪。。。之前有个项目中 three.js 想试试使用 webgl2 renderer,结果在调了好久莫名其妙兼容之后,老老实实退回了 webgl renderer。。。
    syt123450
        38
    syt123450  
    OP
       Jan 16, 2019
    @silencefent 抹了黄油的奥利奥😂
    amwyyyy
        39
    amwyyyy  
       Jan 16, 2019
    奥利奥中间的奶油并没有这么多
    huruwo
        40
    huruwo  
       Jan 16, 2019
    有思路了 计划出一个 Android 版奥利奥生成器
    petelin
        41
    petelin  
       Jan 16, 2019
    看饿了
    syt123450
        42
    syt123450  
    OP
       Jan 16, 2019
    @sobigfish 堡汉堡堡汉堡🤣
    syt123450
        43
    syt123450  
    OP
       Jan 16, 2019
    @nezumi85757 好主意,准备换一个吸光材质试试
    syt123450
        44
    syt123450  
    OP
       Jan 16, 2019
    @cheese 之前没注意😂 已经换了一个真简体 icon
    syt123450
        45
    syt123450  
    OP
       Jan 16, 2019
    @huruwo 期待安卓版!
    hqyswz
        46
    hqyswz  
       Jan 16, 2019
    好评,点赞
    leiuu
        47
    leiuu  
       Jan 16, 2019
    为啥泛黄泛黄的
    Valid
        48
    Valid  
       Jan 16, 2019
    emmmm,奥利奥是磨砂面的吧
    leiuu
        49
    leiuu  
       Jan 16, 2019
    打开这个页面风扇满转。。。
    locoz
        50
    locoz  
       Jan 17, 2019
    下载下来配合 win10 自带的 3D 查看器的快速动画功能,更沙雕了。。
    sannyzeng
        51
    sannyzeng  
       Jan 17, 2019
    求一个盘一盘奥利奥的功能,我想盘它!!想盘它!!
    syt123450
        52
    syt123450  
    OP
       Jan 17, 2019
    @leiuu 打了泛黄的方向灯😂
    syt123450
        53
    syt123450  
    OP
       Jan 17, 2019
    @leiuu 已经尽力优化了。。。不过在浏览器端跑可交互 3D 程序,GPU 压力都会比较大。。。
    syt123450
        54
    syt123450  
    OP
       Jan 17, 2019
    @sannyzeng 感觉可以再做得干干巴巴,麻麻赖赖一点,这样盘起来比较有感觉😏
    catalina
        55
    catalina  
       Jan 18, 2019
    不知道这个是不是 bug。。。当底层为“与”、次底层为“奥”的时候,从底下看上去,没有本来应该显示的花纹和 OREO 字样。
    https://s2.ax1x.com/2019/01/18/kpX2JH.png
    syt123450
        56
    syt123450  
    OP
       Jan 19, 2019
    @catalina 黑色饼干默认文字朝上,只有在最后的时候才会翻一面。这种情况最后一层是“与”,所以倒数第二层的“饼干”没有翻面,所以直接看到平的那面了😂
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   6120 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 200ms · UTC 02:07 · PVG 10:07 · LAX 19:07 · JFK 22:07
    ♥ Do have faith in what you're doing.