V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
zhongchunfeng
V2EX  ›  JavaScript

有没有前端大佬,帮我看一下这个网站底部的粒子动画怎么做的。

  •  1
     
  •   zhongchunfeng · 13 小时 46 分钟前 · 3295 次点击

    https://lusion.co/projects/ 我想做一个差不多,threejs 有没有 demo

    63 条回复    2025-09-19 01:59:12 +08:00
    gaoryrt
        1
    gaoryrt  
       13 小时 22 分钟前   ❤️ 3
    zhongchunfeng
        2
    zhongchunfeng  
    OP
       13 小时 17 分钟前
    @gaoryrt 看起来好像,我研究研究,谢谢大佬
    realJamespond
        3
    realJamespond  
       13 小时 5 分钟前   ❤️ 1
    参考这个吧,原理都差不多,都是通过压力流速图画的,具体也没看懂
    https://paveldogreat.github.io/WebGL-Fluid-Simulation/
    asdjgfr
        4
    asdjgfr  
       12 小时 53 分钟前
    Xinu
        5
    Xinu  
       12 小时 53 分钟前
    翻了几个页面,效果太炫酷了。原本因为 ai 导致的对前端的轻视,荡然无存,道心破碎了
    Terry05
        6
    Terry05  
       12 小时 46 分钟前
    这个页面做得太过于酷炫了
    zhongchunfeng
        7
    zhongchunfeng  
    OP
       12 小时 41 分钟前
    看的我头都大了
    corcre
        8
    corcre  
       12 小时 39 分钟前
    好 tm 炫酷
    youyouzi
        9
    youyouzi  
       12 小时 37 分钟前
    电脑卡爆了。。。
    novaren
        10
    novaren  
       12 小时 32 分钟前
    这个是什么网站,好酷炫
    andyskaura
        11
    andyskaura  
       12 小时 31 分钟前
    这流体效果比较难搞
    andyskaura
        12
    andyskaura  
       12 小时 26 分钟前
    @andyskaura 找到一个 shadertoy 的流体效果,可以抄到 webgl shader 中去 https://www.shadertoy.com/view/tsKXR3
    zhongchunfeng
        13
    zhongchunfeng  
    OP
       12 小时 22 分钟前
    @andyskaura #12 主要是底部那个粒子 跟水一样,不是简单的碰撞,难搞
    huihushijie1996
        14
    huihushijie1996  
       12 小时 20 分钟前
    直接偷
    crocoBaby
        15
    crocoBaby  
       12 小时 1 分钟前
    有现成的分享一下吗?
    kokerkov
        17
    kokerkov  
       11 小时 57 分钟前
    Firefox 不能加载,chrome 打开卡卡的,你学他干嘛?
    qwqqwq
        18
    qwqqwq  
       11 小时 55 分钟前
    我丢,这网站动效这么吊吗
    aino
        19
    aino  
       11 小时 52 分钟前
    试了下 gemini 还原度 80%
    zhongchunfeng
        20
    zhongchunfeng  
    OP
       11 小时 47 分钟前
    @aino 真的假的,动效也还原了吗
    anivie
        21
    anivie  
       11 小时 46 分钟前
    @aino 求 prompt
    zhongchunfeng
        22
    zhongchunfeng  
    OP
       11 小时 45 分钟前
    @kokerkov 我这边 firefox 也是可以打开的,没什么区别 版本 107
    ZettarYuFan
        23
    ZettarYuFan  
       11 小时 43 分钟前
    @aino cursor 里面用吗
    supuwoerc
        25
    supuwoerc  
       11 小时 35 分钟前
    https://www.reactbits.dev/text-animations/split-text 我印象这里有,但是不想自己找了🐶
    kokerkov
        26
    kokerkov  
       11 小时 33 分钟前
    @zhongchunfeng #22 估计是有什么插件拦截了。我另一台电脑的 firefox 确实没问题
    zhongchunfeng
        27
    zhongchunfeng  
    OP
       11 小时 32 分钟前
    zhongchunfeng
        28
    zhongchunfeng  
    OP
       11 小时 31 分钟前
    @otakustay 是的,这个确实很不错,但是最重要的是底部那个粒子效果难弄。
    zhongchunfeng
        29
    zhongchunfeng  
    OP
       11 小时 25 分钟前
    Greendays
        30
    Greendays  
       10 小时 43 分钟前
    真酷炫啊,后端表示惊叹
    jnliyan1
        31
    jnliyan1  
       10 小时 40 分钟前
    真酷,第一次见,牛皮
    shuhsio
        32
    shuhsio  
       10 小时 37 分钟前
    惊叹
    Yaavi
        33
    Yaavi  
       10 小时 36 分钟前
    你挑了这个网站中最简单的效果
    wuxidixi
        34
    wuxidixi  
       10 小时 33 分钟前
    这网站真牛逼
    cwliang
        35
    cwliang  
       10 小时 33 分钟前
    打开了一会没关,突然电脑风扇呼呼响,用了一年多的 mbp 这是第一次,m3 芯片 16gb 内存🤣
    Ramoncjs
        36
    Ramoncjs  
       10 小时 30 分钟前
    确实酷炫 amazing
    Ramoncjs
        37
    Ramoncjs  
       10 小时 27 分钟前
    这个网站不同的页面有不同的配乐,音乐与网页动画结合的非常好,并且有非常强的反馈效果,做的真好啊
    JimLee0921
        38
    JimLee0921  
       10 小时 22 分钟前
    怎么把这个网站前台源码偷了兄弟们,给个开源地址
    dsb2468
        39
    dsb2468  
       10 小时 20 分钟前
    动起来后,GPU 上升,风扇启动了。。。。。。
    LongTimeNoSee
        40
    LongTimeNoSee  
       10 小时 19 分钟前
    我用的 chrome 最新版打开非常卡
    dsb2468
        41
    dsb2468  
       10 小时 13 分钟前
    右上角,about US 的页面,好好看!!!这是前端能做到的么
    L0L
        42
    L0L  
       10 小时 9 分钟前
    后端表示,酷炫的一批
    jackleeforce3615
        43
    jackleeforce3615  
       10 小时 2 分钟前
    apple 官网的首页是不是也用到类似的 酷炫吊炸天
    dsb2468
        44
    dsb2468  
       9 小时 59 分钟前
    @jackleeforce3615 苹果官网很多是视频
    qiaobeier
        45
    qiaobeier  
       9 小时 58 分钟前
    一眼 three-js
    journalistFromHK
        46
    journalistFromHK  
       9 小时 53 分钟前
    orz 屌炸天啊
    734694671
        47
    734694671  
       9 小时 35 分钟前
    别说后端了,前端都目瞪狗呆
    living9696
        48
    living9696  
       9 小时 16 分钟前
    真的牛逼
    Heeee
        49
    Heeee  
       9 小时 13 分钟前
    这也太炫了
    leibaio
        50
    leibaio  
       9 小时 9 分钟前
    有点炫的,厉害
    keithwhisper
        51
    keithwhisper  
       9 小时 2 分钟前
    @dsb2468 Chrome Experiments 里有超级多屌炸天的前端作品
    p1gd0g
        52
    p1gd0g  
       8 小时 51 分钟前
    看到开头的进度条我就知道不简单
    但是这也太花了,有点受不了
    rabbbit
        53
    rabbbit  
       7 小时 55 分钟前
    用的 Three.js

    代码
    https://lusion.co/_astro/hoisted.06a00660.js

    相关的几个类
    flipSim
    FlipAnimation

    贴图
    https://lusion.dev/assets/textures/flip_texture.png
    zhw2590582
        54
    zhw2590582  
       7 小时 6 分钟前
    特效炫酷是一回事,设计感也是一流,十年老前端都目瞪口呆
    NineTree
        55
    NineTree  
       6 小时 51 分钟前
    真是炫酷啊
    woodchen
        56
    woodchen  
       6 小时 37 分钟前
    太酷啦
    wellbeing
        57
    wellbeing  
       6 小时 36 分钟前
    M4 Pro 48G 内存,chrome 打开很丝滑
    DualVectorFoil
        58
    DualVectorFoil  
       6 小时 26 分钟前
    @dsb2468 是的,点击不放还会进入子弹时间,帅得。
    yigefanqie
        59
    yigefanqie  
       5 小时 19 分钟前 via iPhone
    前端表示自己太菜了
    zedking
        60
    zedking  
       5 小时 15 分钟前
    确实帅啊这网页
    jsq2627
        61
    jsq2627  
       5 小时 5 分钟前   ❤️ 1
    像这种网站,前端功力只占三成,七成还是靠顶流 UX 设计师。

    认识几个顶流设计师,各种 WebGL shader 信手拈来,各种 3D 引擎都会一点。就算看代码可能觉得水平一般,不懂软件工程,图形学半吊子,但写出来的东西真的是漂亮。
    DOLLOR
        62
    DOLLOR  
       4 小时 15 分钟前
    太强了,
    比现在那些泛滥的 AI 生成网页(高饱和紫色、大圆角、毛玻璃、霓虹灯特效)不知道高到哪里去了🐶
    ps3chinamj
        63
    ps3chinamj  
       1 小时 33 分钟前 via Android
    TEAM 007 还有一只猫
    关于   ·   帮助文档   ·   自助推广系统   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   952 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 34ms · UTC 19:32 · PVG 03:32 · LAX 12:32 · JFK 15:32
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.