这是一个创建于 335 天前的主题，其中的信息可能已经有所发展或是发生改变。
quai 的官网，https://qu.ai/，（具体它是做什么的我们不讨论哈）
这种从上拉到下，一镜到底的感觉太酷了。可是我只是个普通的后端 /数据，看不懂前端代码，前端是有什么成熟的组件或者框架能实现吗？或者是什么技术原理呀？求教～
 |
1
fengfuliu 335 天前  5
three.js 吧
|
 |
2
palxie 335 天前
不太懂. 但是感觉好花里胡哨 😂
|
 |
3
besscroft 335 天前
three.js
|
 |
4
TArysiyehua 335 天前
canvas , tree.js
|
|
5
TArysiyehua 335 天前
<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>
|
 |
6
justin2018 335 天前 5
 |
 |
7
mzh 335 天前
确实好酷炫，看了下 network ，有很多.glb, .ktx2 格式的文件下载，应该是 OpenGL 加载的 3D 模型吧。
|
 |
8
insanny 335 天前
@justin2018 请问这是什么插件，看起来好好用
|
 |
10
yatoooon 335 天前
泰裤辣
|
 |
11
HeyWeGo 335 天前
虽然都是前端，但是方向和一般的那种组件区别挺大的
|
 |
13
encro 335 天前 1
15 年前的 flash 也是这效果。
|
 |
14
darkengine 335 天前
打开这个同事以为我上班玩游戏。。。
|
 |
15
brader 335 天前 4
好东西，拿回去问问我家前端同学能不能做
|
 |
16
Adicwu 335 天前
threejs 的哇 3d 的玩意儿
|
 |
17
Myprajna 335 天前
好看！
|
 |
18
C47CH 335 天前
用 brave 打开根本动不了，不过关了护盾就好了
|
 |
19
gadore 335 天前
three.js 预设置好 3D 模型场景的镜头运作路线，然后监听滚轮，配合 dom 元素的关键帧动画配合。。。应该是这样
|
 |
20
AyaseEri 335 天前 2
除了前端的基本知识、3D 的基本知识，还要有动画拆解的功底。能独立做这玩意的，JS + HTML + CSS 跟 AE 一样就是个工具。
|
 |
21
Track13 335 天前 via Android
这个太简单了。
让前几天那个说前端就是 curd ，写写样式，太简单没意思的大佬来。 （我不行） |
 |
22
hakulamatata 335 天前
svg 的特效了，公众号现在也有很多在用，算很高端的操作了
|
 |
23
flyhaozi 335 天前
滚动动画的控制应该是用的 gsap 和 scrolltrigger
|
 |
24
w950888 335 天前 1
我:前端小姐姐,我想要这个👆😋.
小姐姐:滚! |
 |
27
coldmonkeybit 335 天前
太猛了
|
 |
28
darknoll 335 天前
花里胡哨的不实用，客户不会喜欢的
|
 |
29
bhbhxy 335 天前
@Track13 那种人网上太多了，技术视野窄，接触的东西也就是一个井口，然后大言不惭地说不就是调个 API 嘛😂，以前的老板也是这样，说写代码不就是从网上复制粘贴一段就行了
|
|
30
bhbhxy 335 天前 4
@darknoll 这是程序员 /艺术家的追求和浪漫，这种需求现在数字孪生，可视化非常多，都是几十万到几百万不等的单子，精通图形学的前端也是很吃香的，市场上奇缺这种前端。
|
 |
31
Huelse 335 天前 11
给你看个超炫的 https://deck-24abcd.netlify.app/
|
 |
32
lixiaobai913 335 天前
好家伙，打开电脑都卡死了，日常办公电脑太拉了
|
 |
33
likeme 335 天前
眼睛都花了。。
|
 |
34
yulgang 335 天前
是挺酷炫
|
 |
39
MRG0 335 天前
我更好奇苹果官网那样的是如何实现的
|
 |
40
2Soon 335 天前
栓 q ，电脑炸了 23333
|
|
41
MRG0 335 天前
@MRG0 还有 oppo 这个 https://connect.oppo.com/zh-CN
|
 |
42
lambdaq 335 天前
|
 |
43
zthxxx 335 天前
泰裤辣
|
 |
44
can2421 335 天前 1
|
 |
45
jamosLi 335 天前
以前觉得 soul 的星空交互很秀，现在看来这些交互才是绝绝子啊。
|
 |
46
LXGMAX 335 天前
用这个整三体游戏网页介绍不错
|
 |
48
DICK23 335 天前
确实帅啊
|
 |
50
c3de3f21 335 天前
域名牛比
|
 |
51
Jame00001 335 天前
3d 库搭建场景，预设相机轨道，上滚前进下滚后退。镜头不能自由移动是最明显的
|
|
54
Jame00001 335 天前
@hakulamatata 相对只会后台管理的菜鸟算是高端了，但实际上只能看出来前端功底不错，技术算不上高端
|
 |
