three实现三维有声动画片代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码由gpt-6 ai生成，可能有错误，仅供参考：点击查看提示词

代码描述：three实现三维有声动画片代码

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

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
<title>机器人种花 · 三维有声动画</title>
<style>
  :root { color-scheme: dark; --mint:#a9f0d4; --ink:#143438; }
  * { box-sizing:border-box; }
  html,body { margin:0; width:100%; height:100%; overflow:hidden; background:#a5dfef; font-family:system-ui,-apple-system,"Segoe UI","Microsoft YaHei",sans-serif; }
  #stage { position:fixed; inset:0; overflow:hidden; background:linear-gradient(180deg,#9bdcf0 0%,#d8f3eb 64%,#b9e7a0 100%); }
  canvas { position:absolute; inset:0; width:100%; height:100%; display:block; }
  .topbar { position:absolute; z-index:3; left:clamp(14px,3vw,34px); right:clamp(14px,3vw,34px); top:clamp(14px,2.5vh,26px); display:flex; align-items:flex-start; justify-content:space-between; gap:12px; pointer-events:none; }
  .brand { color:#144247; text-shadow:0 2px 0 rgba(255,255,255,.24); }
  .brand .eyebrow { font-size:11px; font-weight:800; letter-spacing:.22em; opacity:.74; }
  .brand h1 { margin:5px 0 0; font-size:clamp(20px,3vw,34px); line-height:1.12; letter-spacing:.04em; }
  .brand p { margin:6px 0 0; font-size:clamp(11px,1.5vw,14px); opacity:.76; }
  .scene-pill { border:1px solid rgba(255,255,255,.72); color:#1b4a49; background:rgba(255,255,255,.48); backdrop-filter:blur(12px); border-radius:999px; padding:8px 13px; font-size:12px; font-weight:750; white-space:nowrap; box-shadow:0 6px 20px #477a6d15; }
  .bottom-ui { position:absolute; z-index:4; left:0; right:0; bottom:0; padding:0 clamp(12px,3vw,34px) max(14px,env(safe-area-inset-bottom)); display:flex; flex-direction:column; align-items:center; gap:12px; pointer-events:none; }
  #subtitle { width:min(820px,100%); min-height:52px; display:flex; align-items:center; justify-content:center; text-align:center; padding:12px 20px; border-radius:16px; color:white; font-size:clamp(16px,2.15vw,23px); line-height:1.4; font-weight:750; letter-spacing:.025em; background:rgba(10,35,43,.78); border:1.5px solid rgba(255,255,255,.94); text-shadow:0 2px 2px rgba(0,0,0,.32); box-shadow:0 10px 36px rgba(21,56,56,.22); backdrop-filter:blur(10px); opacity:0; transform:translateY(10px); transition:opacity .3s ease,transform .3s ease; overflow-wrap:anywhere; }
  #subtitle.visible { opacity:1; transform:translateY(0); }
  .controls { display:flex; align-items:center; justify-content:center; gap:10px; pointer-events:auto; }
  button { appearance:none; border:0; cursor:pointer; border-radius:999px; font:inherit; font-weight:800; transition:transform .18s ease, filter .18s ease, background .18s ease; }
  button:hover { filter:brightness(1.04); transform:translateY(-1px); }
  button:active { transform:translateY(1px) scale(.99); }
  #playBtn { min-width:160px; padding:12px 23px; color:#123d37; background:linear-gradient(135deg,#eaffc9,#9df0c6); box-shadow:0 7px 0 rgba(27,103,81,.22),0 14px 32px rgba(28,95,82,.17); }
  #stopBtn { padding:11px 18px; color:#16444a; background:rgba(255,255,255,.72); border:1px solid rgba(255,255,255,.86); }
  #status { min-height:16px; color:#19494b; text-align:center; font-size:11px; line-height:1.4; text-shadow:0 1px 0 rgba(255,255,255,.4); }
  .hint { position:absolute; z-index:2; left:50%; top:50%; transform:translate(-50%,-50%); width:min(310px,76vw); padding:16px 20px; text-align:center; border:1px solid rgba(255,255,255,.65); border-radius:20px; color:#16474a; background:rgba(255,255,255,.35); backdrop-filter:blur(9px); box-shadow:0 12px 32px rgba(40,95,94,.10); pointer-events:none; transition:opacity .6s ease, transform .6s ease; }
  .hint .icon { font-size:26px; margin-bottom:4px; }
  .hint strong { display:block; font-size:15px; }
  .hint span { display:block; margin-top:5px; font-size:12px; opacity:.78; }
  .hint.hidden { opacity:0; transform:translate(-50%,-46%); }
  .vignette { position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(180deg,rgba(255,255,255,.08),transparent 24%,transparent 72%,rgba(20,83,58,.08)); }
  @media (max-width:520px) { .brand p { max-width:220px; } .scene-pill { font-size:10px; padding:7px 9px; } #subtitle { min-height:56px; padding:11px 13px; border-radius:13px; } #playBtn { min-width:140px; padding:12px 18px; } }
</style>
<script type="importmap">
{
  "imports": {
    ".........完整代码请登录后点击上方下载按钮下载查看