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