three实现三维金缮裂隙代码-html代码-BFW代码库

代码语言：html

所属分类：三维

代码描述：three实现三维金缮裂隙代码，可调整参数

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

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
  
</head>

<body translate="no">
  <style>
  :root {
    color-scheme: dark;
    --bg: #050305;
    --panel: rgba(17, 17, 23, 0.42);
    --line: rgba(255, 223, 128, 0.24);
    --gold: #ffd16a;
    --cyan: #23f2ff;
    --magenta: #ff2ad4;
    --text: #f4efe1;
    --glass-edge: rgba(255, 255, 255, 0.26);
    --glass-fill: rgba(255, 255, 255, 0.11);
  }

  * {
    box-sizing: border-box;
  }

  body {
    margin: 0;
    overflow: hidden;
    background:
      radial-gradient(circle at 48% 42%, rgba(255, 176, 64, 0.14) 0%, rgba(255, 64, 196, 0.08) 24%, transparent 46%),
      radial-gradient(circle at 62% 58%, rgba(35, 242, 255, 0.12) 0%, transparent 42%),
      radial-gradient(circle at 50% 45%, #181016 0%, var(--bg) 62%, #000 100%);
    color: var(--text);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    user-select: none;
  }

  #canvas-container {
    position: fixed;
    inset: 0;
  }

  #canvas-container canvas {
    display: block;
    width: 100%;
    height: 100%;
    touch-action: none;
  }

  #loader {
    position: fixed;
    left: 50%;
    top: 50%;
    z-index: 20;
    transform: translate(-50%, -50%);
    color: var(--gold);
    font-size: 12px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    text-shadow: 0 0 18px rgba(255, 209, 106, 0.8);
    transition: opacity 0.7s ease;
    pointer-events: none;
  }

  #title-chip {
    position: fixed;
    left: 24px;
    bottom: 24px;
    z-index: 5;
    max-width: min(360px, calc(100vw - 48px));
    padding: 14px 16px;
    border: 1px solid rgba(255, 209, 106, 0.16);
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015));
    backdrop-filter: blur(18px) saturate(120%);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  }

  #title-chip h1 {
    margin: 0 0 5px;
    font-size: 13px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gold);
  }

  #title-chip p {
    margin: 0;
    color: rgba(244, 239, 225, 0.68);
    font-size: 12px;
    line-height: 1.4;
  }

  #micro-ui {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10;
    width: min(168px, calc(100vw - 24px));
    max-height: 470px;
    overflow: hidden;
    padding: 12px;
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-top-color: rgba(255, 255, 255, 0.36);
    border-left-color: rgba(255, 255, 255, 0.28);
    background:
      linear-gradient(155deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.06) 30%, rgba(255, 255, 255, 0.025) 58%),
      radial-gradient(circle at 18% 5%, rgba(255, 231, 177, 0.2), transparent 45%),
      radial-gradient(circle at 92% 18%, rgba(35, 242, 255, 0.14), transparent 42%),
      var(--panel);
    backdrop-filter: blur(28px) saturate(190%);
    -webkit-backdrop-filter: blur(28px) saturate(190%);
    box-shadow:
      0 22px 64px rgba(0, 0, 0, 0.56),
      inset 0 1px 0 rgba(255, 255, 255, 0.32),
      inset 0 -18px 42px rgba(255, 255, 255, 0.035);
    transform-origin: top right;
    transition:
      max-height 0.58s cubic-bezier(0.19, 1, 0.22, 1),
      transform 0.58s cubic-bezier(0.19, 1, 0.22, 1),
      box-shadow 0.58s ease,
      background 0.58s ease;
  }

  #micro-ui::before,
  #micro-ui::after {
    content: "";
    position: absolute;
    pointer-events: none;
    border-radius: inherit;
  }

  #micro-ui::before {
    inset: 1px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    mask-image: linear-gradient(140deg, #000 0%, transparent 56%);
    -webkit-mask-image: linear-gradient(140deg, #000 0%, transparent 56%);
  }

  #micro-ui::after {
    left: 14px;
    right: 34px;
    top: 7px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.62), transparent);
    opacity: 0.78;
  }

  #micro-ui.minimized {
    max-height: 50px;
    transform: translate3d(0, 0, 0) scale(0.985);
    box-shadow:
      0 16px 44px rgba(0, 0, 0, 0.48),
      inset 0 1px 0 rgba(255, 255, 255, 0.3),
      inset.........完整代码请登录后点击上方下载按钮下载查看