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

[duojiao]

quai 的官网，https://qu.ai/，（具体它是做什么的我们不讨论哈）

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

[fengfuliu]

three.js 吧

[palxie]

不太懂. 但是感觉好花里胡哨 😂

[besscroft]

three.js

[TArysiyehua]

canvas , tree.js

[TArysiyehua]

<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]

[mzh]

确实好酷炫，看了下 network ，有很多.glb, .ktx2 格式的文件下载，应该是 OpenGL 加载的 3D 模型吧。

[insanny]

@justin2018 请问这是什么插件，看起来好好用

[1016]

@insanny Wappalyzer

[yatoooon]

泰裤辣

[HeyWeGo]

虽然都是前端，但是方向和一般的那种组件区别挺大的

[insanny]

@1016 多谢!

[encro]

15 年前的 flash 也是这效果。

[darkengine]

打开这个同事以为我上班玩游戏。。。

[brader]

好东西，拿回去问问我家前端同学能不能做

[Adicwu]

threejs 的哇 3d 的玩意儿

[Myprajna]

好看！

[C47CH]

用 brave 打开根本动不了，不过关了护盾就好了

[gadore]

three.js 预设置好 3D 模型场景的镜头运作路线，然后监听滚轮，配合 dom 元素的关键帧动画配合。。。应该是这样

[AyaseEri]

除了前端的基本知识、3D 的基本知识，还要有动画拆解的功底。能独立做这玩意的，JS + HTML + CSS 跟 AE 一样就是个工具。

[Track13]

这个太简单了。
让前几天那个说前端就是 curd ，写写样式，太简单没意思的大佬来。
（我不行）

[hakulamatata]

svg 的特效了，公众号现在也有很多在用，算很高端的操作了

[flyhaozi]

滚动动画的控制应该是用的 gsap 和 scrolltrigger

[w950888]

我:前端小姐姐,我想要这个👆😋.
小姐姐:滚!

[DeWjjj]

@Track13 问题是这种花里胡哨的东西，可能一生中也就碰一次。
浪费服务器资源的一批。

[w950888]

@DeWjjj 本地渲染的,关服务器什么事🥲,本质上就是一个浏览器里运行的 3D 游戏

[coldmonkeybit]

太猛了

[darknoll]

花里胡哨的不实用，客户不会喜欢的

[bhbhxy]

@Track13 那种人网上太多了，技术视野窄，接触的东西也就是一个井口，然后大言不惭地说不就是调个 API 嘛😂，以前的老板也是这样，说写代码不就是从网上复制粘贴一段就行了

[bhbhxy]

@darknoll 这是程序员 /艺术家的追求和浪漫，这种需求现在数字孪生，可视化非常多，都是几十万到几百万不等的单子，精通图形学的前端也是很吃香的，市场上奇缺这种前端。

[Huelse]

给你看个超炫的 https://deck-24abcd.netlify.app/

[lixiaobai913]

好家伙，打开电脑都卡死了，日常办公电脑太拉了

[likeme]

眼睛都花了。。

[yulgang]

是挺酷炫

[duojiao]

@Huelse macbookpro 都卡死了，不过卡片里面的镭射纹的真的好看

[duojiao]

@encro 时代的眼泪

[duojiao]

@AyaseEri 专业了，都要画面分镜了

[KevinDo2]

@Huelse 给我 M2 干到 70 度了我去。。

[MRG0]

我更好奇苹果官网那样的是如何实现的

[2Soon]

栓 q ，电脑炸了 23333

[MRG0]

@MRG0 还有 oppo 这个 https://connect.oppo.com/zh-CN

[lambdaq]

破防！ 7 年前端做不出钉钉官网动效
https://www.bilibili.com/video/BV1BL411a71e/

https://www.bilibili.com/video/BV12o4y1w7DM/

[zthxxx]

泰裤辣

[can2421]

@Huelse https://github.com/nolimits4web/atropos/, 好像是这个效果

[jamosLi]

以前觉得 soul 的星空交互很秀，现在看来这些交互才是绝绝子啊。

[LXGMAX]

用这个整三体游戏网页介绍不错

[wander555]

@Huelse 我超，这点击后光影效果有点酷炫

[DICK23]

确实帅啊

[DeWjjj]

@w950888 是本地渲染的，问题是这些图和建模很大的。
你自己看一下，这个网站用了多少资源吧。

[c3de3f21]

域名牛比

[Jame00001]

3d 库搭建场景，预设相机轨道，上滚前进下滚后退。镜头不能自由移动是最明显的

[can2421]

@wander555 https://github.com/wagerfield/flat-surface-shader

[Jame00001]

@DeWjjj 除了模型存在服务器，其他的都是纯前端完成。而且性能优化也不错。前端功底很好

[Jame00001]

@hakulamatata 相对只会后台管理的菜鸟算是高端了，但实际上只能看出来前端功底不错，技术算不上高端

