<!-- Three.js WebGPU动画重定向示例 - 详细功能描述与技术分析
🎯 核心功能概述
这是一个基于Three.js WebGPU的动画重定向技术演示，实现了将一个女性角色（Michelle）的骨骼动画应用到不同体型和结构的男性士兵模型（Soldier）上。该示例展示了先进的3D动画数据复用技术，允许不同模型共享同一套动画数据。

🚀 主要功能模块
1. 动画重定向系统
源模型提供动画：Michelle模型提供原始骨骼动画数据

目标模型接收动画：Soldier模型接收并适配这些动画

跨模型适配：解决不同体型、骨骼结构、比例和朝向的适配问题

实时动画同步：两个模型同步播放动画，直观展示重定向效果

2. 动态视觉环境
着色器生成背景：使用Three.js着色器语言（TSL）实时生成动态背景

光速视觉效果：创建随时间变化的光线流动效果

反射地面：半透明反射地面增强场景真实感和空间感

多层次照明：结合环境光和定向光创建自然的照明环境

3. 交互式3D查看器
轨道相机控制：支持旋转、缩放和平移场景

实时调试工具：内置Inspector可查看和修改场景参数

辅助视觉化：可切换显示骨骼帮助器

响应式设计：自动适应窗口大小变化

💡 核心技术亮点
1. WebGPU渲染技术
下一代图形API：替代WebGL，提供更好的性能和更现代的GPU特性

计算着色器支持：为复杂效果提供GPU加速计算

改进的渲染管线：更高效的命令提交和资源管理

跨平台兼容性：支持现代浏览器和多种操作系统

2. 动画重定向算法
javascript
// 核心重定向流程
1. 骨骼映射：建立源模型和目标模型骨骼对应关系
2. 矩阵变换：应用局部偏移矩阵修正骨骼方向
3. 比例适配：补偿模型大小差异
4. 动画适配：将源动画关键帧转换到目标骨骼空间
3. Three.js着色器语言（TSL）
声明式着色器编程：在JavaScript中直接编写着色器逻辑

节点化材质系统：通过连接节点构建复杂材质

实时编译优化：运行时编译为高效WebGL/WebGPU着色器

类型安全：TypeScript风格的类型检查

4. 骨骼动画系统
Hierarchical骨骼结构：父子关系的骨骼层次

蒙皮网格：顶点权重绑定到多个骨骼

关键帧插值：在关键帧之间平滑过渡

动画混合：支持多个动画同时播放和混合

🛠 关键技术实现
1. 资源加载与管理
javascript
// 并行加载多个GLTF模型
const [sourceModel, targetModel] = await Promise.all([
  loadModel('Michelle.glb'),  // 动画提供者
  loadModel('Soldier.glb')    // 动画接收者
]);
2. 着色器效果链
text
屏幕UV坐标
    ↓
极坐标转换
    ↓
多重波形叠加（产生动态偏移）
    ↓
光线效果合成
    ↓
颜色混合与最终输出
3. 动画数据处理流程
text
源动画数据 → 骨骼映射 → 矩阵变换 → 比例调整 → 目标动画
    │           │          │           │
骨骼名称映射   方向修正    大小适配    动画剪辑生成
4. 渲染管线优化
实例化渲染：高效渲染重复几何体

延迟渲染准备：为复杂光照效果做准备

GPU资源重用：最大化硬件利用率

动态LOD系统：根据距离调整细节级别

🎨 视觉效果特色
1. 背景着色器效果
动态渐晕：中心到边缘的颜色渐变变化

波形光线：模拟光速流动的视觉特效

时间驱动：所有效果随时间动态变化

颜色混合：多层效果叠加产生丰富视觉层次

2. 场景照明设计
半球环境光：模拟天空和地面的环境反射

定向主光源：提供主要照明和阴影方向

反射地面：增加场景深度和真实感

色调映射：NeutralToneMapping保持颜色自然

3. 模型表现优化
适当缩放：调整模型比例保证视觉协调

合理布局：并排展示便于对比观察

骨骼可视化：可选显示帮助理解动画机制

流畅动画：60fps流畅播放保证观看体验

🔧 开发工具与调试
1. 调试功能
实时Inspector：查看和修改场景对象属性

骨架可视化：直观显示骨骼结构和动画状态

