three实现三维高级手表定制预览代码-html代码-BFW代码库

代码语言：html
所属分类：三维
代码描述：three实现三维高级手表定制预览代码，适合手表厂商提供的定制服务。
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Horologium — 3D 腕表定制工坊</title>
    <script src="https://cdn.tailwindcss.com">
    </script>
    <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500;600;700&family=Manrope:wght@200;300;400;500;600;700;800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

    <script type="importmap">
        {
            "imports": {
                "three": "https://unpkg.com/three@0.160.0/build/three.module.js",
                "three/addons/": "https://unpkg.com/three@0.160.0/examples/jsm/"
            }
        }
    </script>

    <style>
        :root {
            --bg: #0a0807;
            --bg-2: #15110c;
            --bg-3: #1f1812;
            --fg: #f4ece0;
            --fg-dim: #c9bea9;
            --muted: #8b7e6a;
            --accent: #d4a55a;
            --accent-2: #b8763e;
            --accent-3: #f5d896;
            --card: rgba(28, 22, 16, 0.65);
            --border: rgba(212, 165, 90, 0.18);
            --border-strong: rgba(212, 165, 90, 0.4);
            --danger: #d4574a;
            --success: #7fb069;
        }

        * {
            box-sizing: border-box;
        }
        html,
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            height: 100%;
        }
        body {
            background: var(--bg);
            color: var(--fg);
            font-family: 'Manrope', sans-serif;
            font-feature-settings: 'ss01', 'ss02';
            -webkit-font-smoothing: antialiased;
        }

        .display-font {
            font-family: 'Cormorant Garamond', serif;
        }
        .mono {
            font-variant-numeric: tabular-nums;
            letter-spacing: 0.05em;
        }

        /* 背景氛围 */
        .atmosphere {
            position: fixed;
            inset: 0;
            pointer-events: none;
            z-index: 0;
            background:
                radial-gradient(ellipse at 18% 25%, rgba(212, 165, 90, 0.10), transparent 55%),
                radial-gradient(ellipse at 82% 75%, rgba(184, 118, 62, 0.07), transparent 55%),
                radial-gradient(ellipse at 50% 100%, rgba(245, 216, 150, 0.04), transparent 60%),
                linear-gradient(180deg, #0a0807 0%, #050403 100%);
        }
        .atmosphere::after {
            content: '';
            position: absolute;
            inset: 0;
            background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/><feColorMatrix values='0 0 0 0 0.85  0 0 0 0 0.65  0 0 0 0 0.35  0 0 0 0.18 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
            opacity: 0.5;
            mix-blend-mode: overlay;
        }

        .particles {
            position: fixed;
            inset: 0;
            pointer-events: none;
            z-index: 1;
        }

        /* 布局 */
        .app-shell {
            position: relative;
            z-index: 10;
            height: 100vh;
            display: grid;
            grid-template-rows: auto 1fr auto;
            grid-template-columns: 320px 1fr 320px;
            grid-template-areas:
                "header header header"
                "left center right"
                "footer footer footer";
        }

        header.top-bar {
            grid-area: header;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 14px 28px;
            border-bottom: 1px solid var(--border);
            background: linear-gradient(to bottom, rgba(10, 8, 7, 0.92), rgba(10, 8, 7, 0.55));
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            z-index: 20;
        }

        .brand {
            display: flex;
            align-items: center;
            gap: 14px;
        }
        .brand-mark {
            width: 42px;
            height: 42px;
            border-radius: 50%;
            background:
                radial-gradient(circle at 30% 25%, #fae8b8, var(--accent) 45%, var(--accent-2) 85%);
            display: grid;
            place-items: center;
            color: #1a1208;
            font-family: 'Cormorant Garamond', serif;
            font-weight: 700;
            font-size: 24px;
            box-shadow:
                0 6px 18px rgba(212, 165, 90, 0.35),
                inset 0 1px 0 rgba(255, 255, 255, 0.4),
                inset 0 -2px 4px rgba(0, 0, 0, 0.2);
            position: relative;
        }
        .brand-mark::after {
            content: '';
            position: absolute;
            inset: 3px;
            border-radius: 50%;
            border: 1px solid rgba(0, 0, 0, 0.15);
        }
        .brand-name {
            font-family: 'Cormorant Garamond', serif;
            font-size: 30px;
            font-weight: 500;
            letter-spacing: 0.06em;
            line-height: 1;
        }
        .brand-sub {
            font-size: 9px;
            letter-spacing: 0.45em;
            color: var(--muted);
            text-transform: uppercase;
            margin-top: 4px;
        }

        .live-clock {
            display: flex;
            align-items: center;
            gap: 32px;
        }
        .time-block {
            text-align: center;
        }
        .time-block .label {
            font-size: 9px;
            letter-spacing: 0.35em;
            color: var(--muted);
            text-transform: uppercase;
            margin-bottom: 4px;
        }
        .time-block .value {
            font-family: 'Cormorant Garamond', serif;
            font-size: 26px;
            font-weight: 400;
            letter-spacing: 0.06em;
            color: var(--fg);
        }
        .time-block .value .sep {
            color: var(--accent);
            animation: blink 1s steps(2) infinite;
        }
        @keyframes blink {
            50% {
                opacity: 0.3;
            }
        }

        .ar-toggle {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 11px 20px;
            border-radius: 999px;
            background: linear-gradient(135deg, var(--accent), var(--accent-2));
            color: #1a1208;
            font-weight: 700;
            font-size: 11px;
            letter-spacing: 0.2em;
            text-transform: uppercase;
            cursor: pointer;
            border: none;
            box-shadow: 0 6px 22px rgba(212, 165, 90, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.3);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .ar-toggle:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 30px rgba(212, 165, 90, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.4);
        }
        .ar-toggle.active {
            background: linear-gradient(135deg, #d4574a, #8a2a1f);
            color: #fff;
        }

        /* 侧边栏 */
        aside.panel {
            background: var(--card);
            backdrop-filter: blur(24px);
            -webkit-backdrop-filter: blur(24px);
            border-right: 1px solid var(--border);
            overflow-y: auto;
            padding: 24px 22px 28px;
        }
        aside.left-panel {
            grid-area: left;
        }
        aside.right-panel {
            grid-area: right;
            border-right: none;
            border-left: 1px solid var(--border);
        }

        .panel::-webkit-scrollbar {
            width: 4px;
        }
        .panel::-webkit-scrollbar-track {
            background: transparent;
        }
        .panel::-webkit-scrollbar-thumb {
            background: var(--border);
            border-radius: 2px;
        }
        .panel::-webkit-scrollbar-thumb:hover {
            background: var(--accent);
        }

        .section {
            margin-bottom: 30px;
        }
        .section-title {
            font-size: 10px;
            letter-spacing: 0.3em;
            text-transform: uppercase;
            color: var(--accent);
            margin-bottom: 14px;
            display: flex;
            align-items: center;
            gap: 10px;
            font-weight: 600;
        }
        .section-title i {
            font-size: 11px;
        }
        .section-title::after {
            content: '';
            flex: 1;
            height: 1px;
            background: linear-gradient(to right, var(--border-strong), transparent);
        }

        /* 材料网格 */
        .material-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 8px;
        }
        .material-tile {
            aspect-ratio: 1;
            border-radius: 10px;
            border: 1px solid var(--border);
            cursor: pointer;
            position: relative;
            overflow: hidden;
            transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
            background: var(--bg-2);
        }
        .material-tile .sphere-preview {
            width: 100%;
            height: 100%;
            position: relative;
        }
        .material-tile .sphere-preview::before {
            content: '';
            position: absolute;
            inset: 18%;
            border-radius: 50%;
            box-shadow: inset -3px -4px 8px rgba(0, 0, 0, 0.45), inset 3px 4px 6px rgba(255, 255, 255, 0.25);
        }
        .material-tile .label {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            font-size: 8.5px;
            text-align: center;
            padding: 4px 2px 5px;
            background: linear-gradient(to top, rgba(0, 0, 0, 0.92), rgba(0, 0, 0, 0.4) 60%, transparent);
            letter-spacing: 0.12em;
            text-transform: uppercase;
            font-weight: 500;
        }
        .material-tile:hover {
            border-color: var(--accent);
            transform: translateY(-2px);
        }
        .material-tile.active {
     .........完整代码请登录后点击上方下载按钮下载查看