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

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

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

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

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

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

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

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

    看起来是炫酷。

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

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

    差不多和这个类似,但是
    https://cocosmos.online/ 这个网站做得更强,可惜了,公益网站没撑住,你去搜一下还是能看到以前的一些截图什么的。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3610 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 04:31 · PVG 12:31 · LAX 20:31 · JFK 23:31
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.