GoodVibe
登录
返回工具 · 工具

玻璃图标工坊:SVG / PNG 转 3D 玻璃

拖入任意 SVG / PNG,实时挤出成 3D 玻璃质感,导出透明 PNG

Details
v1.02026-06-17

Overview

一个跑在浏览器里的 3D 图标工坊:拖入任意 SVG 或 PNG,自动挤出成有厚度、有倒角、能折射的玻璃图标,导出高清透明 PNG。

SVG 走矢量路径,并保留原始渐变(沿渐变轴烘焙成挤出体的顶点颜色,不改一个色值);PNG 自动描摹成色块,去除透明与纯色背景。提供厚度、倒角、间距、磨砂、折射、通透六个滑块,外加玻璃 / 水晶 / 磨砂 / 炫彩 / 金属釉五档材质预设。

纯前端 WebGL(three.js),无后端,渲染与导出全部在浏览器内完成。

Design Principles

  • SVG 优先:矢量路径与渐变精确还原,PNG 描摹是只有位图时的兜底
  • 原色不动:渐变按渐变轴烘焙进顶点颜色,不替换任何色值
  • 重叠不闪:每层用 polygonOffset 错开深度,几何体零位移
  • 克制的玻璃:默认偏正面、弱透视,贴近平面图标的排布关系

How to Use

集成 logo 墙、产品落地页的图标装饰、作品集封面、社媒头像与 OG 图

拖入 SVG / PNG → 选材质预设 → 调厚度 / 倒角 / 通透 → 勾透明导出 → 导出 2x PNG