Home Sign Up Sign In
fragilePride

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

  •  2      
  •   fragilePride · Nov 4, 2024 · 12231 views
    This topic created in 729 days ago, the information mentioned may be changed or developed.

    https://persepolis.getty.edu/?locale=zh_Hans

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

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

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

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

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

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

    看起来是炫酷。

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

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

    差不多和这个类似，但是
    https://cocosmos.online/ 这个网站做得更强，可惜了，公益网站没撑住，你去搜一下还是能看到以前的一些截图什么的。
    acrisliu
    acrisliu
    Nov 5, 2024
    91
    很不错
    iniMeow
    iniMeow
    Nov 5, 2024
    92
    @shui14 #55 插眼
    sunhz
    sunhz
    Nov 5, 2024
    93
    他们这个团队有点意思，还有这个网站也是： https://gehry.getty.edu/
    AlbertChen
    AlbertChen
    Nov 5, 2024
    94
    @shui14 #55 插眼 等关键词
    zhaiduo
    zhaiduo
    Nov 5, 2024
    95
    看来伊朗很值得去看看
    xueyuehua
    xueyuehua
    Nov 5, 2024
    96
    很好，就是很讨厌这种要疯狂转滚轮的
    hailun3202475
    hailun3202475
    Nov 6, 2024
    98
    马克，太太炫了，有点晕 3D 了
    scyuns
    scyuns
    Nov 7, 2024
    99
    这太优雅了 能不能做成 wsad 自有探索 鼠标滚轮有点吃不消
    abram
    abram
    Nov 18, 2024
    100
    这个就是视频和滚动条的交互 扯不上什么 3D
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Privacy   ·   Solana   ·   5476 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 246ms · UTC 03:02 · PVG 11:02 · LAX 19:02 · JFK 22:02
    ♥ Do have faith in what you're doing.