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

分享下从国庆节做到劳动节的 3D 个人网站

  •  6
     
  •   SuneBear · 2022-05-06 19:05:37 +08:00 · 5033 次点击
    这是一个创建于 692 天前的主题,其中的信息可能已经有所发展或是发生改变。

    最早个人网站是用 Hexo 做的,可以满足 Markdown 文档需求。 如果要自定义交互组件实现起来会比较麻烦,于是迁移到了 Nuxt 。 基于 Vue + Three.js 做了三件事:

    1. 自我介绍

    除了加一些点击彩蛋,还在结尾添加了以月为单位的回忆录

    https://i.imgur.com/HlCzu1T.png

    2. 手绘 UI

    用 CSS + SVG Filter 模拟了一些扭曲效果,让 UI 看起来有手工感。如果不需要兼容 Safari ,这套方案完全可以用到生产环境中,可以省去很多切图

    2. 3D 交互实验

    https://imgur.com/a/jTq7reL.png

    这部分加载界面直接用 Canvas 2D 进行渲染,加载完后的场景用 WebGL 渲染。有一部分需要定位的 UI 会用到混合渲染。具体的幕后实现(从想法到实施)我做了 一个页面来详细说明

    如果你对这三个部分感兴趣,可以去 https://github.com/SuneBear/sunebear.com 查看源代码

    欢迎分享交流各种有趣的个人网站,比如把个人网站做成 Notion/永硕 E 盘的形式,可以很方便展示自己喜欢的东西

    40 条回复    2022-05-16 10:44:15 +08:00
    secondwtq
        1
    secondwtq  
       2022-05-06 19:10:30 +08:00
    永硕 E 盘 ... 楼主几岁了?
    SuneBear
        2
    SuneBear  
    OP
       2022-05-06 19:13:39 +08:00
    @secondwtq 初中的时候挺喜欢这种资源汇集形式的,感觉不比现在的 Notion 个人主页差,Notion 的中性色 + Emoji 更符合现代 UI ,不过网络问题一直没有得到解决
    rabbbit
        3
    rabbbit  
       2022-05-06 19:24:37 +08:00
    这个水是 shader ?
    ccyu220
        4
    ccyu220  
       2022-05-06 19:25:17 +08:00
    赞👍
    cccb
        5
    cccb  
       2022-05-06 19:26:31 +08:00
    m1 chrome cpu 占用直接起飞
    SuneBear
        6
    SuneBear  
    OP
       2022-05-06 19:31:06 +08:00   ❤️ 1
    @rabbbit 不知道你说的哪个地方的水,我在网站中总共用了三种方式实现 Wave 效果:1 ) Svg Sine Wave ,基于 d3-shape 生成 path ,再用 ticker 做动画,2 )加载时的 Wave ,这里用到了 perlin noise ,3 ) 3D 场景的水面,几何是一个两三角 Plane ,材质是 Shader ,其中移动时的轨迹用到 FBO 记录后传给水面
    SuneBear
        7
    SuneBear  
    OP
       2022-05-06 19:34:00 +08:00
    @cccb 包含动画的 3D 场景资源消耗高暂时无解,目前用到的渲染方式和游戏一样,每次都会重新执行所有 Draw Call + Render 。没办法像 DOM 一样做 Patch
    ddiu8081
        8
    ddiu8081  
       2022-05-06 19:46:13 +08:00   ❤️ 1
    三个岛逛完了,从文案到实际的渲染都很厉害!👍
    SuneBear
        9
    SuneBear  
    OP
       2022-05-06 20:02:30 +08:00
    @ddiu8081 感谢体验,目前三渲二的效果还很糟糕,折腾了一些 Post Processing 导致帧数直线下降,不敢再搞了~后续打算学这门课程《 GAMES101: 现代计算机图形学入门》,把更多的事情放到 GPU 中处理
    rabbbit
        10
    rabbbit  
       2022-05-06 20:13:31 +08:00
    咦我这笔记本很流畅啊,4600H 才占了 5%。
    话说那个钥匙在哪?
    rabbbit
        11
    rabbbit  
       2022-05-06 20:15:31 +08:00
    显卡占了 25%,其实我觉着这个优化可以了。
    SuneBear
        12
    SuneBear  
    OP
       2022-05-06 20:19:46 +08:00
    @rabbbit 你是游戏本吗?我自己的本子是 Intel MBP ,打开像 PPT 一样(与用 Mac 玩 Dota 2 类似),用台式机可以正常刷帧。箱子的钥匙我还没有做~预计后面是放一些福利内容进去
    teem
        13
    teem  
       2022-05-06 22:18:32 +08:00   ❤️ 1
    很喜欢简单的手绘 UI 风格。
    DreamCMS
        14
    DreamCMS  
       2022-05-06 22:26:49 +08:00
    苹果树下
    LeegoYih
        15
    LeegoYih  
       2022-05-06 22:35:01 +08:00   ❤️ 1
    看上去很棒
    yl20181003
        16
    yl20181003  
       2022-05-06 22:44:50 +08:00   ❤️ 1
    效果很棒,不过有点点卡,我笔记本只有核显 hhh
    WhateverYouLike
        17
    WhateverYouLike  
       2022-05-06 22:47:43 +08:00   ❤️ 1
    真好看呀🥰,不过确实有点点卡。设备 Android Chrome mobile
    lizhenda
        18
    lizhenda  
       2022-05-06 23:11:51 +08:00 via iPhone   ❤️ 1
    iphone 超级流畅
    tq0106
        19
    tq0106  
       2022-05-06 23:41:58 +08:00   ❤️ 1
    炫酷!
    isSamle
        20
    isSamle  
       2022-05-07 08:53:39 +08:00   ❤️ 1
    牛逼 3 连, 马上(抄)研究下,我之前想写一个 3D 小镇,然后用建筑代表自己的项目,图书馆→文库,电影院→观影 h5 ,库房→物流管理,写字楼→项目管理……但是 Three.js 随便导入一个模型都好大
    maypu
        21
    maypu  
       2022-05-07 09:20:17 +08:00   ❤️ 1
    可以,真的牛,而且看起来楼主年龄很小
    SuneBear
        22
    SuneBear  
    OP
       2022-05-07 09:31:41 +08:00 via iPhone
    @isSamle 牛,期待你早日发布,做个虚拟电影院出来,放一些会座椅和观众白噪音会非常有感觉。目前仅用 Three.js 实现成本确实太高了,各种模型放到 Blender 可以用,在 Web 上抠门文件体积是绕不开的话题…
    oldshensheep
        23
    oldshensheep  
       2022-05-07 09:47:05 +08:00   ❤️ 1
    楼主 27 岁
    @maypu
    @secondwtq
    VitaminC1989
        24
    VitaminC1989  
       2022-05-07 10:17:37 +08:00
    楼主这也太强了吧 请问手绘 UI 效果的库会开源吗
    bytesfold
        25
    bytesfold  
       2022-05-07 10:35:17 +08:00
    SuneBear
        26
    SuneBear  
    OP
       2022-05-07 10:39:31 +08:00
    @VitaminC1989 已经是开源的,具体链接 https://github.com/SuneBear/sunebear.com/tree/master/components/cear-ui 。目前这个 UI 库没有写文档,我建议直接看 SVG Distort Filter 相关文章 https://www.smashingmagazine.com/2021/09/deep-dive-wonderful-world-svg-displacement-filtering/
    ixoy
        27
    ixoy  
       2022-05-07 11:26:28 +08:00   ❤️ 1
    有趣的体验。期待楼主多放几个彩蛋,哈哈 O(∩_∩)O
    WillBC
        28
    WillBC  
       2022-05-07 13:29:57 +08:00   ❤️ 1
    顺着你的 GitHub 找到了 https://sunebear.github.io/Piano-Flow/#/pieces

    很有意思,谢谢分享。
    LonelyShadow
        29
    LonelyShadow  
       2022-05-07 13:49:17 +08:00   ❤️ 1
    很棒的网站,OP 厉害👍
    orangeshine
        30
    orangeshine  
       2022-05-07 14:23:46 +08:00 via iPhone   ❤️ 1
    OP 好棒👍
    学习了
    superliwei
        31
    superliwei  
       2022-05-07 16:21:09 +08:00   ❤️ 1
    挺棒的,M1 的 mini 体验很流畅,给你点赞👍
    yyh0808
        32
    yyh0808  
       2022-05-07 16:25:26 +08:00   ❤️ 1
    很可爱,有意思👍
    EvilDevilJin
        33
    EvilDevilJin  
       2022-05-07 16:48:33 +08:00   ❤️ 1
    好厉害 好牛逼
    dNib9U2o8x
        34
    dNib9U2o8x  
       2022-05-07 18:40:38 +08:00   ❤️ 1
    牛逼
    VitaminC1989
        35
    VitaminC1989  
       2022-05-08 09:39:40 +08:00 via iPhone
    @SuneBear 好嘞老哥 我这就去研究下
    easymbol
        36
    easymbol  
       2022-05-09 10:07:49 +08:00   ❤️ 1
    厉害了 老哥
    lzcers
        37
    lzcers  
       2022-05-11 16:01:42 +08:00   ❤️ 1
    好可爱
    unii23i
        38
    unii23i  
       2022-05-11 17:17:08 +08:00   ❤️ 1
    挺可爱的
    hu1e
        39
    hu1e  
       2022-05-13 17:53:22 +08:00
    效果好棒~不过我的 mbp 风扇声也拉满了😂
    Mexion
        40
    Mexion  
       2022-05-16 10:44:15 +08:00
    效果可以
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   1007 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 38ms · UTC 22:03 · PVG 06:03 · LAX 15:03 · JFK 18:03
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.