这是一个创建于 563 天前的主题，其中的信息可能已经有所发展或是发生改变。
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 的
|
Select Language