V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
fragilePride
V2EX  ›  前端开发

求助 这个网页咋实现的 有点帅

  •  2
     
  •   fragilePride · 56 天前 · 7924 次点击
    这是一个创建于 56 天前的主题,其中的信息可能已经有所发展或是发生改变。
    100 条回复    2024-11-18 13:39:26 +08:00
    BlessingMe
        1
    BlessingMe  
       56 天前
    优雅, 实在太优雅了
    marc2017
        2
    marc2017  
       56 天前   ❤️ 3
    给我整得晕 3D 了
    zcc520510
        3
    zcc520510  
       56 天前
    优雅
    ymz
        4
    ymz  
       56 天前
    感觉有点卡
    SleepyRaven
        5
    SleepyRaven  
       56 天前
    太牛了,不会是 three.js 一把梭吧
    AoEiuV020JP
        6
    AoEiuV020JP  
       56 天前
    有 3d 游戏引擎的味道,
    superrichman
        7
    superrichman  
       56 天前
    GSAP 动效库 https://gsap.com/
    evan9527
        8
    evan9527  
       56 天前
    不晕 3D 的今天晕了 3D 。
    xiangbohua
        9
    xiangbohua  
       56 天前
    卧槽,确实优雅,看起来很舒服
    inhzus
        10
    inhzus  
       56 天前
    我去... 有点过于恢弘了
    Peng0620
        11
    Peng0620  
       56 天前
    优雅
    WhateverYouLike
        12
    WhateverYouLike  
       56 天前
    嗅到商机,国内旅游景点有没有这种需求呀。尤其是那种古建筑园区的。但是想想而已。
    PTLin
        13
    PTLin  
       56 天前
    纯图片和视频搞得,请求里就能看到
    hantianyang
        14
    hantianyang  
       56 天前
    这是用什么做的
    fragilePride
        15
    fragilePride  
    OP
       56 天前
    @superrichman 这个只是外层的字幕和一些动画实现,里面的场景渲染不是的
    fragilePride
        16
    fragilePride  
    OP
       56 天前
    @PTLin 可以仔细看看 里面是有 canvas 的 而且可以和场景交互
    fragilePride
        17
    fragilePride  
    OP
       56 天前
    @WhateverYouLike 我司一直在做 但是不如人家做的一半好
    fragilePride
        18
    fragilePride  
    OP
       56 天前
    @ymz 这个场景有点大了 配置需求还是要一点的
    fragilePride
        19
    fragilePride  
    OP
       56 天前
    @SleepyRaven 看样子是自己写的渲染逻辑 没找到相关的库的痕迹 要么魔改过的
    Tiller
        20
    Tiller  
       56 天前
    确实帅,之前那个小米 su7 的网页,也很帅
    youyouzi
        21
    youyouzi  
       56 天前   ❤️ 4
    @fragilePride #17 然后你领导要求你跟竞品看齐,接着你也不知道咋做,来问问 v 友
    wandehul
        22
    wandehul  
       56 天前
    雅。
    youyouzi
        23
    youyouzi  
       56 天前
    既,苹果官网,宇宙网页,这是第三个让我叹为观止和自叹不如的网页
    Track13
        24
    Track13  
       56 天前
    gsap threejs 代码里有这些。
    PTLin
        25
    PTLin  
       56 天前
    @fragilePride 刚才没看到后面。看来下源码,3d 部分应该是 webgl 手搓的,shader 都直接贴里面了。
    dfkjgklfdjg
        26
    dfkjgklfdjg  
       56 天前
    [GSAP]( https://gsap.com/),官方案例里面有一个类似的项目 [FAVE]( https://fave.kr/contact/)
    模型应该是是自己做的。直接照搬也太"本地化"了。

    说实话是有点晕……不知道是不是因为卡顿的缘故。

    国内的话,用 GSAP 的人比较少,好像更多人会选择 [React Three Fiber]( https://r3f.docs.pmnd.rs/getting-started/examples)?
    Ranhao
        27
    Ranhao  
       56 天前
    优雅
    tmrQAQ
        28
    tmrQAQ  
       56 天前
    看晕了
    Melting
        29
    Melting  
       56 天前
    很优雅,看样子是用 canvas 的 webgl api 写的,主要代码都在 app.js ,看起来代码也不是很多,有懂 webgl 的应该能给他还原一下
    lawted
        30
    lawted  
       56 天前
    用 spline 可以做类似的,但是渲染不了这么大,这么好
    llz0919
        31
    llz0919  
       56 天前
    真炫酷
    Asakijz
        32
    Asakijz  
       56 天前
    @youyouzi #21 破案了是吧
    WhateverYouLike
        33
    WhateverYouLike  
       56 天前
    @fragilePride #17 主要瓶颈在哪里呢?技术,创意,3D 建模?
    MRG0
        34
    MRG0  
       56 天前
    忽快互慢的场景,有点头晕
    JamesFisher
        35
    JamesFisher  
       56 天前
    真乃艺术品也,不过看着晕晕的,风扇也狂吹
    oasismove
        36
    oasismove  
       56 天前
    这也太恢弘了吧
    yiikZero
        38
    yiikZero  
       56 天前
    locale 设置为英文可获得更好的效果,中文少了字体:

    https://persepolis.getty.edu/?locale=en_US
    dyncan
        39
    dyncan  
       56 天前
    雅, 实在是太雅了, 收藏了.
    dyncan
        40
    dyncan  
       56 天前
    @marc2017 雅过敏~
    killva4624
        41
    killva4624  
       56 天前
    有一种看游戏宣传 CG 的感觉...
    shadowyue
        42
    shadowyue  
       56 天前
    核心功能应该是靠 canvas 和 webgl ,还是挺牛逼的。
    lengmou
        43
    lengmou  
       56 天前
    雅,太优雅了
    ODESZA
        44
    ODESZA  
       56 天前
    太牛逼了 就是给我整晕 3D 了
    BeforeTooLate
        45
    BeforeTooLate  
       56 天前
    吐了
    fragilePride
        46
    fragilePride  
    OP
       56 天前
    @youyouzi 太对了哥
    fragilePride
        47
    fragilePride  
    OP
       56 天前
    @PTLin 是的 应该是抄不了了
    fragilePride
        48
    fragilePride  
    OP
       56 天前
    @dfkjgklfdjg 不太一样,GSAP 官网的例子里用得是 THREEJS 但是我给出来的这个网页好像是他们手搓的渲染代码,模型信息是自定义的 JSON 文件,体量小,浏览很流畅,渐进加载也做得很不错。
    fragilePride
        49
    fragilePride  
    OP
       56 天前
    @WhateverYouLike 模型加载速度(模型大小,我看了下请求的资源,只有一个 10M 的 JSON 文件,其余的是一些不大的贴图文件,普通的模型格式好像没办法做到这么小,主要也是这个),画面流畅程度和呈现效果。
    bojackhorseman
        50
    bojackhorseman  
       56 天前 via iPhone
    看了一下午,感受了一下波斯王城的宏伟,最后一句:哪个王朝能够永久,波斯波利斯终将倒塌。
    bojackhorseman
        51
    bojackhorseman  
       56 天前 via iPhone
    @bojackhorseman 如今只剩残垣断壁,艺术品也遗落在世界各地。
    1zh3n
        52
    1zh3n  
       56 天前
    优雅
    Rache1
        53
    Rache1  
       56 天前
    做这种网页的开发,是不是都没想过,居然有人的鼠标不是无极滚轮,鼠标给我划的嘎嘎响。。。
    zololiu
        54
    zololiu  
       56 天前
    这个真的很牛了!
    shui14
        55
    shui14  
       55 天前
    视频帧叠加粒子。这种设计已经是上个版本的了
    鼠标滑动很枯燥,没有互动感。得益于 webgl2 几个关键拓展和 view 裁剪,现在更加流行做物理效果,鼠标交互很有限
    去年有个很炸裂的项目,好像是个香港技术团队,可以搜一下领先几个版本
    dfkjgklfdjg
        56
    dfkjgklfdjg  
       55 天前
    @fragilePride #48

    [wappalyze_snipaste]( https://imgur.com/a/cY3F1Yv)

    想要学的话,国内 GSAP 会比较难,因为资源少。
    ThreeJS 相关的资源会更多,而且社区有各种轮子,比如说我之前提到的 React Three Fiber
    WhateverYouLike
        57
    WhateverYouLike  
       55 天前
    @shui14 请问你指的是什么呀,能列一下关键词吗
    sikuu2al
        58
    sikuu2al  
       55 天前
    @WhateverYouLike #12 我的第一反应也是这个 感觉商机大大的啊
    Johnathan
        59
    Johnathan  
       55 天前
    @shui14 哥们最后一句啥关键字都没有,怎么搜
    sikuu2al
        60
    sikuu2al  
       55 天前
    @shui14 插眼 等回复项目链接
    NeverBelieveMe
        61
    NeverBelieveMe  
       55 天前
    @shui14 等关键词
    ivane
        62
    ivane  
       55 天前
    我超喜欢啊!!!
    a1b2c3T
        63
    a1b2c3T  
       55 天前
    这。。国内的故宫啥的应该也做个这出来
    Jaosn
        64
    Jaosn  
       55 天前
    @youyouzi #23 宇宙网页是什么啊大佬,没搜索到
    INBreeze
        65
    INBreeze  
       55 天前
    Elegance 点赞
    chanChristin
        66
    chanChristin  
       55 天前
    确实牛逼
    leadfast
        67
    leadfast  
       55 天前
    真酷啊
    leadfast
        68
    leadfast  
       55 天前
    触摸板体验比鼠标好太多了
    valcosmos
        69
    valcosmos  
       55 天前
    优雅
    tangping
        70
    tangping  
       55 天前
    @youyouzi 宇宙网页是什么啊大佬,没搜索到
    elevioux
        71
    elevioux  
       55 天前   ❤️ 1
    为什么你们会觉得好呢?

    看起来是炫酷。

    但在 pc 上看,交互起来极其难受,鼠标滚动速率不稳定,反直觉。

    跟现在流行的产品介绍页一样,通过滚动来加载各种入场退场动画,理想很美好,结果还是速率不同,各种卡在中间,难看死了。
    mayerer
        72
    mayerer  
       55 天前
    仅仅知道技术上怎么实现的也无法直接复刻一个国内景点版本的,点到点的过渡设计真是令人惊叹,各种不起眼的位置也是细节满满。整体来讲,浑然天成!比 Apple 官网还漂亮
    cwcc
        73
    cwcc  
       55 天前
    这种页面在国内叫元宇宙。
    b2byco
        74
    b2byco  
       55 天前
    nexo
        75
    nexo  
       55 天前
    电脑上 操作体验很一般
    mayerer
        76
    mayerer  
       55 天前
    甚至做了手机适配,小屏幕也能完美运行,Cool
    nexo
        77
    nexo  
       55 天前
    技术不难 难的是有人给你建模
    corcre
        78
    corcre  
       55 天前
    @Rache1 我算是知道为啥我看这种网页这么难受了, 原来是硬件限制了我😹
    mayerer
        79
    mayerer  
       55 天前
    这要是用来重现圆明园,堪称中文互联网非物质文化遗产了
    inhzus
        80
    inhzus  
       55 天前
    @shui14 #55 插眼,等个关键词
    inhzus
        81
    inhzus  
       55 天前
    @elevioux #71 确实,鼠标的操作往往是卡卡的。用触摸板体验好很多
    Troevil
        82
    Troevil  
       55 天前
    @WhateverYouLike #12 国内有很多在做的 不过都不行 伪 3d 居多
    mayerer
        83
    mayerer  
       55 天前
    进一步测试以后,移动端的操作还是有 bug ,小屏幕的观赏性也不够震撼。感觉 PC 和移动端还是具有天然的鸿沟,对产品的开发决策,影响还是挺大的。
    shui14
        84
    shui14  
       55 天前   ❤️ 5
    之前发过一次,不一一回复了
    https://exp-infinite-passerella.lusion.co/
    https://www.awwwards.com/sites/gemini
    https://spaace.io/
    这种很多,随便拎一个出来,这些都是商业项目
    其实也抄不来,它主要是设计,不在于开发,好点的 TA 都屈指可数,需要既精于设计又具备不教条化的开发能力,这种人可遇不可求。做题家全是劣势,硬模仿会呈现一种很用力又露怯的窘迫,不适合 CURD 的码农。可能玩公式一套一套的,没人能考得过你,但是怎么去灵活组合来运用它,这需要天赋,需要突破性的理解。
    LavaC
        85
    LavaC  
       55 天前 via Android
    这种页面少是有原因的,多金不死板的甲方,有丰富交互式网页设计经验的设计师和能复现页面的开发缺一不可。这种组合国内也不是没有,之前做 su7 的那个团队就做过不少类似的作品,但总归是一个池子相当小的领域,要求高需求少。
    omi4399
        86
    omi4399  
       55 天前
    有没有人还记得 《虚拟紫禁城》 这个游戏的
    NerbraskaGuy
        87
    NerbraskaGuy  
       55 天前
    这个感觉更适合放在博物馆大屏上面,浏览器这么滑动操作有点难受
    billbob
        88
    billbob  
       55 天前
    canvas 3d 贴图渲染出来的,没啥技术,主要是场景图大部分是美工的活
    youyouzi
        89
    youyouzi  
       55 天前
    youyouzi
        90
    youyouzi  
       55 天前
    @Jaosn
    @tangping
    @b2byco

    差不多和这个类似,但是
    https://cocosmos.online/ 这个网站做得更强,可惜了,公益网站没撑住,你去搜一下还是能看到以前的一些截图什么的。
    acrisliu
        91
    acrisliu  
       55 天前
    很不错
    iniMeow
        92
    iniMeow  
       55 天前
    @shui14 #55 插眼
    sunhz
        93
    sunhz  
       55 天前
    他们这个团队有点意思,还有这个网站也是: https://gehry.getty.edu/
    AlbertChen
        94
    AlbertChen  
       55 天前
    @shui14 #55 插眼 等关键词
    zhaiduo
        95
    zhaiduo  
       55 天前
    看来伊朗很值得去看看
    xueyuehua
        96
    xueyuehua  
       55 天前
    很好,就是很讨厌这种要疯狂转滚轮的
    hailun3202475
        98
    hailun3202475  
       54 天前
    马克,太太炫了,有点晕 3D 了
    scyuns
        99
    scyuns  
       53 天前
    这太优雅了 能不能做成 wsad 自有探索 鼠标滚轮有点吃不消
    abram
        100
    abram  
       42 天前
    这个就是视频和滚动条的交互 扯不上什么 3D
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1629 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 16:38 · PVG 00:38 · LAX 08:38 · JFK 11:38
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.