V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
duojiao
V2EX  ›  程序员

这种炫酷的前端是怎么实现的呢

  •  1
     
  •   duojiao · 2023-05-17 11:06:30 +08:00 · 11708 次点击
    这是一个创建于 538 天前的主题,其中的信息可能已经有所发展或是发生改变。

    quai 的官网,https://qu.ai/,(具体它是做什么的我们不讨论哈)

    这种从上拉到下,一镜到底的感觉太酷了。可是我只是个普通的后端 /数据,看不懂前端代码,前端是有什么成熟的组件或者框架能实现吗?或者是什么技术原理呀?求教~

    92 条回复    2023-05-18 18:56:33 +08:00
    fengfuliu
        1
    fengfuliu  
       2023-05-17 11:11:47 +08:00   ❤️ 5
    three.js 吧
    palxie
        2
    palxie  
       2023-05-17 11:19:54 +08:00
    不太懂. 但是感觉好花里胡哨 😂
    besscroft
        3
    besscroft  
       2023-05-17 11:23:44 +08:00
    three.js
    TArysiyehua
        4
    TArysiyehua  
       2023-05-17 11:23:49 +08:00
    canvas , tree.js
    TArysiyehua
        5
    TArysiyehua  
       2023-05-17 11:24:14 +08:00
    <canvas id="gl" class="fixed fill z-negative" data-engine="three.js r148" width="949" height="996" style="width: 1266px; height: 1328px; touch-action: none;"></canvas>
    justin2018
        6
    justin2018  
       2023-05-17 11:25:48 +08:00   ❤️ 5
    mzh
        7
    mzh  
       2023-05-17 11:26:01 +08:00
    确实好酷炫,看了下 network ,有很多.glb, .ktx2 格式的文件下载,应该是 OpenGL 加载的 3D 模型吧。
    insanny
        8
    insanny  
       2023-05-17 11:32:57 +08:00
    @justin2018 请问这是什么插件,看起来好好用
    1016
        9
    1016  
       2023-05-17 11:35:22 +08:00
    @insanny Wappalyzer
    yatoooon
        10
    yatoooon  
       2023-05-17 11:37:45 +08:00
    泰裤辣
    HeyWeGo
        11
    HeyWeGo  
       2023-05-17 11:38:50 +08:00
    虽然都是前端,但是方向和一般的那种组件区别挺大的
    insanny
        12
    insanny  
       2023-05-17 11:43:13 +08:00
    @1016 多谢!
    encro
        13
    encro  
       2023-05-17 11:46:13 +08:00   ❤️ 1
    15 年前的 flash 也是这效果。
    darkengine
        14
    darkengine  
       2023-05-17 11:52:13 +08:00
    打开这个同事以为我上班玩游戏。。。
    brader
        15
    brader  
       2023-05-17 11:59:26 +08:00   ❤️ 4
    好东西,拿回去问问我家前端同学能不能做
    Adicwu
        16
    Adicwu  
       2023-05-17 12:01:05 +08:00
    threejs 的哇 3d 的玩意儿
    Myprajna
        17
    Myprajna  
       2023-05-17 12:02:28 +08:00
    好看!
    C47CH
        18
    C47CH  
       2023-05-17 12:27:33 +08:00
    用 brave 打开根本动不了,不过关了护盾就好了
    gadore
        19
    gadore  
       2023-05-17 12:33:33 +08:00
    three.js 预设置好 3D 模型场景的镜头运作路线,然后监听滚轮,配合 dom 元素的关键帧动画配合。。。应该是这样
    AyaseEri
        20
    AyaseEri  
       2023-05-17 12:35:58 +08:00   ❤️ 2
    除了前端的基本知识、3D 的基本知识,还要有动画拆解的功底。能独立做这玩意的,JS + HTML + CSS 跟 AE 一样就是个工具。
    Track13
        21
    Track13  
       2023-05-17 12:50:34 +08:00 via Android
    这个太简单了。
    让前几天那个说前端就是 curd ,写写样式,太简单没意思的大佬来。
    (我不行)
    hakulamatata
        22
    hakulamatata  
       2023-05-17 13:14:21 +08:00
    svg 的特效了,公众号现在也有很多在用,算很高端的操作了
    flyhaozi
        23
    flyhaozi  
       2023-05-17 13:17:59 +08:00
    滚动动画的控制应该是用的 gsap 和 scrolltrigger
    w950888
        24
    w950888  
       2023-05-17 13:23:47 +08:00   ❤️ 1
    我:前端小姐姐,我想要这个👆😋.
    小姐姐:滚!
    DeWjjj
        25
    DeWjjj  
       2023-05-17 13:24:30 +08:00
    @Track13 问题是这种花里胡哨的东西,可能一生中也就碰一次。
    浪费服务器资源的一批。
    w950888
        26
    w950888  
       2023-05-17 13:27:57 +08:00
    @DeWjjj 本地渲染的,关服务器什么事🥲,本质上就是一个浏览器里运行的 3D 游戏
    coldmonkeybit
        27
    coldmonkeybit  
       2023-05-17 13:38:51 +08:00
    太猛了
    darknoll
        28
    darknoll  
       2023-05-17 13:39:31 +08:00
    花里胡哨的不实用,客户不会喜欢的
    bhbhxy
        29
    bhbhxy  
       2023-05-17 13:40:12 +08:00
    @Track13 那种人网上太多了,技术视野窄,接触的东西也就是一个井口,然后大言不惭地说不就是调个 API 嘛😂,以前的老板也是这样,说写代码不就是从网上复制粘贴一段就行了
    bhbhxy
        30
    bhbhxy  
       2023-05-17 13:45:38 +08:00   ❤️ 4
    @darknoll 这是程序员 /艺术家的追求和浪漫,这种需求现在数字孪生,可视化非常多,都是几十万到几百万不等的单子,精通图形学的前端也是很吃香的,市场上奇缺这种前端。
    Huelse
        31
    Huelse  
       2023-05-17 13:50:11 +08:00   ❤️ 11
    给你看个超炫的 https://deck-24abcd.netlify.app/
    lixiaobai913
        32
    lixiaobai913  
       2023-05-17 13:50:19 +08:00
    好家伙,打开电脑都卡死了,日常办公电脑太拉了
    likeme
        33
    likeme  
       2023-05-17 14:01:35 +08:00
    眼睛都花了。。
    yulgang
        34
    yulgang  
       2023-05-17 14:02:01 +08:00
    是挺酷炫
    duojiao
        35
    duojiao  
    OP
       2023-05-17 14:02:46 +08:00
    @Huelse macbookpro 都卡死了,不过卡片里面的镭射纹的真的好看
    duojiao
        36
    duojiao  
    OP
       2023-05-17 14:03:30 +08:00
    @encro 时代的眼泪
    duojiao
        37
    duojiao  
    OP
       2023-05-17 14:04:14 +08:00
    @AyaseEri 专业了,都要画面分镜了
    KevinDo2
        38
    KevinDo2  
       2023-05-17 14:18:25 +08:00
    @Huelse 给我 M2 干到 70 度了我去。。
    MRG0
        39
    MRG0  
       2023-05-17 14:24:10 +08:00
    我更好奇苹果官网那样的是如何实现的
    2Soon
        40
    2Soon  
       2023-05-17 14:24:23 +08:00
    栓 q ,电脑炸了 23333
    MRG0
        41
    MRG0  
       2023-05-17 14:24:44 +08:00
    lambdaq
        42
    lambdaq  
       2023-05-17 14:30:06 +08:00
    zthxxx
        43
    zthxxx  
       2023-05-17 14:32:28 +08:00
    泰裤辣
    can2421
        44
    can2421  
       2023-05-17 15:11:18 +08:00   ❤️ 1
    jamosLi
        45
    jamosLi  
       2023-05-17 15:16:40 +08:00
    以前觉得 soul 的星空交互很秀,现在看来这些交互才是绝绝子啊。
    LXGMAX
        46
    LXGMAX  
       2023-05-17 15:31:29 +08:00
    用这个整三体游戏网页介绍不错
    wander555
        47
    wander555  
       2023-05-17 16:41:46 +08:00
    @Huelse 我超,这点击后光影效果有点酷炫
    DICK23
        48
    DICK23  
       2023-05-17 16:42:17 +08:00
    确实帅啊
    DeWjjj
        49
    DeWjjj  
       2023-05-17 16:56:41 +08:00
    @w950888 是本地渲染的,问题是这些图和建模很大的。
    你自己看一下,这个网站用了多少资源吧。
    c3de3f21
        50
    c3de3f21  
       2023-05-17 16:56:43 +08:00
    域名牛比
    Jame00001
        51
    Jame00001  
       2023-05-17 17:12:16 +08:00
    3d 库搭建场景,预设相机轨道,上滚前进下滚后退。镜头不能自由移动是最明显的
    can2421
        52
    can2421  
       2023-05-17 17:19:24 +08:00
    Jame00001
        53
    Jame00001  
       2023-05-17 17:27:19 +08:00
    @DeWjjj 除了模型存在服务器,其他的都是纯前端完成。而且性能优化也不错。前端功底很好
    Jame00001
        54
    Jame00001  
       2023-05-17 17:29:56 +08:00
    @hakulamatata 相对只会后台管理的菜鸟算是高端了,但实际上只能看出来前端功底不错,技术算不上高端
    n18255447846
        55
    n18255447846  
       2023-05-17 17:58:52 +08:00
    确实不错,一眼 webgl
    n18255447846
        56
    n18255447846  
       2023-05-17 18:04:25 +08:00
    其它大部分都是些简单的 event+css 动画
    xiaoxiyiha
        57
    xiaoxiyiha  
       2023-05-17 18:11:25 +08:00
    x77
        58
    x77  
       2023-05-17 18:14:57 +08:00
    底层原理是调用 WebGL 实现 3D 效果,3D 网页我十多年前就见过,一开始看着很新奇,久了就感觉又慢又没什么用
    beginor
        59
    beginor  
       2023-05-17 18:39:56 +08:00 via Android
    确实很帅, 目测应该是 webgl + css3d
    retanoj
        60
    retanoj  
       2023-05-17 19:37:50 +08:00
    我也想学,蹲个教程
    hronro
        61
    hronro  
       2023-05-17 20:05:52 +08:00
    这个看起来很酷炫,用的技术也听上去也挺高大上的,但其实体验并不好,在低配电脑上卡的起飞了,我笔记本直呼烫手.

    要让我来实现,我可能会用比这个"LOW"很多的技术来实现:关键帧.他这个镜头是写死的只会随着滚动变化而变化,我只要监听滚动像播放视频一样不停地变换背景图片就可以了,在主流配置上绝对比他这个流畅许多.
    x86
        62
    x86  
       2023-05-17 20:15:15 +08:00
    真丝滑
    luemail2023
        63
    luemail2023  
       2023-05-17 20:18:48 +08:00
    真的是 太酷啦
    NoString
        64
    NoString  
       2023-05-17 20:19:09 +08:00
    雀食帅
    SekiBetu
        65
    SekiBetu  
       2023-05-17 20:32:46 +08:00
    这是前端?不是在线渲染的 3D 模型吗
    Aloento
        66
    Aloento  
       2023-05-17 20:43:44 +08:00
    @Track13 #21 有链接么
    zxCoder
        67
    zxCoder  
       2023-05-17 20:52:01 +08:00
    我电脑 cpu 可能不行,卡的要死
    dcsuibian
        68
    dcsuibian  
       2023-05-17 21:02:39 +08:00 via Android
    three.js 吧,这个对前端功力有考验,但更多是设计功力吧
    ruoxie
        69
    ruoxie  
       2023-05-17 21:06:00 +08:00
    three.js > webgl > 着色器编程
    能写出这样效果的人可能并不是一个网页前端,也许是游戏前端
    x43125
        70
    x43125  
       2023-05-17 21:07:39 +08:00
    @Huelse 卧槽,好几把炫
    Track13
        71
    Track13  
       2023-05-17 21:13:43 +08:00 via Android
    kernelpanic
        72
    kernelpanic  
       2023-05-17 21:17:07 +08:00
    13900k+4090+64G 内存 卡成 ppt
    TomPig0216
        73
    TomPig0216  
       2023-05-17 22:45:34 +08:00
    @Huelse #31 这个真的泰酷辣 真的超酷
    wongminli
        74
    wongminli  
       2023-05-18 01:52:26 +08:00
    有个看 A 股的大盘云图也挺炫酷的,名字就叫大盘云图
    网址: https://dapanyuntu.com?ref=940640
    jswh
        75
    jswh  
       2023-05-18 08:26:06 +08:00
    zhangjh024
        76
    zhangjh024  
       2023-05-18 08:44:00 +08:00
    https://www.midjourney.com/
    midjourney 也不错
    OAw7tR7N38cBxiic
        77
    OAw7tR7N38cBxiic  
       2023-05-18 08:52:47 +08:00
    @brader 前端:我真的栓 Q
    wangxiang
        78
    wangxiang  
       2023-05-18 09:38:50 +08:00
    我觉得苹果官网产品页面也比较炫
    andyskaura
        79
    andyskaura  
       2023-05-18 09:48:07 +08:00
    补充一下,鼠标 hover 上还用了 后处理 shader
    zj1sq
        80
    zj1sq  
       2023-05-18 10:02:04 +08:00
    @Huelse #31 这个能正常打开,qu.ai 那个首页非常卡顿,加载完了都没法点击,CPU 风扇狂转,不过它的其它页面倒是能正常打开
    thinkershare
        81
    thinkershare  
       2023-05-18 10:07:40 +08:00
    底层原理是 WebGL 或者 WebGPU, 后端框架一般是 Three.js 或者干脆是使用 Unity3D 这种游戏引擎输出到 HTML5 的。这个玩意其实和前端没啥关系,核心是美术和图形学,更像游戏,我们天天搞三维可视化,它这个运镜水平还可与,其它的并不怎么样,只要你愿意花钱,国内现在大把做这个玩意的,最开始一个项目上百万,现在 20W 也有人愿意做了,卷的非常厉害。浏览器在大型模型上还是会遇到很多问题,优化性能是个天坑,因为浏览器的渲染环境实在太多了。WebGL 会遇到各种奇奇怪怪的问题。如果是做内部演示软件没啥大问题,如果是面相公众的,优化可用性简直是天坑。
    pinkbook
        82
    pinkbook  
       2023-05-18 10:43:23 +08:00
    很酷,但是打开后电脑风扇呼呼转,这样的话,非不可替代网站,则尽量不打开
    zhang2e
        83
    zhang2e  
       2023-05-18 10:44:13 +08:00
    @jamosLi Soul 的那个星球,在 Android 上性能太拉跨了,每一个元素都是一个 View ,我是没想到的。
    alphardex
        84
    alphardex  
       2023-05-18 10:47:55 +08:00
    我的目标也是做出这样的网站,不久在掘金上会出一本关于 Shader 的教程,顺便把它做出来(大雾)
    ohwind
        85
    ohwind  
       2023-05-18 11:05:26 +08:00
    @darknoll 经典杠精逻辑
    masterclock
        86
    masterclock  
       2023-05-18 11:14:58 +08:00
    为什么用 babylon.js 的这么少?
    使用上感觉比 three.js 方便,工具链齐全
    standchan
        87
    standchan  
       2023-05-18 11:25:00 +08:00
    @KevinDo2 m1p ,毫无压力,看这个网站风扇不带动的
    darknoll
        88
    darknoll  
       2023-05-18 11:32:41 +08:00
    @ohwind 呵呵,遇到不爱听的,别人就是杠精?已 block
    dragondove
        89
    dragondove  
       2023-05-18 11:44:14 +08:00
    @lixiaobai913 这东西吃显卡,我一打开,集显直接占满了。好处是效果好帧率高(不像以前 flash 时代各种掉帧),就是太吃资源了。我觉得这点特效吃那么多资源算是优化比较差的。(毕竟现在也有好多网页上的显卡渲染游戏(一般是 unity 之类的)),很多也没吃那么多资源。
    WashFreshFresh
        90
    WashFreshFresh  
       2023-05-18 17:05:35 +08:00
    这种有没有类似自动生成的,想 520 搞一波
    wangxiaoaer
        91
    wangxiaoaer  
       2023-05-18 18:22:44 +08:00
    1 这个页面很酷炫,前端水平挺高。

    2 大部分应用的前端就是 CRUD ,调用 API ,后端虽然也号称 CRUD ,但的确比前端复杂度多。

    3 现在前端有些过了,比如明明 CMS 类似的系统,非要整个全家桶,完了再搞个 SSR ,脱裤子放屁。
    iyyy
        92
    iyyy  
       2023-05-18 18:56:33 +08:00
    @wangxiaoaer 跑题了,不让你来 diss 的
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3578 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 04:35 · PVG 12:35 · LAX 20:35 · JFK 23:35
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.