AMAZINGINDEX.COM 日报快照
53.3
VOL. 2026.09
2026.09.02
← 返回 2026.09.02 日报
日报快照 · Daily Snapshot
NO. 018

Blender级3D效果纯CSS实现

#ARTICLE HackerNews 2026.09.02
推荐指数 46.0 NO. 018 · 2026.09.02
发布2026/09/01Score136Comments54

Ambient CSS v3 将 Blender 的 3D 渲染能力移植到纯 CSS 中,无需 WebGL 或 JS 即可实现复杂光影和材质效果。前端开发者可直接在样式层构建高性能 3D 视觉,大幅降低 3D 网页开发门槛。

之前前端做 3D 要么用 Three.js 拉满 bundle size,要么用 WebGL 手写 shader,维护成本极高。这个项目走了一条反直觉的路:用 CSS 原生特性(渐变、滤镜、自定义属性)模拟 Blender 的节点材质系统,最终产物是纯 CSS 文件,可直接丢进任何框架。

跟 R3F、Three.js 比,它牺牲的是实时交互性和模型复杂度,但换来的是零 JS 运行时开销和 SSR 友好。适合产品官网、营销页、数据大屏这类"好看但不要求操控"的场景。

如果你的团队没有专职 3D 工程师,但设计师又坚持要某张参考图的光影质感,这个工具可能是目前最低成本的落地路径。建议直接看它的节点编辑器 demo,比读文档快十倍。

意见分歧 53 条评论

核心争论:拟物化3D CSS视觉效果虽酷,但实用性差、交互体验糟糕,是复古情怀还是设计倒退?

__alexs

This has mid 2000's LiteStep theme vibes.

yboris

LiteStep forever in our hearts ♥

drcongo

You see a lot of this kind of look in AUv3 plugins on the iPad and I love it - it's so nice to have visually tactile interfaces rather than the flat shit that OSs have been forcing on us.

替代方案: LiteStepneumorphism.ioApple HIGBootstrapTailwindPNG/GIF/DXImageTransformFlash/motiongerm
查看原文 →