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

three.js 吧

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

three.js

canvas , tree.js

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

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

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

@insanny Wappalyzer

泰裤辣

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

@1016 多谢!

15 年前的 flash 也是这效果。

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

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

threejs 的哇 3d 的玩意儿

好看！

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

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

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

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

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

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

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

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

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

太猛了

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

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

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

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

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

眼睛都花了。。

是挺酷炫

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

@encro 时代的眼泪

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

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

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

栓 q ，电脑炸了 23333

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

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

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

泰裤辣

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

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

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

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

确实帅啊

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

域名牛比

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

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

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

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

确实不错，一眼 webgl

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

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

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

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

我也想学，蹲个教程

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

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

真丝滑

真的是 太酷啦

雀食帅

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

@Track13 #21 有链接么

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

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

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

@Huelse 卧槽，好几把炫

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

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

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

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

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

@brader 前端：我真的栓 Q

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

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

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

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

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

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

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

@darknoll 经典杠精逻辑

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

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

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

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

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

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

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

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

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

新开发了一个大盘云图网站，大家帮忙看看

大盘云图官网： https://52etf.site/