55
n18255447846 335 天前
确实不错，一眼 webgl
|
|
56
n18255447846 335 天前
其它大部分都是些简单的 event+css 动画
|
 |
57
xiaoxiyiha 335 天前
|
 |
58
x77 335 天前
底层原理是调用 WebGL 实现 3D 效果，3D 网页我十多年前就见过，一开始看着很新奇，久了就感觉又慢又没什么用
|
 |
59
beginor 335 天前 via Android
确实很帅， 目测应该是 webgl + css3d
|
 |
60
retanoj 335 天前
我也想学，蹲个教程
|
 |
61
hronro 335 天前
这个看起来很酷炫,用的技术也听上去也挺高大上的,但其实体验并不好,在低配电脑上卡的起飞了,我笔记本直呼烫手.
要让我来实现,我可能会用比这个"LOW"很多的技术来实现:关键帧.他这个镜头是写死的只会随着滚动变化而变化,我只要监听滚动像播放视频一样不停地变换背景图片就可以了,在主流配置上绝对比他这个流畅许多. |
 |
62
x86 335 天前
真丝滑
|
 |
63
luemail2023 335 天前
真的是 太酷啦
|
 |
64
NoString 335 天前
雀食帅
|
 |
65
SekiBetu 335 天前
这是前端？不是在线渲染的 3D 模型吗
|
 |
67
zxCoder 335 天前
我电脑 cpu 可能不行，卡的要死
|
 |
68
dcsuibian 335 天前 via Android
three.js 吧，这个对前端功力有考验，但更多是设计功力吧
|
 |
69
ruoxie 335 天前
three.js > webgl > 着色器编程
能写出这样效果的人可能并不是一个网页前端，也许是游戏前端 |
|
71
Track13 335 天前 via Android
|
 |
72
kernelpanic 335 天前
13900k+4090+64G 内存 卡成 ppt
|
 |
73
TomPig0216 335 天前
@Huelse #31 这个真的泰酷辣 真的超酷
|
 |
74
wongminli 335 天前
有个看 A 股的大盘云图也挺炫酷的，名字就叫大盘云图
网址： https://dapanyuntu.com?ref=940640 |
 |
75
jswh 334 天前
|
 |
76
zhangjh024 334 天前
https://www.midjourney.com/
midjourney 也不错 |
 |
78
wangxiang 334 天前
我觉得苹果官网产品页面也比较炫
|
 |
79
andyskaura 334 天前
补充一下，鼠标 hover 上还用了 后处理 shader
|
 |
81
thinkershare 334 天前
底层原理是 WebGL 或者 WebGPU, 后端框架一般是 Three.js 或者干脆是使用 Unity3D 这种游戏引擎输出到 HTML5 的。这个玩意其实和前端没啥关系，核心是美术和图形学，更像游戏，我们天天搞三维可视化，它这个运镜水平还可与，其它的并不怎么样，只要你愿意花钱，国内现在大把做这个玩意的，最开始一个项目上百万，现在 20W 也有人愿意做了，卷的非常厉害。浏览器在大型模型上还是会遇到很多问题，优化性能是个天坑，因为浏览器的渲染环境实在太多了。WebGL 会遇到各种奇奇怪怪的问题。如果是做内部演示软件没啥大问题，如果是面相公众的，优化可用性简直是天坑。
|
 |
82
pinkbook 334 天前
很酷，但是打开后电脑风扇呼呼转，这样的话，非不可替代网站，则尽量不打开
|
 |
84
alphardex 334 天前
我的目标也是做出这样的网站，不久在掘金上会出一本关于 Shader 的教程，顺便把它做出来（大雾）
|
 |
86
masterclock 334 天前
为什么用 babylon.js 的这么少？
使用上感觉比 three.js 方便，工具链齐全 |
 |
89
dragondove 334 天前
@lixiaobai913 这东西吃显卡，我一打开，集显直接占满了。好处是效果好帧率高（不像以前 flash 时代各种掉帧），就是太吃资源了。我觉得这点特效吃那么多资源算是优化比较差的。（毕竟现在也有好多网页上的显卡渲染游戏（一般是 unity 之类的）），很多也没吃那么多资源。
|
 |
90
WashFreshFresh 334 天前
这种有没有类似自动生成的，想 520 搞一波
|
 |
91
wangxiaoaer 334 天前
1 这个页面很酷炫，前端水平挺高。
2 大部分应用的前端就是 CRUD ，调用 API ，后端虽然也号称 CRUD ，但的确比前端复杂度多。 3 现在前端有些过了，比如明明 CMS 类似的系统，非要整个全家桶，完了再搞个 SSR ，脱裤子放屁。 |
 |
92
iyyy 334 天前
@wangxiaoaer 跑题了，不让你来 diss 的
|
Select Language