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

[fragilePride]

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

[BlessingMe]

优雅, 实在太优雅了

[marc2017]

给我整得晕 3D 了

[zcc520510]

优雅

[ymz]

感觉有点卡

[SleepyRaven]

太牛了，不会是 three.js 一把梭吧

[AoEiuV020JP]

有 3d 游戏引擎的味道，

[superrichman]

GSAP 动效库 https://gsap.com/

[evan9527]

不晕 3D 的今天晕了 3D 。

[xiangbohua]

卧槽，确实优雅，看起来很舒服

[inhzus]

我去... 有点过于恢弘了

[Peng0620]

优雅

[WhateverYouLike]

嗅到商机，国内旅游景点有没有这种需求呀。尤其是那种古建筑园区的。但是想想而已。

[PTLin]

纯图片和视频搞得，请求里就能看到

[hantianyang]

这是用什么做的

[fragilePride]

@superrichman 这个只是外层的字幕和一些动画实现，里面的场景渲染不是的

[fragilePride]

@PTLin 可以仔细看看 里面是有 canvas 的 而且可以和场景交互

[fragilePride]

@WhateverYouLike 我司一直在做 但是不如人家做的一半好

[fragilePride]

@ymz 这个场景有点大了 配置需求还是要一点的

[fragilePride]

@SleepyRaven 看样子是自己写的渲染逻辑 没找到相关的库的痕迹 要么魔改过的

[Tiller]

确实帅，之前那个小米 su7 的网页，也很帅

[youyouzi]

@fragilePride #17 然后你领导要求你跟竞品看齐，接着你也不知道咋做，来问问 v 友

[wandehul]

雅。

[youyouzi]

既，苹果官网，宇宙网页，这是第三个让我叹为观止和自叹不如的网页

[Track13]

gsap threejs 代码里有这些。

[PTLin]

@fragilePride 刚才没看到后面。看来下源码，3d 部分应该是 webgl 手搓的，shader 都直接贴里面了。

[dfkjgklfdjg]

