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 · 8 小时 33 分钟前 · 2984 次点击

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

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

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

    相关的几个类
    flipSim
    FlipAnimation

    贴图
    https://lusion.dev/assets/textures/flip_texture.png
    zhw2590582
        54
    zhw2590582  
       1 小时 52 分钟前
    特效炫酷是一回事,设计感也是一流,十年老前端都目瞪口呆
    NineTree
        55
    NineTree  
       1 小时 37 分钟前
    真是炫酷啊
    woodchen
        56
    woodchen  
       1 小时 24 分钟前
    太酷啦
    wellbeing
        57
    wellbeing  
       1 小时 22 分钟前
    M4 Pro 48G 内存,chrome 打开很丝滑
    DualVectorFoil
        58
    DualVectorFoil  
       1 小时 13 分钟前
    @dsb2468 是的,点击不放还会进入子弹时间,帅得。
    yigefanqie
        59
    yigefanqie  
       5 分钟前 via iPhone
    前端表示自己太菜了
    zedking
        60
    zedking  
       1 分钟前
    确实帅啊这网页
    关于   ·   帮助文档   ·   自助推广系统   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2836 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 14:19 · PVG 22:19 · LAX 07:19 · JFK 10:19
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.