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

代码语言：html

所属分类：其他

代码由minimax-m3.1-flash ai生成，可能有错误，仅供参考：点击查看提示词

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

下面为部分代码预览，完整代码请点击下载或在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>机器人种花 · Three.js 三维动画短片</title>
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ctext y='26' font-size='26'%3E%F0%9F%8C%B8%3C/text%3E%3C/svg%3E" />
<style>
  * { box-sizing: border-box; }
  html, body {
    margin: 0; padding: 0; height: 100%; overflow: hidden;
    background: #0d1520;
    font-family: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", "Hiragino Sans GB", system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
  }
  #stage { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; }

  /* ---------------- 底部字幕条：半透明深色底 + 白色描边文字 ---------------- */
  .subtitle {
    position: fixed; left: 50%; transform: translateX(-50%);
    bottom: max(3.2vh, 18px);
    max-width: min(90vw, 880px);
    padding: 12px 28px;
    border-radius: 999px;
    background: rgba(10, 16, 26, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #ffffff;
    font-size: clamp(15px, 2.3vw, 27px);
    font-weight: 700;
    line-height: 1.55;
    letter-spacing: .05em;
    text-align: center;
    white-space: normal;
    word-break: break-word;
    text-shadow: 0 0 8px rgba(0,0,0,.95), 0 2px 2px rgba(0,0,0,.9);
    -webkit-text-stroke: .7px rgba(0,0,0,.85);
    opacity: 0;
    transition: opacity .45s ease, transform .45s ease;
    pointer-events: none;
    z-index: 20;
  }
  .subtitle.show { opacity: 1; transform: translateX(-50%) translateY(-4px); }

  /* ---------------- 开场遮罩 ---------------- */
  .overlay {
    position: fixed; inset: 0; z-index: 40;
    display: flex; align-items: center; justify-content: center;
    background: radial-gradient(ellipse at 50% 45%, rgba(10,20,34,.42), rgba(6,10,18,.88));
    transition: opacity .7s ease, visibility .7s;
  }
  .overlay.hide { opacity: 0; visibility: hidden; }
  .card {
    text-align: center; color: #fff; padding: 34px 40px;
    border-radius: 22px;
    background: rgba(14, 22, 34, .58);
    border: 1px solid rgba(255,255,255,.14);
    box-shadow: 0 24px 70px rgba(0,0,0,.5);
    backdrop-filter: blur(10px);
    max-width: min(90vw, 520px);
  }
  .card h1 {
    margin: 0 0 10px; font-size: clamp(26px, 5vw, 42px); letter-spacing: .12em;
    text-shadow: 0 0 18px rgba(120, 200, 255, .45);
  }
  .card .sub2 { margin: 0 0 22px; font-size: clamp(13px, 1.9vw, 16px); opacity: .8; line-height: 1.8; }
  #playBtn {
    font: inherit; font-weight: 800; letter-spacing: .1em;
    font-size: clamp(17px, 2.6vw, 22px);
    color: #10202f; cursor: pointer;
    padding: 13px 38px; border: none; border-radius: 999px;
    background: linear-gradient(180deg, #ffe9a8, #ffc85c);
    box-shadow: 0 10px 26px rgba(255, 200, 92, .35);
    transition: transform .18s ease, box-shadow .18s ease;
  }
  #playBtn:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 14px 34px rgba(255, 200, 92, .5); }
  #playBtn:active { transform: translateY(1px) scale(.99); }
  .tip { margin: 18px 0 0; font-size: 12.5px; opacity: .62; line-height: 1.7; }
  .warn { margin: 14px 0 0; font-size: 13px; color: #ffd28a; line-height: 1.7; }
  .warn[hidden] { display: none; }

  .badge {
    position: fixed; top: 14px; left: 14px; z-index: 30;
    color: rgba(255,255,255,.72); font-size: 12px; letter-spacing: .12em;
    padding: 7px 14px; border-radius: 999px;
    background: rgba(10,16,26,.38); border: 1px solid rgba(255,255,255,.1);
    pointer-events: none;
  }
</style>
</head>
<body>

<canvas id="stage"></canvas>
<div class="badge">机器人种花 · 3D 卡通短片</div>

<!-- 字幕条 -->
<div id="subtitle" class="subtitle"><span id="subtitleText"></span></div>

<!-- 播放遮罩 -->
<div id="overlay" class="overlay">
  <div class="card">
    <h1>机器人种花</h1>
    <p class="sub2">Three.js 三维卡通短片 · 约 60 秒 · 自动循环<br/>中文 TTS 旁白 + 实时合成音效</p>
    <button id="playBtn">▶ 播放</button>
    <p class="tip">点击后浏览器才会允许朗读中文旁白<br/>请让浏览器扬声器处于开启状态～</p>
    <p class="warn" id="ttsWarn" hidden>⚠ 当前浏览器未提供 Web Speech API，动画将以纯字幕模式播放。</p>
  </div>
</div>

<!-- 唯一外部依赖：Three.js（ES Module + importmap，版本固定） -->
<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';

/* =========================================================================
   0. 全局配置
   ========================================================================= */
const CFG = {
  sfxPeak: 0.26,       // 音效峰值音量（要求 ≤ 0.3）
  duckLevel: 0.07,     // TTS 朗读时的音效闪避音量（要求 < 0.1）
  fov: 42,
  skyDay:  { top: 0x2f8fdc, mid: 0x8fcdf2, bottom: 0xe6f6ff },
  skyDusk: { top: 0x24305e, mid: 0xf0895f, bottom: 0xffd9a8 }
};

/* =========================================================================
   1. 缓动函数
   ========================================================================= */
const clamp = (v, a, b) => (v < a ? a : v > b ? b : v);
const lerp  = (a, b, t) => a + (b - a) * t;
const easeInOutCubic = t => (t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2);
const easeOutCubic   = t => 1 - Math.pow(1 - t, 3);
const easeInCubic    = t => t * t * t;
const easeOutBack    = t => { const c1 = 1.70158, c3 = c1 + 1; return 1 + c3 * Math.pow(t - 1, 3) + c1 * Math.pow(t - 1, 2); };
const easeOutElastic = t => { if (t === 0 || t === 1) return t; const c4 = (2 * Math.PI) / 3; return Math.pow(2, -10 * t) * Math.sin((t * 10 - 0.75) * c4) + 1; };
const easeInOutSine  = t => -(Math.cos(Math.PI * t) - 1) / 2;
/** 关键帧取值：t 在 [start, start+dur] 内返回缓动后的 0..1 */
function key(t, start, dur, ease = easeInOutCubic) {
  if (dur <= 0) return t >= start ? 1 : 0;
  return ease(clamp((t - start) / dur, 0, 1));
}

/* =========================================================================
   2. Three.js 场景
   ========================================================================= */
const canvas = document.getElementById('stage');
const renderer = new THREE.WebGLRenderer({ canvas, antialias: true }.........完整代码请登录后点击上方下载按钮下载查看