react+three实现三维炫酷可调参数能量保护防护罩代码-html代码-BFW代码库

代码语言：html

所属分类：三维

代码描述：react+three实现三维炫酷可调参数能量保护防护罩代码

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>3D Playground</title>

  <!-- Google Fonts -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Barlow+Condensed:wght@300;400;500;600&family=IBM+Plex+Mono:wght@300;400;500&display=swap" rel="stylesheet">

  <!-- TailwindCSS (CDN) -->
  <script src="https://cdn.tailwindcss.com"></script>

  <style>
    /* ==========================================
       app/globals.css
       ========================================== */
    :root {
      --font-bebas: 'Bebas Neue', sans-serif;
      --font-barlow: 'Barlow Condensed', sans-serif;
      --font-ibm-mono: 'IBM Plex Mono', monospace;
      
      --color-bg: #1a1816;
      --color-bg-light: #242220;
      --color-surface: #2a2826;
      --color-border: #3a3836;
      --color-border-light: #5c5854;
      --color-text: #d4cfc8;
      --color-text-muted: #8a847a;
      --color-accent: #c8b89a;
      --color-accent-dim: #9a8e78;
      --color-white: #f0ece6;
      --color-black: #0e0d0c;
    }

    html, body {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
      background: var(--color-black);
      color: var(--color-text);
      font-family: var(--font-barlow), sans-serif;
    }

    /* ==========================================
       app/landing.module.css
       ========================================== */
    .landing-page {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: calc(100vh - 53px);
      padding: 48px 24px;
      box-sizing: border-box;
    }

    /* ==========================================
       components/overlay/LoadingOverlay.module.css
       ========================================== */
    .lo-overlay {
      position: fixed;
      inset: 0;
      z-index: 52;
      display: flex;
      align-items: center;
      justify-content: center;
      pointer-events: none;
      background: rgba(14, 13, 12, 0.5);
    }
    .lo-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
    }
    .lo-spinner {
      width: 28px;
      height: 28px;
      border: 2px solid var(--color-border);
      border-top-color: var(--color-accent);
      border-radius: 50%;
      animation: lo-spin 0.8s linear infinite;
    }
    .lo-text {
      font-family: var(--font-ibm-mono), monospace;
      font-size: 12px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--color-accent);
    }
    @keyframes lo-spin {
      to { transform: rotate(360deg); }
    }

    /* ==========================================
       components/overlay/OverlayButtons.module.css
       ========================================== */
    .ob-container {
      position: fixed;
      bottom: 74px;
      right: 24px;
      z-index: 55;
      display: flex;
      gap: 8px;
      pointer-events: none;
    }
    .ob-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 36px;
      min-width: 36px;
      padding: 0;
      border: 1px solid var(--overlay-border);
      border-radius: 4px;
      background: var(--overlay-bg);
      color: var(--overlay-text);
      cursor: pointer;
      font-family: var(--font-ibm-mono), monospace;
      font-size: 11px;
      letter-spacing: 0.05em;
      transition: border-color 0.2s, background 0.2s, opacity 0.2s;
      pointer-events: auto;
    }
    .ob-btn:hover {
      border-color: var(--overlay-accent);
    }
    .ob-active {
      border-color: var(--overlay-accent);
      background: var(--overlay-surface);
    }
    .ob-inactive {
      opacity: 0.6;
    }
    .ob-importBtn {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 36px;
      min-width: 36px;
      border: 1px solid var(--overlay-border);
      border-radius: 4px;
      background: var(--overlay-bg);
      color: var(--overlay-text);
      cursor: pointer;
      font-family: var(--font-ibm-mono), monospace;
      letter-spacing: 0.05em;
      transition: border-color 0.2s, background 0.2s, opacity 0.2s;
      pointer-events: auto;
      gap: 6px;
      padding: 0 12px;
      white-space: nowrap;
    }
    .ob-importBtn:hover {
      border-color: var(--overlay-accent);
    }
    .ob-importBtn.ob-active {
      border-color: var(--overlay-accent);
      background: var(--overlay-surface);
    }
    .ob-importBtn svg {
      flex-shrink: 0;
    }
    .ob-importLabel {
      font-size: 11px;
      line-height: 1;
    }
    .ob-fileInput {
      display: none;
    }
    .ob-presetGroup {
      display: flex;
      gap: 4px;
      pointer-events: auto;
    }
    .ob-presetBtn {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 36px;
      min-width: 36px;
      border: 1px solid var(--overlay-border);
      border-radius: 4px;
      background: var(--overlay-bg);
      color: var(--overlay-text);
      cursor: pointer;
      font-family: var(--font-ibm-mono), monospace;
      transition: border-color 0.2s, background 0.2s, opacity 0.2s;
      pointer-events: auto;
      padding: 0 10px;
      white-space: nowrap;
      font-size: 10px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }
    .ob-presetBtn:hover {
      border-color: var(--overlay-accent);
    }
    .ob-presetBtn.ob-active {
      border-color: var(--overlay-accent);
      background: var(--overlay-surface);
    }
    .ob-presetBtn.ob-inactive {
      opacity: 0.6;
    }
    .ob-separator {
      width: 1px;
      background: var(--overlay-border);
      margin: 4px 0;
      pointer-events: none;
    }
  </style>
<script type="importmap">
  {
    "imports": {
      "react": "https://esm.sh/react@18.2.0",
      "react/jsx-runtime": "https://esm.sh/react@1.........完整代码请登录后点击上方下载按钮下载查看