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

代码语言：html

所属分类：其他

代码由glm-5.3-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, viewport-fit=cover">
<title>机器人种花 · Three.js 三维有声短片</title>
<style>
  *{margin:0;padding:0;box-sizing:border-box}
  html,body{width:100%;height:100%;overflow:hidden;background:#0a0f18;
    font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC",system-ui,sans-serif;
    -webkit-user-select:none;user-select:none}
  #stage{position:fixed;inset:0}
  #vignette{position:fixed;inset:0;pointer-events:none;z-index:10;
    background:radial-gradient(ellipse at center,transparent 52%,rgba(2,4,12,.42) 100%)}
  /* ---- 字幕条：半透明深色底 + 白色描边文字 ---- */
  #subtitle{position:fixed;left:50%;bottom:7%;z-index:12;pointer-events:none;
    max-width:min(86vw,880px);background:rgba(8,12,22,.58);
    border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:12px 28px;
    color:#fff;font-size:clamp(16px,2.4vw,23px);letter-spacing:.06em;line-height:1.5;
    text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    text-shadow:-1px -1px 1px rgba(0,0,0,.85),1px -1px 1px rgba(0,0,0,.85),
      -1px 1px 1px rgba(0,0,0,.85),1px 1px 1px rgba(0,0,0,.85),0 2px 10px rgba(0,0,0,.65);
    opacity:0;transform:translateX(-50%) translateY(14px);
    transition:opacity .32s ease,transform .32s ease;backdrop-filter:blur(4px)}
  #subtitle.show{opacity:1;transform:translateX(-50%) translateY(0)}
  #filmTitle{position:fixed;top:11%;left:0;width:100%;z-index:11;pointer-events:none;
    text-align:center;font-size:clamp(30px,6vw,58px);font-weight:700;color:#fff;
    letter-spacing:.42em;text-indent:.42em;opacity:0;transition:opacity 1.1s ease;
    text-shadow:0 2px 18px rgba(80,140,255,.55),0 1px 3px rgba(0,0,0,.8)}
  #filmTitle small{display:block;margin-top:12px;font-size:clamp(11px,1.5vw,15px);
    letter-spacing:.5em;opacity:.72;font-weight:400}
  #filmTitle.show{opacity:1}
  #fade{position:fixed;inset:0;background:#04060c;opacity:0;pointer-events:none;
    transition:opacity .65s ease;z-index:15}
  /* ---- 播放遮罩 ---- */
  #startOverlay{position:fixed;inset:0;z-index:30;display:flex;flex-direction:column;
    align-items:center;justify-content:center;gap:16px;text-align:center;padding:24px;
    color:#eaf2ff;background:radial-gradient(1200px 700px at 50% 38%,rgba(20,32,58,.72),rgba(5,8,16,.92));
    backdrop-filter:blur(3px);transition:opacity .6s ease}
  #startOverlay.hide{opacity:0;pointer-events:none}
  #startOverlay h1{font-size:clamp(34px,7vw,64px);letter-spacing:.3em;text-indent:.3em;
    font-weight:800;text-shadow:0 4px 30px rgba(90,150,255,.5)}
  #startOverlay .sub{font-size:clamp(13px,1.8vw,17px);opacity:.82;letter-spacing:.18em}
  #loadState{font-size:13px;opacity:.6;letter-spacing:.1em;min-height:18px;line-height:1.7}
  #playBtn{margin-top:8px;font-size:clamp(17px,2.2vw,21px);letter-spacing:.22em;text-indent:.1em;
    padding:15px 52px;border:none;border-radius:999px;cursor:pointer;color:#071018;font-weight:700;
    background:linear-gradient(135deg,#9df2ff 0%,#7ea6ff 60%,#b48cff 100%);
    box-shadow:0 10px 34px rgba(96,150,255,.45),inset 0 1px 0 rgba(255,255,255,.6);
    transition:transform .2s ease,box-shadow .2s ease}
  #playBtn:hover:not(:disabled){transform:translateY(-2px) scale(1.04);
    box-shadow:0 16px 44px rgba(96,150,255,.6)}
  #playBtn:disabled{opacity:.45;cursor:wait}
  #warnTTS{display:none;font-size:13px;color:#ffd27e;letter-spacing:.08em}
  .hint{font-size:12px;opacity:.45;letter-spacing:.12em;max-width:580px;line-height:1.9}