性能监控：内置渲染性能统计

GUI控制：无需代码修改场景参数

2. 开发便利性
模块化导入：ES6模块系统组织代码

热重载支持：开发时快速迭代

错误处理：完善的加载和运行时错误处理

文档集成：代码注释与Three.js文档对应

📊 性能优化策略
1. 加载优化
并行加载：同时加载多个资源减少等待时间

按需加载：只加载必要资源

缓存复用：共享材质和几何体

2. 渲染优化
剔除优化：视锥体和遮挡剔除

批处理：合并绘制调用减少开销

GPU优化：充分利用WebGPU并行能力

内存管理：及时释放不再使用的资源

🎯 应用场景与价值
1. 游戏开发
角色动画复用，减少动画制作成本

多角色共享动画库

用户自定义角色动画支持

2. 影视与动画
预演动画快速测试

不同角色模型动画适配

动画师工作效率提升

3. 虚拟现实/增强现实
实时角色动画生成

用户化身动画适配

交互式动画演示

4. 教育与培训
解剖学动画教学

运动分析演示

3D动画原理教学

🔮 技术发展趋势
AI驱动动画：结合机器学习生成更自然动画

实时动作捕捉：Webcam或传感器驱动实时动画

跨平台共享：统一动画格式支持多平台

物理模拟集成：结合物理引擎增强动画真实感 -->


