<!-- Three.js 骨骼动画混合演示 - 功能描述与技术点详解
🎯 整体功能概述
这是一个基于Three.js的3D骨骼动画混合演示，展示了一个士兵角色的三种动画状态（闲置、行走、奔跑）之间的平滑过渡和控制。用户可以通过交互式控制面板调整动画参数，实现复杂的动画混合效果。

🚀 核心功能模块
1. 3D场景构建
完整的3D场景环境搭建

物理光照系统（环境光+定向光）

阴影效果实现

地面和雾效增强场景真实感

2. 骨骼动画系统
三种动画状态：

闲置动画（Idle）：角色站立状态

行走动画（Walk）：正常行走动作

奔跑动画（Run）：快速奔跑动作

动画混合：多个动画同时播放，按权重混合

平滑过渡：动画状态之间的交叉淡入淡出

3. 交互控制面板
显示控制：切换模型和骨骼的可见性

动画控制：激活/停用所有动画

播放控制：暂停/继续、单步模式

权重控制：实时调整各动画的混合权重

过渡控制：一键切换动画状态

速度控制：调整整体动画播放速度

4. 动画控制功能
权重混合：三个动画按不同比例同时播放

智能过渡：根据当前动画类型选择合适的过渡时机

时间同步：确保动画循环完成后再执行过渡

速度控制：全局和单个动画的时间缩放

🔧 主要技术点
1. Three.js核心架构
javascript
// 三层架构
场景(Scene) → 相机(Camera) → 渲染器(Renderer)

// 关键组件
- THREE.PerspectiveCamera：透视相机，模拟人眼视角
- THREE.WebGLRenderer：WebGL渲染器，硬件加速
- THREE.Scene：场景容器，管理所有3D对象
- THREE.Clock：精确的时间管理器
2. 骨骼动画系统技术
动画混合器 (AnimationMixer)
javascript
const mixer = new THREE.AnimationMixer(model);
// 作用：管理所有动画剪辑的时间轴和混合状态
// 特点：支持多个动画同时播放、时间控制、事件监听
动画动作 (AnimationAction)
javascript
const idleAction = mixer.clipAction(animations[0]);
// 功能：
// 1. 控制单个动画剪辑的播放
// 2. 设置权重(weight)、时间缩放(timeScale)
// 3. 启用/禁用、暂停/继续
// 4. 交叉淡入淡出过渡
权重混合原理
javascript
// 三个动画同时播放，最终姿势 = 加权平均
finalPose = 
    idlePose * idleWeight + 
    walkPose * walkWeight + 
    runPose * runWeight

// 权重特点：
// - 范围：0.0 到 1.0
// - 总和通常为1（归一化）
// - 权重决定动画影响力
3. 动画过渡技术
交叉淡入淡出 (Crossfading)
javascript
startAction.crossFadeTo(endAction, duration, true);
// 参数说明：
// - endAction: 目标动画
// - duration: 过渡时间（秒）
// - warp: 是否启用时间扭曲（调整播放速度以匹配）
时间同步机制
javascript
// 智能过渡策略：
if (当前动画 === 闲置动画) {
    // 立即过渡（闲置动画循环时间长）
} else {
    // 等待当前循环完成后再过渡
    // 避免在动作中途切换，保持自然性
}

// 事件监听实现：
mixer.addEventListener('loop', onLoopFinished);
4. 光照与阴影技术
多光源系统
javascript
// 1. 半球光（环境光）
THREE.HemisphereLight：模拟天空和地面的漫反射

// 2. 平行光（主光源）
THREE.DirectionalLight：模拟太阳光，投射阴影

// 阴影配置：
dirLight.castShadow = true;                    // 启用阴影投射
dirLight.shadow.camera.set(...);              // 定义阴影渲染范围
mesh.receiveShadow = true;                     // 允许接收阴影
阴影相机 (Shadow Camera)
javascript
// 阴影相机定义阴影的渲染范围
dirLight.shadow.camera = {
    top: 2,     bottom: -2,    // Y轴范围
    left: -2,   right: 2,      // X轴范围
    near: 0.1,  far: 40        // Z轴范围
};
// 作用：优化性能，只渲染必要区域的阴影
5. 性能优化技术
渲染优化
javascript
// 1. 抗锯齿
renderer = new THREE.WebGLRenderer({ antialias: true });