</style>
</head>
<body>
<div id="stage"></div>
<div id="vignette"></div>
<div id="filmTitle">机器人种花<small>ROBOT &amp; FLOWER · 60S SHORT</small></div>
<div id="subtitle"><span id="subText"></span></div>
<div id="fade"></div>

<div id="startOverlay">
  <h1>机器人种花</h1>
  <div class="sub">小机器人阿波的种花奇遇 · 约 60 秒 · 自动循环</div>
  <div id="loadState">正在加载 3D 引擎…</div>
  <button id="playBtn" disabled>▶ 播放短片</button>
  <div id="warnTTS">当前浏览器不支持语音合成（TTS），将只播放字幕与音效。</div>
  <div class="hint">建议使用最新版 Chrome / Edge 并开启声音；画面、字幕、旁白与音效由统一镜头状态机驱动，播完自动循环。</div>
</div>

<script type="importmap">
{
  "imports": {
    "three": "https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js"
  }
}
</script>
<script>
  /* 6 秒后仍未加载完成 → 给出网络/离线提示（唯一外部依赖是 Three.js CDN） */
  window.__filmLoaded = false;
  setTimeout(function(){
    if(!window.__filmLoaded){
      var el = document.getElementById('loadState');
      if(el) el.innerHTML = '3D 引擎加载失败：请检查网络能否访问 cdn.jsdelivr.net；<br>离线运行：下载 three.module.js 到本地，并把 importmap 中的地址改为本地路径（如 ./three.module.js）。';
    }
  }, 6000);
</script>

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

/* =========================================================
 * // Three.js 场景 //
 * ========================================================= */
const TAU = Math.PI * 2;
const $ = (id) => document.getElementById(id);
const stageEl = $('stage'), subEl = $('subtitle'), subText = $('subText');
const fadeEl = $('fade'), titleEl = $('filmTitle'), overlayEl = $('startOverlay');
const playBtn = $('playBtn'), loadState = $('loadState'), warnTTS = $('warnTTS');

const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));   // 像素比上限 2，保证性能
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;               // 柔和阴影
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 1.25;
stageEl.appendChild(renderer.domElement);

const scene = new THREE.Scene();
scene.fog = new THREE.Fog(0xc9d6dd, 17, 54);
const camera = new THREE.PerspectiveCamera(42, window.innerWidth / window.innerHeight, 0.1, 200);

/* 灯光：环境半球光 + 主方向光（投影） + 暖色点光 + 道具点光 */
const hemi = new THREE.HemisphereLight(0xeaf3f8, 0x8d8779, 1.0); scene.add(hemi);
const dirLight = new THREE.DirectionalLight(0xfff1da, 1.2);
dirLight.position.set(6, 9, 4);
dirLight.castShadow = true;
dirLight.shadow.mapSize.set(1024, 1024);
dirLight.shadow.camera.left = -12; dirLight.shadow.camera.right = 12;
dirLight.shadow.camera.top = 12;   dirLight.shadow.camera.bottom = -12;
dirLight.shadow.camera.near = 1;   dirLight.shadow.camera.far = 40;
dirLight.shadow.bias = -0.0004;    dirLight.shadow.normalBias = 0.03;
scene.add(dirLight); scene.add(dirLight.target);
const amb = new THREE.AmbientLight(0xffffff, 0.15); scene.add(amb);
const warmLight = new THREE.PointLight(0xffb36b, 0, 9, 1.5);
warmLight.position.set(0.6, 1.0, 2.2); scene.add(warmLight);

/* =========================================================
 * // 缓动函数 //（所有位移动画均经过缓动，避免线性生硬）
 * ========================================================= */
const Easing = {
  linear: t => t,
  inQuad: t => t * t,
  outQuad: t => t * (2 - t),
  inCubic: t => t * t * t,
  outCubic: t => 1 - Math.pow(1 - t, 3),
  inOutCubi.........完整代码请登录后点击上方下载按钮下载查看