three实现svg图标转三维3d立体模型glb文件代码-html代码-BFW代码库

three实现svg图标转三维3d立体模型glb文件代码

代码语言：html

所属分类：三维

代码描述：three实现svg图标转三维3d立体模型glb文件代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SVG → 3D 立体图标</title>
    <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;500;700&display=swap" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" rel="stylesheet">
    <style>
        :root {
            --bg: #f5f2ee;
            --fg: #1c1917;
            --muted: #78716c;
            --accent: #e85d3a;
            --accent-hover: #d44f2e;
            --card: rgba(255,255,255,0.82);
            --border: rgba(0,0,0,0.06);
            --radius: 14px;
        }
        *{margin:0;padding:0;box-sizing:border-box}
        body{font-family:'Space Grotesk',sans-serif;background:var(--bg);color:var(--fg);overflow:hidden;height:100vh;-webkit-font-smoothing:antialiased}
        canvas{display:block}

        /* 导航栏 */
        .nav{position:fixed;top:0;left:0;right:0;height:60px;background:var(--card);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 28px;z-index:100}
        .nav-brand{font-size:19px;font-weight:700;letter-spacing:-.6px;display:flex;align-items:center;gap:8px}
        .nav-brand .arrow{color:var(--accent);font-weight:300}
        .nav-brand .tag3d{background:var(--accent);color:#fff;font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:6px;letter-spacing:.5px}
        .nav-actions{display:flex;gap:10px;align-items:center}

        /* 按钮 */
        .btn{display:inline-flex;align-items:center;gap:7px;padding:9px 18px;border:none;border-radius:var(--radius);font-family:inherit;font-size:13.5px;font-weight:600;cursor:pointer;transition:all .2s ease;outline:none}
        .btn:active{transform:scale(.97)}
        .btn-accent{background:var(--accent);color:#fff}
        .btn-accent:hover{background:var(--accent-hover);box-shadow:0 4px 18px rgba(232,93,58,.28)}
        .btn-gh.........完整代码请登录后点击上方下载按钮下载查看