three+webgpu模拟三维真实海洋场景代码-html代码-BFW代码库

three+webgpu模拟三维真实海洋场景代码

代码语言：html

所属分类：三维

代码描述：three+webgpu模拟三维真实海洋场景代码

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

<!DOCTYPE html><html lang="en"><head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>Open Sea — Realtime WebGPU Ocean</title>
<meta name="description" content="A realtime procedural ocean. WebGPU · Three.js · TSL. No textures, only math."/>
<style>
  /* ---------- Fonts (Fontsource via jsDelivr, WOFF2) ---------- */
  @font-face {
    font-family: 'Geist Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('https://cdn.jsdelivr.net/npm/@fontsource/geist-sans@5/files/geist-sans-latin-400-normal.woff2') format('woff2');
  }
  @font-face {
    font-family: 'Geist Sans';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('https://cdn.jsdelivr.net/npm/@fontsource/geist-sans@5/files/geist-sans-latin-500-normal.woff2') format('woff2');
  }
  @font-face {
    font-family: 'Geist Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('https://cdn.jsdelivr.net/npm/@fontsource/geist-mono@5/files/geist-mono-latin-400-normal.woff2') format('woff2');
  }

  /* ---------- Base ---------- */
  :root { --accent: #8fe9e4; }
  * { margin: 0; padding: 0; box-sizing: border-box; }
  html, body {
    height: 100%;
    overflow: hidden;
    background: #05070a;
    overscroll-behavior: none;
  }
  body {
    font-family: 'Geist Sans', system-ui, -apple-system, sans-serif;
    color: #ffffff;
    -webkit-font-smoothing: antialiased;
  }
  canvas {
    position: fixed;
    inset: 0;
    display: block;
    touch-action: none;
    z-index: 0;
  }

  /* ---------- Vignette (non-interactive) ---------- */
  .vignette {
    position: fixed;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
      radial-gradient(ellipse 130% 95% at 50% 38%, transparent 52%, rgba(2, 4, 7, 0.55) 100%),
      linear-gradient(to bottom, transparent 68%, rgba(2, 4, 7, 0.38) 100%);
  }

  /* ---------- UI overlay (hidden until first rendered frame) ---------- */
  .ui {
    position: fixed;
    inset: 0;
    z-index: 3;
    pointer-events: none;      /* only the panel itself receives events */
    opacity: 0;
    transition: opacity 0.9s ease;
  }
  body.ready .ui { opacity: 1; }

  .panel-shell {
    position: absolute;
    top: 24px;
    left: 24px;
    padding: 6px;
    border-radius: 26px;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.09);
    pointer-events: auto;
    opacity: 0;
    transform: translateY(14px);
    transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1), opacity 1s ease;
  }
  body.ready .panel-shell { opacity: 1; transform: translateY(0); }

  .panel {
    width: 300px;
    padding: 22px;
    border-radius: 20px;
    background: rgba(8, 11, 16, 0.55);
    -webkit-backdrop-filter: blur(24px) saturate(140%);
    backdrop-filter: blur(24px) saturate(1.........完整代码请登录后点击上方下载按钮下载查看