[GSAP]( https://gsap.com/)，官方案例里面有一个类似的项目 [FAVE]( https://fave.kr/contact/)
模型应该是是自己做的。直接照搬也太"本地化"了。

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

国内的话，用 GSAP 的人比较少，好像更多人会选择 [React Three Fiber]( https://r3f.docs.pmnd.rs/getting-started/examples)？

[Ranhao]

优雅

[tmrQAQ]

看晕了

[Melting]

很优雅,看样子是用 canvas 的 webgl api 写的，主要代码都在 app.js ,看起来代码也不是很多，有懂 webgl 的应该能给他还原一下

[lawted]

用 spline 可以做类似的，但是渲染不了这么大，这么好

[llz0919]

真炫酷

[Asakijz]

@youyouzi #21 破案了是吧

[WhateverYouLike]

@fragilePride #17 主要瓶颈在哪里呢？技术，创意，3D 建模？

[MRG0]

忽快互慢的场景，有点头晕

[JamesFisher]

真乃艺术品也，不过看着晕晕的，风扇也狂吹

[oasismove]

这也太恢弘了吧

[sleepm]

https://www.awwwards.com/case-study-getty-persepolis-reimagined.html
Vue.js, GSAP

[yiikZero]

locale 设置为英文可获得更好的效果，中文少了字体：

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

[dyncan]

雅, 实在是太雅了, 收藏了.

[dyncan]

@marc2017 雅过敏~

[killva4624]

有一种看游戏宣传 CG 的感觉...

[shadowyue]

核心功能应该是靠 canvas 和 webgl ，还是挺牛逼的。

[lengmou]

雅，太优雅了

[ODESZA]

太牛逼了 就是给我整晕 3D 了

[BeforeTooLate]

吐了

[fragilePride]

@youyouzi 太对了哥

[fragilePride]

@PTLin 是的 应该是抄不了了

[fragilePride]

@dfkjgklfdjg 不太一样，GSAP 官网的例子里用得是 THREEJS 但是我给出来的这个网页好像是他们手搓的渲染代码，模型信息是自定义的 JSON 文件，体量小，浏览很流畅，渐进加载也做得很不错。

[fragilePride]

@WhateverYouLike 模型加载速度（模型大小，我看了下请求的资源，只有一个 10M 的 JSON 文件，其余的是一些不大的贴图文件，普通的模型格式好像没办法做到这么小，主要也是这个），画面流畅程度和呈现效果。

[bojackhorseman]

看了一下午，感受了一下波斯王城的宏伟，最后一句：哪个王朝能够永久，波斯波利斯终将倒塌。

[bojackhorseman]

@bojackhorseman 如今只剩残垣断壁，艺术品也遗落在世界各地。

[1zh3n]

优雅

[Rache1]

做这种网页的开发，是不是都没想过，居然有人的鼠标不是无极滚轮，鼠标给我划的嘎嘎响。。。

[zololiu]

这个真的很牛了！

[shui14]

视频帧叠加粒子。这种设计已经是上个版本的了
鼠标滑动很枯燥，没有互动感。得益于 webgl2 几个关键拓展和 view 裁剪，现在更加流行做物理效果，鼠标交互很有限
去年有个很炸裂的项目，好像是个香港技术团队，可以搜一下领先几个版本

[dfkjgklfdjg]

@fragilePride #48

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

想要学的话，国内 GSAP 会比较难，因为资源少。
ThreeJS 相关的资源会更多，而且社区有各种轮子，比如说我之前提到的 React Three Fiber

[WhateverYouLike]

@shui14 请问你指的是什么呀，能列一下关键词吗

[sikuu2al]

@WhateverYouLike #12 我的第一反应也是这个 感觉商机大大的啊

[Johnathan]

@shui14 哥们最后一句啥关键字都没有，怎么搜

[sikuu2al]

@shui14 插眼 等回复项目链接

[NeverBelieveMe]

@shui14 等关键词

[ivane]

我超喜欢啊！！！

[a1b2c3T]

这。。国内的故宫啥的应该也做个这出来

[Jaosn]

@youyouzi #23 宇宙网页是什么啊大佬，没搜索到

[INBreeze]

Elegance 点赞

[chanChristin]

确实牛逼

[leadfast]

真酷啊

[leadfast]

触摸板体验比鼠标好太多了

[valcosmos]

优雅

[tangping]

@youyouzi 宇宙网页是什么啊大佬，没搜索到

[elevioux]

为什么你们会觉得好呢？

看起来是炫酷。

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

跟现在流行的产品介绍页一样，通过滚动来加载各种入场退场动画，理想很美好，结果还是速率不同，各种卡在中间，难看死了。

[mayerer]

仅仅知道技术上怎么实现的也无法直接复刻一个国内景点版本的，点到点的过渡设计真是令人惊叹，各种不起眼的位置也是细节满满。整体来讲，浑然天成！比 Apple 官网还漂亮

[cwcc]

这种页面在国内叫元宇宙。

[b2byco]

@tangping #70 https://stars.chromeexperiments.com/ 这个？

[nexo]

电脑上 操作体验很一般

[mayerer]

甚至做了手机适配，小屏幕也能完美运行，Cool

[nexo]

技术不难 难的是有人给你建模

[corcre]

@Rache1 我算是知道为啥我看这种网页这么难受了, 原来是硬件限制了我😹

[mayerer]

这要是用来重现圆明园，堪称中文互联网非物质文化遗产了

[inhzus]

@shui14 #55 插眼，等个关键词

[inhzus]

@elevioux #71 确实，鼠标的操作往往是卡卡的。用触摸板体验好很多

[Troevil]

@WhateverYouLike #12 国内有很多在做的 不过都不行 伪 3d 居多

[mayerer]

进一步测试以后，移动端的操作还是有 bug ，小屏幕的观赏性也不够震撼。感觉 PC 和移动端还是具有天然的鸿沟，对产品的开发决策，影响还是挺大的。

[shui14]

之前发过一次，不一一回复了
https://exp-infinite-passerella.lusion.co/
https://www.awwwards.com/sites/gemini
https://spaace.io/
这种很多，随便拎一个出来，这些都是商业项目
其实也抄不来，它主要是设计，不在于开发，好点的 TA 都屈指可数，需要既精于设计又具备不教条化的开发能力，这种人可遇不可求。做题家全是劣势，硬模仿会呈现一种很用力又露怯的窘迫，不适合 CURD 的码农。可能玩公式一套一套的，没人能考得过你，但是怎么去灵活组合来运用它，这需要天赋，需要突破性的理解。

[LavaC]

这种页面少是有原因的，多金不死板的甲方，有丰富交互式网页设计经验的设计师和能复现页面的开发缺一不可。这种组合国内也不是没有，之前做 su7 的那个团队就做过不少类似的作品，但总归是一个池子相当小的领域，要求高需求少。

[omi4399]

有没有人还记得 《虚拟紫禁城》 这个游戏的

[NerbraskaGuy]

这个感觉更适合放在博物馆大屏上面，浏览器这么滑动操作有点难受

[billbob]

canvas 3d 贴图渲染出来的,没啥技术,主要是场景图大部分是美工的活

[youyouzi]

@Jaosn
@tangping
@b2byco

[youyouzi]

@Jaosn
@tangping
@b2byco

差不多和这个类似，但是
https://cocosmos.online/ 这个网站做得更强，可惜了，公益网站没撑住，你去搜一下还是能看到以前的一些截图什么的。

[acrisliu]

很不错

[iniMeow]

@shui14 #55 插眼

[sunhz]

他们这个团队有点意思，还有这个网站也是： https://gehry.getty.edu/

[AlbertChen]

@shui14 #55 插眼 等关键词

[zhaiduo]

看来伊朗很值得去看看

[xueyuehua]

很好，就是很讨厌这种要疯狂转滚轮的

[tianzi123]

https://exp-gemini.lusion.co/motion
https://exp-gemini.lusion.co/style
看看这些

[hailun3202475]

马克，太太炫了，有点晕 3D 了

[scyuns]

这太优雅了 能不能做成 wsad 自有探索 鼠标滚轮有点吃不消

[abram]

这个就是视频和滚动条的交互 扯不上什么 3D