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

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

  •  1
     
  •   duojiao · 136 天前 · 10451 次点击
    这是一个创建于 136 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

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

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

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

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