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

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

代码语言：html

所属分类：其他

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

代码描述：三维有声动画片制作

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

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>机器人种花 · Cartoon 3D Short</title>
<style>
  html, body { margin:0; padding:0; width:100%; height:100%; background:#0a0e1a; overflow:hidden; font-family:system-ui, -apple-system, "Segoe UI", sans-serif; color:#fff; }
  #app { position:fixed; inset:0; }
  canvas { display:block; }
  #subtitle {
    position:fixed; left:50%; bottom:8%; transform:translateX(-50%);
    padding:14px 34px; max-width:80vw; text-align:center;
    background:rgba(10,14,26,0.55); border:1px solid rgba(255,255,255,0.15);
    border-radius:14px; backdrop-filter: blur(6px);
    color:#fff; font-size:clamp(16px, 2.4vw, 22px); letter-spacing:1.5px;
    text-shadow: 0 0 6px #000, 0 0 2px #000;
    opacity:0; transition:opacity .4s ease;
    pointer-events:none;
  }
  #subtitle.show { opacity:1; }
  #startBtn {
    position:fixed; inset:0; margin:auto; width:180px; height:64px;
    font-size:22px; letter-spacing:3px; font-weight:700;
    background:linear-gradient(135deg,#6cf,#c6f);
    color:#fff; border:none; border-radius:40px; cursor:pointer;
    box-shadow:0 10px 30px rgba(120,180,255,.4);
    animation:pulse 2s infinite;
  }
  #startBtn:hover { transform:scale(1.05); }
  @keyframes pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.05)} }
  #hint {
    position:fixed; top:16px; right:16px; font-size:12px;
    color:rgba(255,255,255,0.55); text-align:right; pointer-events:none;
  }
  #shotTag {
    position:fixed; top:14px; left:16px; font-size:12px;
    color:rgba(255,255,255,.65); letter-spacing:1px; pointer-events:none;
  }
  .hidden { display:none !important; }
</style>
</head>
<body>
<div id="app">
  <canvas id="canvas"></canvas>
  <div id="subtitle"></div>
  <div id="shotTag">SHOT 1 / 10</div>
  <div id="hint">机器人种花 · 60s 三维卡通短片</div>
  <button id="startBtn">▶ 播放</button>
</div>

<script type="importmap">
{
  "imports": {
    "three": "https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js"
  }
}
</script>

<script type="module">
import * as THREE from 'three';

// ============================================================
// // 全局常量与调色板
// ============================================================
const TTS_RATE   = 0.9;
const TTS_PITCH  = 0.78;
const TTS_VOLUME = 0.95;

const palette = {
  sky0: 0x0a1230, sky1: 0x1a2450, sky2: 0x7fb6e6,
  ground0: 0x6b4a2b, ground1: 0x3ea55a,
  robot: 0xcfd8dc, robotAccent: 0xffc857, robotEye: 0x00e5ff,
  seed: 0x8a5a2b, stem: 0x3c8a3c, petal: 0xff6fa5, petalAlt: 0xfff36b,
  sun: 0xfff176, butterfly: 0xff7ac6
};

// ============================================================
// // 缓动函数
// ============================================================
const ease = {
  inOutCubic: t => t < 0.5 ? 4*t*t*t : 1 - Math.pow(-2*t+2,3)/2,
  outBack:    t => { const c1=1.70158, c3=c1+1; return 1 + c3*Math.pow(t-1,3) + c1*Math.pow(t-1,2); },
  outQuad:    t => 1 - (1-t)*(1-t),
  inQuad:     t => t*t,
  outElastic: t => { const c4=(2*Math.PI)/3; return t===0?0:t===1?1:Math.pow(2,-10*t)*Mat.........完整代码请登录后点击上方下载按钮下载查看