// 2. 设备像素比适配
renderer.setPixelRatio(window.devicePixelRatio);

// 3. 阴影优化
mesh.material.depthWrite = false;  // 地面不写入深度缓冲区
内存管理
javascript
// 事件监听器清理
mixer.removeEventListener('loop', onLoopFinished);
// 避免内存泄漏
6. 用户交互技术
GUI控制面板 (lil-gui)
javascript
const panel = new GUI({ width: 310 });
// 功能分类：
// - 折叠面板(Folders)：按功能分组
// - 实时监听(listen())：自动更新显示
// - 变化回调(onChange)：响应参数变化
// - 启用/禁用(enable/disable)：状态控制
智能控件管理
javascript
// 根据动画状态动态启用/禁用按钮
// 示例：只有行走动画激活时才显示"行走→奔跑"按钮
if (walkWeight === 1) {
    controls[2].enable();  // 启用"行走→奔跑"按钮
} else {
    controls[2].disable(); // 禁用按钮
}
7. 动画循环与时间管理
javascript
function animate() {
    // 1. 获取时间增量
    const deltaTime = clock.getDelta();
    
    // 2. 单步模式处理
    if (singleStepMode) {
        deltaTime = stepSize;  // 使用固定步长
        stepSize = 0;          // 重置，等待下次触发
    }
    
    // 3. 更新动画系统
    mixer.update(deltaTime);  // 核心：推进动画时间
    
    // 4. 渲染场景
    renderer.render(scene, camera);
    
    // 5. 性能监控
    stats.update();
}
8. 模型加载与处理
javascript
const loader = new GLTFLoader();
loader.load('models/gltf/Soldier.glb', function(gltf) {
    // 模型处理流程：
    // 1. 获取场景对象
    model = gltf.scene;
    
    // 2. 启用阴影
    model.traverse(object => {
        if (object.isMesh) object.castShadow = true;
    });
    
    // 3. 提取动画剪辑
    const animations = gltf.animations;
    
    // 4. 创建骨架辅助对象
    skeleton = new THREE.SkeletonHelper(model);
});
🎨 关键技术亮点
1. 动画混合的数学原理
线性插值：相同骨骼在不同动画间的平滑过渡

权重归一化：确保混合结果稳定

时间扭曲：调整动画播放速度以匹配过渡时间

2. 状态机设计
text
动画状态机：
闲置(1,0,0) ←→ 行走(0,1,0) ←→ 奔跑(0,0,1)

约束条件：
- 只有权重为(1,0,0)、(0,1,0)、(0,0,1)时才能过渡
- 避免无效状态组合
3. 渲染管线优化
text
渲染流程：
1. 更新动画姿势（CPU）
2. 计算骨骼矩阵（CPU）
3. 上传GPU缓冲区（CPU→GPU）
4. 顶点着色器变换（GPU）
5. 片元着色器渲染（GPU）
4. 用户体验设计
即时反馈：权重滑块实时更新动画

状态提示：按钮的启用/禁用状态

自然过渡：智能的过渡时机选择

性能指示：Stats.js显示帧率

📊 性能特性
特性	实现方式	优势
动画更新	基于时间增量	帧率无关的平滑动画
阴影渲染	阴影映射(Shadow Mapping)	实时动态阴影
内存管理	事件监听器清理	避免内存泄漏
渲染优化	视锥体裁剪	减少GPU负载
交互响应	防抖动处理	流畅的用户体验 -->