<html lang="zh-CN">
	<head>
		<title>Three.js WebGPU - 动画重定向演示</title>
		<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="example.css">
	</head>
	<body>

		<!-- 页面信息显示区域：显示标题、链接和描述信息 -->
		<div id="info">
			<!-- Three.js官网链接，点击Logo可访问 -->
			<a href="https://threejs.org/" target="_blank" rel="noopener" class="logo-link"></a>

			<!-- 标题区域：包含主标题和子标题 -->
			<div class="title-wrapper">
				<a href="https://threejs.org/" target="_blank" rel="noopener">Three.js</a>
				<span>动画重定向技术演示</span>
			</div>

			<!-- 详细描述区域：解释演示的核心功能 -->
			<small>
				本示例演示了如何使用Three.js的动画重定向功能。<br>
				将女性角色(Michelle)的骨骼动画应用到男性士兵(Soldier)模型上。<br>
				展示了不同体型和骨骼结构的模型之间动画数据传递的技术实现。<br>
				使用WebGPU渲染器提供高性能的实时图形渲染。
			</small>
		</div>

		<!-- 导入映射配置：定义JavaScript模块的导入路径和别名 -->
		<!-- 这些配置告诉浏览器在哪里可以找到各个模块 -->
		<script type="importmap">
			{
				"imports": {
					"three": "../build/three.webgpu.js",
					"three/webgpu": "../build/three.webgpu.js",
					"three/tsl": "../build/three.tsl.js",
					"three/addons/": "./jsm/"
				}
			}
		</script>

		<script type="module">

			// ============================================
			// 模块导入区域
			// ============================================
			
			// 导入Three.js核心模块（使用WebGPU后端）
			// WebGPU是新一代的图形API，比WebGL性能更好，功能更强大
			import * as THREE from 'three/webgpu';
			
			// 导入Three.js着色器语言(TSL)函数
			// TSL是Three.js的着色器编程语言，允许在JavaScript中编写着色器
			// color: 创建颜色值
			// screenUV: 获取屏幕UV坐标（范围0-1）
			// hue: 调整色调
			// reflector: 创建反射效果
			// time: 获取着色器运行时间
			// Fn: 创建自定义着色器函数
			// vec2, vec3: 创建2D/3D向量
			// sin, cos: 三角函数
			// length, atan: 数学函数
			// blendDodge: 颜色减淡混合模式
			import { color, screenUV, hue, reflector, time, Fn, vec2, length, atan, float, sin, cos, vec3, sub, mul, pow, blendDodge, normalWorldGeometry } from 'three/tsl';

			// 导入Three.js附加组件
			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';  // 轨道控制器，用于相机控制
			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';          // GLTF模型加载器
			import { Inspector } from 'three/addons/inspector/Inspector.js';          // 调试检查器，用于可视化调试
			
			// 导入骨骼工具集，包含动画重定向等实用功能
			import * as SkeletonUtils from 'three/addons/utils/SkeletonUtils.js';

			// ============================================
			// 资源加载区域
			// ============================================
			
			// 使用Promise.all同时加载两个GLTF模型
			// 这种方法可以并行加载，提高加载效率
			const [ sourceModel, targetModel ] = await Promise.all( [

				// 加载源模型：Michelle（女性角色，包含动画数据）
				// 这个模型将提供动画数据
				new Promise( ( resolve, reject ) => {
					// GLTFLoader用于加载glTF格式的3D模型
					// glTF是3D模型的"JPEG格式"，广泛用于Web 3D应用
					new GLTFLoader().load( './models/gltf/Michelle.glb', 
						resolve,      // 加载成功时的回调
						undefined,    // 进度回调（未使用）
						reject        // 加载失败时的回调
					);
				} ),

				// 加载目标模型：Soldier（男性士兵模型）
				// 这个模型将接收来自源模型的动画数据
				new Promise( ( resolve, reject ) => {
					new GLTFLoader().load( './models/gltf/Soldier.glb', resolve, undefined, reject );
				} )

			] );

			// ============================================
			// 动画和着色器初始化
			// ============================================
			
			// 创建Three.js时钟对象
			// 用于跟踪时间，控制动画更新
			const clock = new THREE.Clock();

			// 定义自定义着色器函数：光速效果
			// 这是一个复杂的着色器效果，模拟光速运动的光线
			export const lightSpeed = /*#__PURE__*/ Fn( ( [ suv_immutable ] ) => {
				// suv_immutable是输入的屏幕UV坐标（不可变）
				// 转换为可变向量以便操作
				const suv = vec2( suv_immutable );
				
				// 将直角坐标转换为极坐标
				// length(suv): 计算到屏幕中心的距离（半径）
				// atan(suv.y, suv.x): 计算角度（弧度）
				const uv = vec2( length( suv ), atan( suv.y, suv.x ) );
				
				// 创建动态偏移量，通过多个三角函数叠加产生复杂的变化模式
				// 这种技术常用于创建自然的有机运动
				const offset = float( 
					float( .1 )  // 基础幅度
					.mul( sin( uv.y.mul( 10. ).sub( time.mul( .6 ) ) ) )  // 低频正弦波
					.mul( cos( uv.y.mul( 48. ).add( time.mul( .3 ) ) ) )  // 中频余弦波
					.mul( cos( uv.y.mul( 3.7 ).add( time ) ) )            // 低频余弦波
				);
				
				// 创建光线效果，组合多个波形函数
				// 每个乘法都增加一层复杂度，产生丰富的光线变化
				const rays = vec3( 
					vec3( sin( uv.y.mul( 150. ).add( time ) ).mul( .5 ).add( .5 ) )  // 高频正弦波，产生快速闪烁
					.mul( vec3( sin( uv.y.mul( 80. ).sub( time.mul( 0.6 ) ) ).mul( .5 ).add( .5 ) ) )  // 中频正弦波
					.mul( vec3( sin( uv.y.mul( 45. ).add( time.mul( 0.8 ) ) ).mul( .5 ).add( .5 ) ) )  // 低频正弦波
					.mul( vec3( sub( 1., cos( 
						uv.y.add( 
							mul( 22., time )  // 随时间移动
							.sub( pow( uv.x.add( offset ), .3 ).mul( 60. ) )  // 距离衰减
						) 
					) ) ) )
					.mul( vec3( uv.x.mul( 2. ) ) )  // 径向衰减
				);
				
				// 返回最终的光线颜色
				return rays;
			} ).setLayout( {
				// 设置着色器函数的元数据
				name: 'lightSpeed',      // 函数名
				type: 'vec3',            // 返回值类型（3D向量，代表RGB颜色）
				inputs: [
					{ name: 'suv', type: 'vec2' }  // 输入参数：屏幕UV坐标
				]
			} );

			// ============================================
			// 场景构建
			// ============================================
			
			// 创建主场景对象
			// 场景是所有3D对象的容器，包括模型、灯光、相机等
			const scene = new THREE.Scene();

			// 创建动态背景效果（使用节点材质系统）
			// 节点材质系统允许通过连接节点来创建复杂的着色器效果
			
			// 1. 创建彩色渐晕效果
			// 渐晕效果是图像边缘变暗的视觉效果，常用于聚焦视线
			// screenUV.distance(.5): 计算每个像素到屏幕中心的距离
			// .mix(): 在两个颜色之间混合
			const coloredVignette = screenUV.distance( .5 )
				.mix( 
					hue( color( 0x0175ad ), time.mul( .1 ) ),  // 颜色1：随时间变化的蓝色
					hue( color( 0x02274f ), time.mul( .5 ) )   // 颜色2：随时间变化的深蓝色
				);
			
			// 2. 应用光速效果
			// normalWorldGeometry: 世界空间中的法线向量
			// .clamp(): 将值限制在0-1范围内
			const lightSpeedEffect = lightSpeed( normalWorldGeometry ).clamp();
			
			// 3. 创建天空光速效果
			// remapClamp(): 重新映射并限制值范围
			// 这里基于几何的Y坐标（高度）混合效果
			const lightSpeedSky = normalWorldGeometry.y
				.remapClamp( - .1, 1 )  // 将Y坐标从[-0.1, 1]映射到[0, 1]
				.mix( 0, lightSpeedEffect );  // 混合黑色和光速效果
			
			// 4. 组合两种效果
			// blendDodge: 使用颜色减淡混合模式
			// 这种混合模式会使图像变亮，产生发光效果
			const composedBackground = blendDodge( coloredVignette, lightSpeedSky );
			
			// 将组合背景设置为场景的背景
			// 这使得背景成为场景渲染的一部分，而不是静态图像
			scene.backgroundNode = composedBackground;

			// ============================================
			// 辅助对象和灯光设置
			// ============================================
			
			// 创建辅助对象组
			// 辅助对象包括骨架帮助器、网格等，用于调试和可视化
			const helpers = new THREE.Group();
			helpers.visible = false;  // 默认隐藏，可通过GUI控制显示
			scene.add( helpers );

			// 添加半球光（环境光）
			// 半球光模拟天空和地面的环境光照
			// 参数：天空颜色，地面颜色，光照强度
			const light = new THREE.HemisphereLight( 0xe9c0a5, 0x0175ad, 5 );
			scene.add( light );

			// 添加定向光（平行光）
			// 定向光模拟太阳光，所有光线平行
			// 参数：颜色，光照强度
			const dirLight = new THREE.DirectionalLight( 0xfff9ea, 4 );
			dirLight.position.set( 2, 5, 2 );  // 设置光源位置
			scene.add( dirLight );

			// ============================================
			// 相机设置
			// ============================================
			
			// 创建透视相机
			// 参数：视野角度(FOV)，宽高比，近裁剪面，远裁剪面
			const camera = new THREE.PerspectiveCamera( 
				40,                            // 40度视野
				window.innerWidth / window.innerHeight,  // 根据窗口大小计算宽高比
				.25,                           // 近裁剪面：0.25单位
				50                             // 远裁剪面：50单位
			);
			camera.position.set( 0, 1, 4 );  // 设置相机初始位置

			// ============================================
			// 模型处理和动画重定向
			// ============================================
			
			// 将加载的模型添加到场景
			scene.add( sourceModel.scene );  // 添加源模型
			scene.add( targetModel.scene );  // 添加目标模型

			// 重新定位模型位置，使它们在场景中并排显示
			sourceModel.scene.position.x -= .8;  // 源模型向左移动0.8单位
			targetModel.scene.position.x += .7;  // 目标模型向右移动0.7单位
			targetModel.scene.position.z -= .1;  // 目标模型向后微调0.1单位

			// 调整目标模型大小
			// Soldier模型需要缩放，因为它的原始尺寸与Michelle模型不同
			targetModel.scene.scale.setScalar( .01 );  // 缩小到原来的1%

			// 旋转模型使它们面向正确方向
			// 不同的模型可能有不同的初始朝向
			sourceModel.scene.rotation.y = Math.PI / 2;    // 源模型顺时针旋转90度
			targetModel.scene.rotation.y = - Math.PI / 2;  // 目标模型逆时针旋转90度

			// 执行动画重定向
			// 1. 获取源模型的动画数据
			const source = getSource( sourceModel );
			
			// 2. 将动画重定向到目标模型
			// retargetModel函数返回目标模型的动画混合器
			const mixer = retargetModel( source, targetModel );

			// ============================================
			// 地面和反射效果
			// ============================================
			
			// 创建反射效果
			// reflector()创建反射材质节点，可以反射场景中的对象
			const reflection = reflector();
			
			// 旋转反射目标使其水平（作为地面）
			reflection.target.rotateX( - Math.PI / 2 );  // 绕X轴旋转-90度
			scene.add( reflection.target );

			// 创建地面材质（使用节点材质系统）
			const floorMaterial = new THREE.NodeMaterial();
			floorMaterial.colorNode = reflection;  // 使用反射作为颜色
			floorMaterial.opacity = .2;            // 设置透明度为20%
			floorMaterial.transparent = true;      // 启用透明度

			// 创建地面网格
			// 使用薄盒子几何体作为地面
			const floor = new THREE.Mesh( 
				new THREE.BoxGeometry( 50, .001, 50 ),  // 宽50，高0.001，深50（非常薄）
				floorMaterial 
			);
			floor.receiveShadow = true;  // 启用阴影接收
			floor.position.set( 0, 0, 0 );
			scene.add( floor );

			// ============================================
			// 渲染器设置
			// ============================================
			
			// 创建WebGPU渲染器
			// WebGPU是新一代Web图形API，性能优于WebGL
			const renderer = new THREE.WebGPURenderer( { 
				antialias: true  // 启用抗锯齿，平滑边缘
			} );
			
			// 设置渲染器参数
			renderer.setPixelRatio( window.devicePixelRatio );  // 匹配设备像素比
			renderer.setSize( window.innerWidth, window.innerHeight );  // 设置渲染尺寸
			renderer.setAnimationLoop( animate );  // 设置动画循环回调函数
			renderer.toneMapping = THREE.NeutralToneMapping;  // 使用中性色调映射
			
			// 创建调试检查器
			// 检查器允许在运行时查看和修改场景参数
			renderer.inspector = new Inspector();
			
			// 将渲染器的DOM元素（canvas画布）添加到页面
			document.body.appendChild( renderer.domElement );

			// ============================================
			// 用户交互控制
			// ============================================
			
			// 创建轨道控制器
			// 允许用户通过鼠标/触摸控制相机
			const controls = new OrbitControls( camera, renderer.domElement );
			controls.minDistance = 3;      // 最小缩放距离
			controls.maxDistance = 12;     // 最大缩放距离
			controls.target.set( 0, 1, 0 );  // 设置控制器的焦点位置
			controls.maxPolarAngle = Math.PI / 2;  // 限制垂直旋转角度（防止相机翻转）

			// 创建GUI控制面板
			// 允许用户在界面上调整场景参数
			const gui = renderer.inspector.createParameters( '场景设置' );
			gui.add( helpers, 'visible' ).name( '显示辅助对象' );  // 添加控制项：显示/隐藏辅助对象

			// ============================================
			// 功能函数定义
			// ============================================

			/**
			 * 获取源模型的动画和骨架数据
			 * 这个函数从加载的GLTF模型中提取动画信息
			 * 
			 * @param {Object} sourceModel - 源GLTF模型对象
			 * @returns {Object} 包含动画剪辑、骨架和混合器的对象
			 */
			function getSource( sourceModel ) {
				// 获取第一个动画剪辑
				// GLTF文件可以包含多个动画，这里使用第一个
				const clip = sourceModel.animations[ 0 ];

				// 创建骨架帮助器
				// 骨架帮助器可视化显示模型的骨骼结构
				const helper = new THREE.SkeletonHelper( sourceModel.scene );
				helpers.add( helper );  // 添加到辅助对象组

				// 从帮助器的骨骼创建骨架对象
				// 骨架是动画系统的核心，包含所有骨骼的层次结构
				const skeleton = new THREE.Skeleton( helper.bones );

				// 创建动画混合器
				// 动画混合器管理动画的播放和混合
				const mixer = new THREE.AnimationMixer( sourceModel.scene );
				
				// 创建动画动作并开始播放
				// clipAction创建一个动画动作，可以控制播放、暂停、循环等
				mixer.clipAction( sourceModel.animations[ 0 ] ).play();

				// 返回包含所有必要数据的对象
				return { clip, skeleton, mixer };
			}

			/**
			 * 将源模型的动画重定向到目标模型
			 * 这是本示例的核心功能，实现不同模型间的动画传递
			 * 
			 * @param {Object} sourceModel - 源模型数据对象（包含clip, skeleton, mixer）
			 * @param {Object} targetModel - 目标GLTF模型
			 * @returns {THREE.AnimationMixer} 目标模型的动画混合器
			 */
			function retargetModel( sourceModel, targetModel ) {
				// 获取目标模型的蒙皮网格
				// 假设模型结构为：scene -> group -> skinnedMesh
				const targetSkin = targetModel.scene.children[ 0 ].children[ 0 ];

				// 为目标模型创建骨架帮助器（用于调试）
				const targetSkelHelper = new THREE.SkeletonHelper( targetModel.scene );
				helpers.add( targetSkelHelper );

				// 定义骨骼旋转矩阵
				// 由于源模型和目标模型的骨骼方向可能不同，需要调整
				
				// 顺时针旋转45度（用于左臂骨骼）
				const rotateCW45 = new THREE.Matrix4().makeRotationY( THREE.MathUtils.degToRad( 45 ) );
				
				// 逆时针旋转180度（用于右臂骨骼）
				const rotateCCW180 = new THREE.Matrix4().makeRotationY( THREE.MathUtils.degToRad( - 180 ) );
				
				// 顺时针旋转180度（用于腿部骨骼）
				const rotateCW180 = new THREE.Matrix4().makeRotationY( THREE.MathUtils.degToRad( 180 ) );
				
				// 脚部旋转矩阵（绕X轴45度，Y轴180度）
				const rotateFoot = new THREE.Matrix4().makeRotationFromEuler( 
					new THREE.Euler( 
						THREE.MathUtils.degToRad( 45 ),   // X轴旋转45度
						THREE.MathUtils.degToRad( 180 ),  // Y轴旋转180度
						THREE.MathUtils.degToRad( 0 )     // Z轴不旋转
					) 
				);

				// 配置重定向选项
				// 这些选项控制如何将源动画应用到目标模型
				const retargetOptions = {
					// 指定源模型的髋部骨骼名称
					// 髋部是骨骼层次的根节点，通常控制整体移动
					hip: 'mixamorigHips',

					// 指定髋部骨骼的影响（可选）
					// 可以控制髋部在哪些轴上影响动画
					// hipInfluence: new THREE.Vector3( 0, 1, 0 ), // 示例：只影响Y轴移动

					// 指定动画修剪范围（秒）（可选）
					// 可以只使用动画的一部分
					// trim: [ 3.0, 4.0 ], // 示例：只使用3-4秒的动画

					// 保持目标模型的比例
					// 1 / targetModel.scene.scale.y 补偿目标模型的缩放
					scale: 1 / targetModel.scene.scale.y,

					// 目标骨骼的局部偏移矩阵
					// 这些矩阵调整目标骨骼的初始方向，使其与源骨骼对齐
					localOffsets: {
						// 上半身骨骼调整
						mixamorigLeftShoulder: rotateCW45,     // 左肩顺时针旋转45度
						mixamorigRightShoulder: rotateCCW180,  // 右肩逆时针旋转180度
						mixamorigLeftArm: rotateCW45,          // 左上臂
						mixamorigRightArm: rotateCCW180,       // 右上臂
						mixamorigLeftForeArm: rotateCW45,      // 左前臂
						mixamorigRightForeArm: rotateCCW180,   // 右前臂
						mixamorigLeftHand: rotateCW45,         // 左手
						mixamorigRightHand: rotateCCW180,      // 右手

						// 下半身骨骼调整
						mixamorigLeftUpLeg: rotateCW180,       // 左大腿
						mixamorigRightUpLeg: rotateCW180,      // 右大腿
						mixamorigLeftLeg: rotateCW180,         // 左小腿
						mixamorigRightLeg: rotateCW180,        // 右小腿
						mixamorigLeftFoot: rotateFoot,         // 左脚
						mixamorigRightFoot: rotateFoot,        // 右脚
						mixamorigLeftToeBase: rotateCW180,     // 左脚趾
						mixamorigRightToeBase: rotateCW180     // 右脚趾
					},

					// 目标骨骼到源骨骼的名称映射
					// 如果骨骼名称不同，需要建立映射关系
					// 这里假设两个模型使用相同的骨骼命名约定（mixamorig标准）
					names: {
						// 躯干骨骼
						mixamorigHips: 'mixamorigHips',     // 髋部
						mixamorigSpine: 'mixamorigSpine',   // 脊柱
						mixamorigSpine2: 'mixamorigSpine2', // 上脊柱
						mixamorigHead: 'mixamorigHead',     // 头部

						// 上肢骨骼
						mixamorigLeftShoulder: 'mixamorigLeftShoulder',   // 左肩
						mixamorigRightShoulder: 'mixamorigRightShoulder', // 右肩
						mixamorigLeftArm: 'mixamorigLeftArm',             // 左上臂
						mixamorigRightArm: 'mixamorigRightArm',           // 右上臂
						mixamorigLeftForeArm: 'mixamorigLeftForeArm',     // 左前臂
						mixamorigRightForeArm: 'mixamorigRightForeArm',   // 右前臂
						mixamorigLeftHand: 'mixamorigLeftHand',           // 左手
						mixamorigRightHand: 'mixamorigRightHand',         // 右手

						// 下肢骨骼
						mixamorigLeftUpLeg: 'mixamorigLeftUpLeg',         // 左大腿
						mixamorigRightUpLeg: 'mixamorigRightUpLeg',       // 右大腿
						mixamorigLeftLeg: 'mixamorigLeftLeg',             // 左小腿
						mixamorigRightLeg: 'mixamorigRightLeg',           // 右小腿
						mixamorigLeftFoot: 'mixamorigLeftFoot',           // 左脚
						mixamorigRightFoot: 'mixamorigRightFoot',         // 右脚
						mixamorigLeftToeBase: 'mixamorigLeftToeBase',     // 左脚趾
						mixamorigRightToeBase: 'mixamorigRightToeBase'    // 右脚趾
					}
				};

				// 执行动画重定向
				// 这是关键步骤：将源动画转换为目标模型的动画
				const retargetedClip = SkeletonUtils.retargetClip( 
					targetSkin,           // 目标蒙皮网格（接收动画）
					sourceModel.skeleton, // 源骨架（提供动画数据）
					sourceModel.clip,     // 源动画剪辑
					retargetOptions       // 重定向配置
				);

				// 为目标蒙皮网格创建动画混合器
				// 注意：混合器必须直接应用于蒙皮网格，而不是其父节点
				const mixer = new THREE.AnimationMixer( targetSkin );
				
				// 创建并播放重定向后的动画
				mixer.clipAction( retargetedClip ).play();

				// 返回动画混合器，以便在动画循环中更新
				return mixer;
			}

			// ============================================
			// 事件处理和动画循环
			// ============================================

			/**
			 * 窗口大小调整事件处理函数
			 * 当浏览器窗口改变大小时，调整渲染器和相机的设置
			 */
			window.onresize = function () {
				// 更新相机的宽高比
				// 宽高比 = 窗口宽度 / 窗口高度
				camera.aspect = window.innerWidth / window.innerHeight;
				
				// 更新相机的投影矩阵
				// 必须调用此方法才能使宽高比更改生效
				camera.updateProjectionMatrix();

				// 更新渲染器的大小以匹配窗口大小
				renderer.setSize( window.innerWidth, window.innerHeight );
			};

			/**
			 * 动画循环函数
			 * 这是Three.js应用的核心，每帧调用一次
			 * 负责更新动画状态和渲染场景
			 */
			function animate() {
				// 获取自上一帧以来的时间增量（以秒为单位）
				// 使用时间增量可以使动画在不同帧率下保持恒定速度
				const delta = clock.getDelta();

				// 更新源模型的动画混合器
				// 即使源模型动画不直接显示，也需要更新以计算重定向
				source.mixer.update( delta );
				
				// 更新目标模型的动画混合器
				// 这是实际显示在士兵模型上的动画
				mixer.update( delta );

				// 更新轨道控制器
				// 处理用户输入，更新相机位置
				controls.update();

				// 渲染场景
				// 将3D场景绘制到2D画布上
				renderer.render( scene, camera );
			}

		</script>
	</body>
</html>