[n18255447846]

确实不错，一眼 webgl

[n18255447846]

其它大部分都是些简单的 event+css 动画

[xiaoxiyiha]

https://github.com/studio-freight/lenis 用的这个库

[x77]

底层原理是调用 WebGL 实现 3D 效果，3D 网页我十多年前就见过，一开始看着很新奇，久了就感觉又慢又没什么用

[beginor]

确实很帅， 目测应该是 webgl + css3d

[retanoj]

我也想学，蹲个教程

[hronro]

这个看起来很酷炫,用的技术也听上去也挺高大上的,但其实体验并不好,在低配电脑上卡的起飞了,我笔记本直呼烫手.

要让我来实现,我可能会用比这个"LOW"很多的技术来实现:关键帧.他这个镜头是写死的只会随着滚动变化而变化,我只要监听滚动像播放视频一样不停地变换背景图片就可以了,在主流配置上绝对比他这个流畅许多.

[x86]

真丝滑

[luemail2023]

真的是 太酷啦

[NoString]

雀食帅

[SekiBetu]

这是前端？不是在线渲染的 3D 模型吗

[Aloento]

@Track13 #21 有链接么

[zxCoder]

我电脑 cpu 可能不行，卡的要死

[dcsuibian]

three.js 吧，这个对前端功力有考验，但更多是设计功力吧

[ruoxie]

three.js > webgl > 着色器编程
能写出这样效果的人可能并不是一个网页前端，也许是游戏前端

[x43125]

@Huelse 卧槽，好几把炫

[Track13]

@Aloento https://v2ex.com/t/940236

[kernelpanic]

13900k+4090+64G 内存 卡成 ppt

[TomPig0216]

@Huelse #31 这个真的泰酷辣 真的超酷

[wongminli]

有个看 A 股的大盘云图也挺炫酷的，名字就叫大盘云图
网址： https://dapanyuntu.com?ref=940640

[jswh]

https://google.github.io/draco/

[zhangjh024]

https://www.midjourney.com/
midjourney 也不错

[OAw7tR7N38cBxiic]

@brader 前端：我真的栓 Q

[wangxiang]

我觉得苹果官网产品页面也比较炫

[andyskaura]

补充一下，鼠标 hover 上还用了 后处理 shader

[zj1sq]

@Huelse #31 这个能正常打开，qu.ai 那个首页非常卡顿，加载完了都没法点击，CPU 风扇狂转，不过它的其它页面倒是能正常打开

[thinkershare]

底层原理是 WebGL 或者 WebGPU, 后端框架一般是 Three.js 或者干脆是使用 Unity3D 这种游戏引擎输出到 HTML5 的。这个玩意其实和前端没啥关系，核心是美术和图形学，更像游戏，我们天天搞三维可视化，它这个运镜水平还可与，其它的并不怎么样，只要你愿意花钱，国内现在大把做这个玩意的，最开始一个项目上百万，现在 20W 也有人愿意做了，卷的非常厉害。浏览器在大型模型上还是会遇到很多问题，优化性能是个天坑，因为浏览器的渲染环境实在太多了。WebGL 会遇到各种奇奇怪怪的问题。如果是做内部演示软件没啥大问题，如果是面相公众的，优化可用性简直是天坑。

[pinkbook]

很酷，但是打开后电脑风扇呼呼转，这样的话，非不可替代网站，则尽量不打开

[zhang2e]

@jamosLi Soul 的那个星球，在 Android 上性能太拉跨了，每一个元素都是一个 View ，我是没想到的。

[alphardex]

我的目标也是做出这样的网站，不久在掘金上会出一本关于 Shader 的教程，顺便把它做出来（大雾）

[ohwind]

@darknoll 经典杠精逻辑

[masterclock]

为什么用 babylon.js 的这么少？
使用上感觉比 three.js 方便，工具链齐全

[standchan]

@KevinDo2 m1p ，毫无压力，看这个网站风扇不带动的

[darknoll]

@ohwind 呵呵，遇到不爱听的，别人就是杠精？已 block

[dragondove]

@lixiaobai913 这东西吃显卡，我一打开，集显直接占满了。好处是效果好帧率高（不像以前 flash 时代各种掉帧），就是太吃资源了。我觉得这点特效吃那么多资源算是优化比较差的。（毕竟现在也有好多网页上的显卡渲染游戏（一般是 unity 之类的）），很多也没吃那么多资源。

[WashFreshFresh]

这种有没有类似自动生成的，想 520 搞一波

[wangxiaoaer]

1 这个页面很酷炫，前端水平挺高。

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

3 现在前端有些过了，比如明明 CMS 类似的系统，非要整个全家桶，完了再搞个 SSR ，脱裤子放屁。

[iyyy]

@wangxiaoaer 跑题了，不让你来 diss 的