<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<!-- 页面标题：Three.js骨骼动画混合示例 -->
		<title>Three.js WebGL - 骨骼动画混合示例</title>
		
		<!-- 字符编码设置为UTF-8，支持中文显示 -->
		<meta charset="utf-8">
		
		<!-- 视口设置：禁止用户缩放，确保页面在移动设备上正确显示 -->
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		
		<!-- 外部样式表链接 -->
		<link type="text/css" rel="stylesheet" href="main.css">
		
		<!-- 内联样式：设置链接颜色为红色 -->
		<style>
			a {
				color: #f00;
			}
		</style>
	</head>
	<body>
		<!-- 渲染容器：Three.js场景将渲染到此div中 -->
		<div id="container"></div>
		
		<!-- 信息显示区域：展示项目信息和操作提示 -->
		<div id="info">
			<a href="https://threejs.org" target="_blank" rel="noopener">Three.js</a> - 骨骼动画混合演示<br/>
			(模型来源：<a href="https://www.mixamo.com/" target="_blank" rel="noopener">Mixamo.com</a>)<br/>
			<br/>
		</div>

		<!-- 导入映射表：定义模块导入路径，类似于package.json中的依赖配置 -->
		<!-- 此配置让浏览器知道如何解析ES6模块导入语句 -->
		<script type="importmap">
			{
				"imports": {
					"three": "../build/three.module.js",
					"three/addons/": "./jsm/"
				}
			}
		</script>

		<!-- 主JavaScript代码：使用ES6模块语法 -->
		<script type="module">
			// ==================== 模块导入部分 ====================
			
			// 导入Three.js核心库的所有功能
			// * as THREE表示将所有导出内容放入THREE命名空间
			import * as THREE from 'three';

			// 导入性能监视器：显示FPS、内存使用等性能指标
			import Stats from 'three/addons/libs/stats.module.js';
			
			// 导入轻量级GUI库：用于创建控制面板
			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
			
			// 导入GLTF加载器：用于加载GLTF格式的3D模型
			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';

			// ==================== 全局变量声明 ====================
			
			// Three.js核心对象
			let scene;      // 场景：所有3D对象的容器
			let renderer;   // 渲染器：将3D场景渲染到2D屏幕
			let camera;     // 相机：定义观察场景的视角
			let stats;      // 性能监视器实例
			
			// 动画相关对象
			let model;      // 3D模型对象
			let skeleton;   // 骨架辅助对象：用于可视化骨骼
			let mixer;      // 动画混合器：管理动画剪辑和混合
			let clock;      // 时钟：提供精确的时间计算
			
			// GUI控件数组：存储交叉淡入淡出相关的控制按钮
			const crossFadeControls = [];
			
			// 动画动作对象：每个动作对应一个动画剪辑
			let idleAction;   // 闲置动画
			let walkAction;   // 行走动画
			let runAction;    // 奔跑动画
			
			// 动画权重：控制每个动画在混合中的影响力（0-1）
			let idleWeight;   // 闲置动画权重
			let walkWeight;   // 行走动画权重
			let runWeight;    // 奔跑动画权重
			
			// 辅助变量
			let actions;      // 动画动作数组：[idleAction, walkAction, runAction]
			let settings;     // 控制面板设置对象
			
			// 单步模式相关
			let singleStepMode = false;   // 是否启用单步模式
			let sizeOfNextStep = 0;       // 单步模式下的时间增量（秒）

			// ==================== 初始化函数调用 ====================
			
			// 页面加载完成后立即初始化
			init();

			// ==================== 主要函数定义 ====================
			
			/**
			 * 初始化函数：Three.js应用的主入口点
			 * 创建场景、相机、光源、加载模型、设置渲染器等
			 */
			function init() {
				// 获取HTML容器元素，Three.js将在此渲染
				const container = document.getElementById( 'container' );

				// ===== 创建相机 =====
				// 透视相机：模拟人眼视角，具有近大远小的透视效果
				// 参数：视野角度(FOV)、纵横比、近裁剪面、远裁剪面
				camera = new THREE.PerspectiveCamera( 
					45,                                // 45度视野
					window.innerWidth / window.innerHeight, // 根据窗口计算纵横比
					1,                                  // 近裁剪面：1单位
					100                                 // 远裁剪面：100单位
				);
				
				// 设置相机位置：x=1（右），y=2（上），z=-3（后）
				camera.position.set( 1, 2, - 3 );
				
				// 设置相机看向的点：原点上方1单位处
				camera.lookAt( 0, 1, 0 );

				// 创建时钟对象：用于动画的时间计算
				// 提供getDelta()方法获取自上一帧以来的时间差
				clock = new THREE.Clock();

				// ===== 创建场景 =====
				scene = new THREE.Scene();
				
				// 设置场景背景色：浅灰色
				scene.background = new THREE.Color( 0xa0a0a0 );
				
				// 添加雾效：增强场景深度感
				// 参数：雾的颜色、近处开始距离、远处完全遮蔽距离
				scene.fog = new THREE.Fog( 0xa0a0a0, 10, 50 );

				// ===== 创建光源系统 =====
				
				// 1. 半球光：模拟天空和地面的环境光
				// 参数：天空颜色、地面颜色、光照强度
				const hemiLight = new THREE.HemisphereLight( 0xffffff, 0x8d8d8d, 3 );
				hemiLight.position.set( 0, 20, 0 ); // 放置在场景上方
				scene.add( hemiLight );

				// 2. 平行光：模拟太阳光，方向固定
				const dirLight = new THREE.DirectionalLight( 0xffffff, 3 );
				dirLight.position.set( - 3, 10, - 10 ); // 从左上后方照射
				dirLight.castShadow = true; // 启用阴影投射
				
				// 配置阴影相机：定义阴影的渲染范围
				dirLight.shadow.camera.top = 2;      // 顶部边界
				dirLight.shadow.camera.bottom = - 2; // 底部边界
				dirLight.shadow.camera.left = - 2;   // 左侧边界
				dirLight.shadow.camera.right = 2;    // 右侧边界
				dirLight.shadow.camera.near = 0.1;   // 近裁剪面
				dirLight.shadow.camera.far = 40;     // 远裁剪面
				scene.add( dirLight );

				// 调试辅助：显示光源的阴影相机范围（可取消注释）
				// scene.add( new THREE.CameraHelper( dirLight.shadow.camera ) );

				// ===== 创建地面 =====
				// 平面几何体：100x100单位
				const mesh = new THREE.Mesh( 
					new THREE.PlaneGeometry( 100, 100 ), 
					new THREE.MeshPhongMaterial( { 
						color: 0xcbcbcb,     // 浅灰色
						depthWrite: false    // 优化：地面不写入深度缓冲区
					} ) 
				);
				
				// 旋转平面使其水平（默认创建的平面是垂直的）
				mesh.rotation.x = - Math.PI / 2;
				
				// 启用阴影接收
				mesh.receiveShadow = true;
				scene.add( mesh );

				// ===== 加载3D模型 =====
				// 创建GLTF加载器实例
				const loader = new GLTFLoader();
				
				// 异步加载士兵模型
				loader.load( 'models/gltf/Soldier.glb', function ( gltf ) {
					// 加载成功回调函数，参数gltf包含加载的模型数据
					
					// 获取模型的主场景
					model = gltf.scene;
					
					// 将模型添加到场景中
					scene.add( model );

					// 遍历模型中的所有对象
					model.traverse( function ( object ) {
						// 如果是网格对象，启用阴影投射
						if ( object.isMesh ) object.castShadow = true;
					} );

					// ===== 创建骨架辅助对象 =====
					// SkeletonHelper用线条可视化模型的骨骼结构
					skeleton = new THREE.SkeletonHelper( model );
					skeleton.visible = false; // 默认隐藏
					scene.add( skeleton );

					// ===== 创建控制面板 =====
					createPanel();

					// ===== 设置动画系统 =====
					
					// 获取模型包含的所有动画剪辑
					const animations = gltf.animations;

					// 创建动画混合器：管理模型的动画系统
					// 参数：动画目标（模型），一个模型可以有多个混合器
					mixer = new THREE.AnimationMixer( model );

					// 从动画剪辑创建动画动作
					// clipAction方法将动画剪辑转换为可控制的动画动作
					idleAction = mixer.clipAction( animations[ 0 ] ); // 闲置动画
					walkAction = mixer.clipAction( animations[ 3 ] ); // 行走动画
					runAction = mixer.clipAction( animations[ 1 ] );  // 奔跑动画

					// 将动画动作存入数组，便于批量操作
					actions = [ idleAction, walkAction, runAction ];

					// 激活所有动画动作（设置初始权重并开始播放）
					activateAllActions();

					// ===== 启动动画循环 =====
					// setAnimationLoop替代了旧的requestAnimationFrame方式
					// 参数animate是每一帧调用的回调函数
					renderer.setAnimationLoop( animate );

				}, undefined, function ( error ) {
					// 加载失败回调函数
					console.error( '模型加载失败:', error );
				} );

				// ===== 创建渲染器 =====
				// WebGL渲染器：使用WebGL API进行硬件加速渲染
				renderer = new THREE.WebGLRenderer( { 
					antialias: true // 启用抗锯齿，使边缘更平滑
				} );
				
				// 设置设备像素比：在高DPI屏幕上提供更清晰的渲染
				renderer.setPixelRatio( window.devicePixelRatio );
				
				// 设置渲染器尺寸为整个窗口大小
				renderer.setSize( window.innerWidth, window.innerHeight );
				
				// 启用阴影映射：允许对象投射和接收阴影
				renderer.shadowMap.enabled = true;
				
				// 将渲染器的canvas元素添加到容器div中
				container.appendChild( renderer.domElement );

				// ===== 性能监视器 =====
				// 创建Stats.js实例，显示FPS、渲染时间等性能指标
				stats = new Stats();
				
				// 将性能监视器的DOM元素添加到容器中
				// 默认显示在左上角，点击可切换显示不同指标
				container.appendChild( stats.dom );

				// ===== 事件监听器 =====
				// 监听窗口大小变化事件，自适应调整渲染尺寸
				window.addEventListener( 'resize', onWindowResize );
			}

			/**
			 * 创建控制面板函数
			 * 使用lil-gui库创建交互式控制面板
			 * 面板分为多个折叠区域，控制不同的动画参数
			 */
			function createPanel() {
				// 创建GUI面板实例，设置宽度为310像素
				const panel = new GUI( { width: 310 } );

				// 创建多个折叠区域（文件夹），按功能分类
				const folder1 = panel.addFolder( '显示控制' );        // 可见性设置
				const folder2 = panel.addFolder( '动画激活/停用' );   // 动画开关
				const folder3 = panel.addFolder( '暂停/单步模式' );   // 播放控制
				const folder4 = panel.addFolder( '动画过渡' );        // 动画混合
				const folder5 = panel.addFolder( '混合权重' );        // 权重调整
				const folder6 = panel.addFolder( '动画速度' );        // 时间控制

				/**
				 * 设置对象：包含所有可通过GUI控制的参数
				 * 每个属性对应一个GUI控件
				 */
				settings = {
					// === 显示控制 ===
					'显示模型': true,      // 布尔值：显示/隐藏模型
					'显示骨骼': false,     // 布尔值：显示/隐藏骨架
					
					// === 动画控制 ===
					'停用所有动画': deactivateAllActions, // 函数：停止所有动画
					'激活所有动画': activateAllActions,   // 函数：播放所有动画
					
					// === 播放控制 ===
					'暂停/继续': pauseContinue,           // 函数：切换暂停状态
					'单步模式': toSingleStepMode,         // 函数：进入单步播放模式
					'单步步长': 0.05,                     // 数值：单步模式的时间增量
					
					// === 动画过渡函数 ===
					// 这些函数在不同动画状态之间创建平滑过渡
					'行走 → 闲置': function () {
						// 从行走动画过渡到闲置动画
						prepareCrossFade( walkAction, idleAction, 1.0 );
					},
					'闲置 → 行走': function () {
						// 从闲置动画过渡到行走动画
						prepareCrossFade( idleAction, walkAction, 0.5 );
					},
					'行走 → 奔跑': function () {
						// 从行走动画过渡到奔跑动画
						prepareCrossFade( walkAction, runAction, 2.5 );
					},
					'奔跑 → 行走': function () {
						// 从奔跑动画过渡到行走动画
						prepareCrossFade( runAction, walkAction, 5.0 );
					},
					
					// === 过渡时间控制 ===
					'使用默认过渡时间': true,   // 布尔值：是否使用预设过渡时间
					'自定义过渡时间': 3.5,      // 数值：自定义过渡时间（秒）
					
					// === 动画权重 ===
					// 权重范围0-1，控制动画在混合中的影响力
					'闲置动画权重': 0.0,        // 初始值：0（不播放）
					'行走动画权重': 1.0,        // 初始值：1（完全播放）
					'奔跑动画权重': 0.0,        // 初始值：0（不播放）
					
					// === 时间缩放 ===
					'时间缩放系数': 1.0         // 数值：控制整体动画速度
				};

				// ===== 添加控件到各个文件夹 =====
				
				// 1. 显示控制文件夹
				// add方法参数：设置对象、属性名、可选参数（最小值、最大值、步长）
				folder1.add( settings, '显示模型' ).onChange( showModel );
				folder1.add( settings, '显示骨骼' ).onChange( showSkeleton );
				
				// 2. 动画控制文件夹
				folder2.add( settings, '停用所有动画' );
				folder2.add( settings, '激活所有动画' );
				
				// 3. 播放控制文件夹
				folder3.add( settings, '暂停/继续' );
				folder3.add( settings, '单步模式' );
				folder3.add( settings, '单步步长', 0.01, 0.1, 0.001 );
				
				// 4. 动画过渡文件夹
				// 将过渡控件添加到数组，便于后续启用/禁用控制
				crossFadeControls.push( folder4.add( settings, '行走 → 闲置' ) );
				crossFadeControls.push( folder4.add( settings, '闲置 → 行走' ) );
				crossFadeControls.push( folder4.add( settings, '行走 → 奔跑' ) );
				crossFadeControls.push( folder4.add( settings, '奔跑 → 行走' ) );
				folder4.add( settings, '使用默认过渡时间' );
				folder4.add( settings, '自定义过渡时间', 0, 10, 0.01 );
				
				// 5. 混合权重文件夹
				// .listen()表示控件会监听值的变化并自动更新显示
				// .onChange()指定值变化时的回调函数
				folder5.add( settings, '闲置动画权重', 0.0, 1.0, 0.01 )
					.listen()  // 监听值变化
					.onChange( function ( weight ) {
						setWeight( idleAction, weight );
					} );
				
				folder5.add( settings, '行走动画权重', 0.0, 1.0, 0.01 )
					.listen()
					.onChange( function ( weight ) {
						setWeight( walkAction, weight );
					} );
				
				folder5.add( settings, '奔跑动画权重', 0.0, 1.0, 0.01 )
					.listen()
					.onChange( function ( weight ) {
						setWeight( runAction, weight );
					} );
				
				// 6. 动画速度文件夹
				folder6.add( settings, '时间缩放系数', 0.0, 1.5, 0.01 )
					.onChange( modifyTimeScale );

				// ===== 默认展开所有文件夹 =====
				folder1.open();
				folder2.open();
				folder3.open();
				folder4.open();
				folder5.open();
				folder6.open();
			}

			/**
			 * 显示/隐藏模型
			 * @param {boolean} visibility - true显示模型，false隐藏模型
			 */
			function showModel( visibility ) {
				model.visible = visibility;
			}

			/**
			 * 显示/隐藏骨骼
			 * @param {boolean} visibility - true显示骨骼，false隐藏骨骼
			 */
			function showSkeleton( visibility ) {
				skeleton.visible = visibility;
			}

			/**
			 * 修改时间缩放系数
			 * 控制所有动画的整体播放速度
			 * @param {number} speed - 时间缩放系数（0-1.5）
			 */
			function modifyTimeScale( speed ) {
				// mixer.timeScale影响混合器中所有动画的播放速度
				mixer.timeScale = speed;
			}

			/**
			 * 停用所有动画动作
			 * 停止所有动画的播放，但保留当前状态
			 */
			function deactivateAllActions() {
				// 遍历所有动画动作，调用stop方法
				actions.forEach( function ( action ) {
					action.stop(); // 停止动画，但不会重置时间
				} );
			}

			/**
			 * 激活所有动画动作
			 * 根据当前权重设置播放所有动画
			 */
			function activateAllActions() {
				// 1. 根据GUI中的权重设置更新动画权重
				setWeight( idleAction, settings[ '闲置动画权重' ] );
				setWeight( walkAction, settings[ '行走动画权重' ] );
				setWeight( runAction, settings[ '奔跑动画权重' ] );

				// 2. 播放所有动画动作
				actions.forEach( function ( action ) {
					action.play(); // 开始播放动画
				} );
			}

			/**
			 * 暂停/继续动画播放
			 * 切换所有动画的暂停状态
			 */
			function pauseContinue() {
				if ( singleStepMode ) {
					// 如果当前是单步模式，退出单步模式并取消暂停
					singleStepMode = false;
					unPauseAllActions();
				} else {
					// 检查闲置动画的暂停状态作为参考
					if ( idleAction.paused ) {
						// 如果已暂停，取消所有动画的暂停
						unPauseAllActions();
					} else {
						// 如果未暂停，暂停所有动画
						pauseAllActions();
					}
				}
			}

			/**
			 * 暂停所有动画动作
			 * 冻结当前动画状态
			 */
			function pauseAllActions() {
				actions.forEach( function ( action ) {
					action.paused = true; // 设置暂停标志
				} );
			}

			/**
			 * 取消暂停所有动画动作
			 * 恢复动画播放
			 */
			function unPauseAllActions() {
				actions.forEach( function ( action ) {
					action.paused = false; // 清除暂停标志
				} );
			}

			/**
			 * 进入单步模式
			 * 在此模式下，动画每帧只前进固定时间增量
			 */
			function toSingleStepMode() {
				unPauseAllActions(); // 确保所有动画未暂停
				singleStepMode = true; // 启用单步模式标志
				sizeOfNextStep = settings[ '单步步长' ]; // 设置下一步的时间增量
			}

			/**
			 * 准备动画过渡（交叉淡入淡出）
			 * 这是动画混合的核心函数，实现平滑动画切换
			 * @param {THREE.AnimationAction} startAction - 开始动画动作
			 * @param {THREE.AnimationAction} endAction - 结束动画动作
			 * @param {number} defaultDuration - 默认过渡时间（秒）
			 */
			function prepareCrossFade( startAction, endAction, defaultDuration ) {
				// 1. 确定过渡持续时间（使用默认值或用户自定义值）
				const duration = setCrossFadeDuration( defaultDuration );

				// 2. 确保退出单步模式，并取消所有动画的暂停
				singleStepMode = false;
				unPauseAllActions();

				// 3. 根据当前动画类型决定过渡策略
				// 如果是闲置动画（循环时间较长），立即执行过渡
				// 如果是其他动画，等待当前循环完成再执行过渡
				if ( startAction === idleAction ) {
					executeCrossFade( startAction, endAction, duration );
				} else {
					synchronizeCrossFade( startAction, endAction, duration );
				}
			}

			/**
			 * 设置过渡持续时间
			 * @param {number} defaultDuration - 默认过渡时间
			 * @returns {number} 实际使用的过渡时间
			 */
			function setCrossFadeDuration( defaultDuration ) {
				// 根据用户选择返回对应的过渡时间
				if ( settings[ '使用默认过渡时间' ] ) {
					return defaultDuration; // 使用预设的默认时间
				} else {
					return settings[ '自定义过渡时间' ]; // 使用用户自定义时间
				}
			}

			/**
			 * 同步过渡：等待当前动画循环完成后再执行过渡
			 * 确保动画过渡不会在动作中途发生，保持自然性
			 * @param {THREE.AnimationAction} startAction - 开始动画
			 * @param {THREE.AnimationAction} endAction - 结束动画
			 * @param {number} duration - 过渡持续时间
			 */
			function synchronizeCrossFade( startAction, endAction, duration ) {
				// 添加循环事件监听器：监听动画循环完成事件
				mixer.addEventListener( 'loop', onLoopFinished );

				/**
				 * 循环完成事件处理函数
				 * @param {Object} event - 动画事件对象
				 */
				function onLoopFinished( event ) {
					// 检查是否是开始动画的循环完成
					if ( event.action === startAction ) {
						// 移除事件监听器，避免重复执行
						mixer.removeEventListener( 'loop', onLoopFinished );
						
						// 执行实际的动画过渡
						executeCrossFade( startAction, endAction, duration );
					}
				}
			}

			/**
			 * 执行动画过渡
			 * 使用Three.js内置的crossFadeTo方法实现动画混合
			 * @param {THREE.AnimationAction} startAction - 开始动画
			 * @param {THREE.AnimationAction} endAction - 结束动画
			 * @param {number} duration - 过渡持续时间
			 */
			function executeCrossFade( startAction, endAction, duration ) {
				// 1. 确保结束动画的权重为1（完全影响力）
				setWeight( endAction, 1 );
				
				// 2. 将结束动画的时间重置为0（从头开始）
				endAction.time = 0;

				// 3. 执行交叉淡入淡出
				// crossFadeTo方法参数：目标动作、过渡时间、是否启用时间扭曲
				// 时间扭曲（warping）调整播放速度以确保平滑过渡
				startAction.crossFadeTo( endAction, duration, true );
			}

			/**
			 * 设置动画动作的权重
			 * 权重控制动画在混合中的影响力（0=无影响，1=完全影响）
			 * @param {THREE.AnimationAction} action - 动画动作
			 * @param {number} weight - 权重值（0-1）
			 */
			function setWeight( action, weight ) {
				action.enabled = true; // 确保动画启用
				action.setEffectiveTimeScale( 1 ); // 重置时间缩放为正常速度
				action.setEffectiveWeight( weight ); // 设置有效权重
			}

			/**
			 * 更新权重滑块的值
			 * 从动画动作获取当前权重并更新GUI显示
			 * 由渲染循环每帧调用
			 */
			function updateWeightSliders() {
				// 从动画动作获取当前有效权重
				settings[ '闲置动画权重' ] = idleWeight;
				settings[ '行走动画权重' ] = walkWeight;
				settings[ '奔跑动画权重' ] = runWeight;
			}

			/**
			 * 更新过渡控件的启用/禁用状态
			 * 根据当前激活的动画，只显示相关的过渡选项
			 * 避免无效的状态切换（如从闲置过渡到闲置）
			 */
			function updateCrossFadeControls() {
				// 情况1：只有闲置动画激活（权重1,0,0）
				if ( idleWeight === 1 && walkWeight === 0 && runWeight === 0 ) {
					crossFadeControls[ 0 ].disable(); // 禁用"行走 → 闲置"
					crossFadeControls[ 1 ].enable();  // 启用"闲置 → 行走"
					crossFadeControls[ 2 ].disable(); // 禁用"行走 → 奔跑"
					crossFadeControls[ 3 ].disable(); // 禁用"奔跑 → 行走"
				}

				// 情况2：只有行走动画激活（权重0,1,0）
				if ( idleWeight === 0 && walkWeight === 1 && runWeight === 0 ) {
					crossFadeControls[ 0 ].enable();  // 启用"行走 → 闲置"
					crossFadeControls[ 1 ].disable(); // 禁用"闲置 → 行走"
					crossFadeControls[ 2 ].enable();  // 启用"行走 → 奔跑"
					crossFadeControls[ 3 ].disable(); // 禁用"奔跑 → 行走"
				}

				// 情况3：只有奔跑动画激活（权重0,0,1）
				if ( idleWeight === 0 && walkWeight === 0 && runWeight === 1 ) {
					crossFadeControls[ 0 ].disable(); // 禁用"行走 → 闲置"
					crossFadeControls[ 1 ].disable(); // 禁用"闲置 → 行走"
					crossFadeControls[ 2 ].disable(); // 禁用"行走 → 奔跑"
					crossFadeControls[ 3 ].enable();  // 启用"奔跑 → 行走"
				}
			}

			/**
			 * 窗口大小变化事件处理函数
			 * 自适应调整渲染器和相机
			 */
			function onWindowResize() {
				// 1. 更新相机纵横比，防止图像拉伸
				camera.aspect = window.innerWidth / window.innerHeight;
				
				// 2. 更新相机的投影矩阵（必须调用此方法使更改生效）
				camera.updateProjectionMatrix();

				// 3. 更新渲染器尺寸，填满整个窗口
				renderer.setSize( window.innerWidth, window.innerHeight );
			}

			/**
			 * 动画循环函数
			 * 每帧调用，更新动画状态并渲染场景
			 * 这是Three.js应用的核心循环
			 */
			function animate() {
				// ===== 1. 获取当前权重值 =====
				// 从动画动作获取当前有效权重（考虑混合和淡入淡出效果）
				idleWeight = idleAction.getEffectiveWeight();
				walkWeight = walkAction.getEffectiveWeight();
				runWeight = runAction.getEffectiveWeight();

				// ===== 2. 更新GUI显示 =====
				// 将当前权重值同步到控制面板的滑块
				updateWeightSliders();

				// ===== 3. 更新控件状态 =====
				// 根据当前动画状态启用/禁用过渡按钮
				updateCrossFadeControls();

				// ===== 4. 计算时间增量 =====
				// 获取自上一帧以来经过的时间（秒）
				let mixerUpdateDelta = clock.getDelta();

				// ===== 5. 处理单步模式 =====
				// 如果是单步模式，使用预设的步长，并将步长重置为0
				if ( singleStepMode ) {
					mixerUpdateDelta = sizeOfNextStep; // 使用单步步长
					sizeOfNextStep = 0; // 重置，等待下一次单步指令
				}

				// ===== 6. 更新动画系统 =====
				// 这是最重要的步骤：更新动画混合器
				// 参数deltaTime告诉混合器应该前进多少时间
				mixer.update( mixerUpdateDelta );

				// ===== 7. 渲染场景 =====
				// 将3D场景渲染到2D画布上
				// 参数：场景（包含所有对象）、相机（定义观察视角）
				renderer.render( scene, camera );

				// ===== 8. 更新性能监视器 =====
				// 更新FPS、渲染时间等性能指标显示
				stats.update();
			}
		</script>
	</body>
</html>