<!-- 代码功能与技术点详解
一、总体功能概述
这是一个展示3D角色动画系统的Web应用，专门演示Three.js中骨骼动画的两种实现模式：

核心演示功能：
加载并显示3D士兵模型（来自Mixamo的GLTF格式角色）

实现两种不同的骨骼动画系统：

独立骨骼模式：每个角色有独立的骨骼和动画状态

共享骨骼模式：多个角色共享同一套骨骼，动画完全同步

实时切换两种模式，直观对比效果差异

完整的3D场景：包含灯光、阴影、地面、雾效等

场景设置：
三个士兵模型水平排列

每个士兵播放不同的动画（空闲、跑步、走路）

用户可以通过GUI面板切换两种骨骼模式

二、主要技术点详解
1. 骨骼动画系统（Skeletal Animation）
技术原理：
javascript
// 骨骼动画的核心组成：
1. 骨骼（Bones） - 构成角色的骨架
2. 蒙皮网格（Skinned Mesh） - 附着在骨骼上的3D模型
3. 动画剪辑（AnimationClip） - 骨骼的运动数据
4. 动画混合器（AnimationMixer） - 控制动画播放
工作流程：
text
加载GLTF模型 → 提取骨骼和动画数据 → 创建动画混合器 → 绑定动画到骨骼 → 每帧更新动画状态
2. 独立骨骼模式（Independent Skeleton Mode）
实现方式：
javascript
// 使用SkeletonUtils.clone()深度克隆完整模型
const model1 = SkeletonUtils.clone(model);
const model2 = SkeletonUtils.clone(model);
const model3 = SkeletonUtils.clone(model);

// 每个克隆包含：
// - 独立的骨骼层级
// - 独立的蒙皮网格
// - 独立的动画状态
技术特点：
内存占用高：每个实例复制完整的骨骼和网格数据

动画独立：每个实例可以播放不同的动画

控制灵活：可以独立控制每个实例的位置、旋转、动画

性能较低：每帧需要更新多个动画系统

3. 共享骨骼模式（Shared Skeleton Mode）
实现方式：
javascript
// 关键技术步骤：
1. 克隆一个基础模型获取共享骨骼
2. 设置网格为DetachedBindMode分离绑定模式
3. 多个网格绑定到同一个骨骼系统
4. 使用一个动画混合器控制所有动画

// 关键代码：
model1.bindMode = THREE.DetachedBindMode;
model1.bind(sharedSkeleton, identity);  // 绑定到共享骨骼
技术特点：
内存占用低：骨骼数据只存储一份

动画同步：所有实例共享相同的动画状态

性能高效：只需更新一个动画系统

控制受限：无法独立控制每个实例的动画

4. 核心技术组件
(1) SkeletonUtils工具库
javascript
// 主要功能：
SkeletonUtils.clone()          // 深度克隆骨骼和蒙皮网格
SkeletonUtils.retarget()       // 动画重定向
SkeletonUtils.makeProxy()      // 创建动画代理
(2) 动画系统架构
javascript
// 动画数据流：
AnimationClip → AnimationMixer → AnimationAction → Skeleton → SkinnedMesh

// 核心类：
THREE.AnimationClip     // 动画数据容器
THREE.AnimationMixer    // 动画控制器
THREE.AnimationAction   // 单个动画实例
THREE.Skeleton          // 骨骼系统
THREE.SkinnedMesh       // 蒙皮网格
(3) 绑定模式（Bind Mode）
javascript
// Three.js支持的绑定模式：
THREE.AttachedBindMode   // 默认：网格与骨骼紧密绑定
THREE.DetachedBindMode   // 分离：允许网格共享骨骼
THREE.CopyBindMode       // 复制：复制骨骼数据

// DetachedBindMode的关键特性：
// - 允许网格独立变换（位置、旋转、缩放）
// - 多个网格可以引用同一套骨骼
// - 骨骼动画自动传播到所有绑定网格
5. 渲染与优化技术
(1) 阴影系统
javascript
// 阴影实现：
dirLight.castShadow = true;        // 光源投射阴影
mesh.receiveShadow = true;         // 物体接收阴影
renderer.shadowMap.enabled = true; // 启用阴影映射

// 阴影相机配置：
// 精确控制阴影渲染范围，避免过度计算
(2) 性能优化
javascript
// 1. 共享资源
sharedSkeleton       // 共享骨骼数据
sharedAnimation      // 共享动画状态

// 2. 渲染优化
renderer.setAnimationLoop()  // 现代动画循环
renderer.shadowMap.enabled   // 按需启用阴影

// 3. 内存管理
skeleton.dispose()   // 及时释放骨骼资源
clearScene()         // 场景切换时清理资源
(3) 场景管理
javascript
// 对象管理数组：
mixers = []    // 所有动画混合器
objects = []   // 所有场景对象

// 资源清理机制：
function clearScene() {
  // 停止所有动画
  // 移除所有对象
  // 释放所有骨骼资源
}
6. 用户交互系统
GUI控制面板：
javascript
const gui = new GUI();
gui.add(params, 'sharedSkeleton')
   .name('共享骨骼模式')
   .onChange(() => {
       clearScene();
       // 根据选择重新初始化场景
   });
响应式设计：
javascript
// 窗口大小变化处理
window.addEventListener('resize', onWindowResize);
function onWindowResize() {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
}
7. GLTF资源处理
模型加载流程：
javascript
const loader = new GLTFLoader();
loader.load('models/gltf/Soldier.glb', function(gltf) {
  model = gltf.scene;           // 获取3D场景
  animations = gltf.animations; // 获取动画数据
  
  // 遍历模型设置阴影
  model.traverse(function(object) {
    if (object.isMesh) object.castShadow = true;
  });
});
GLTF结构解析：
text
Soldier.glb文件包含：
- Scene：包含所有3D对象的根节点
- Meshes：几何体和材质数据
- Skeletons：骨骼层级结构
- Animations：动画剪辑数据
- Textures：纹理贴图
三、应用场景对比
适合独立骨骼模式的场景：
游戏角色：每个NPC有不同的行为和状态

动画编辑：需要独立调整每个角色的动画

小规模场景：角色数量少于50个

多样化需求：需要不同的动画混合

适合共享骨骼模式的场景：
人群模拟：数百甚至数千个相同角色

舞蹈表演：多个角色执行相同舞蹈动作

军队阵列：大量士兵整齐划一的动作

VR/AR应用：需要高性能的大规模角色渲染

移动设备：内存和性能受限的环境

四、扩展与改进方向
1. 性能进一步优化
javascript
// GPU实例化（Instancing）
const instancedMesh = new THREE.InstancedMesh(geometry, material, count);

// 动画纹理（Animation Texture）
// 将骨骼动画烘焙到纹理，GPU直接读取
2. 高级动画功能
javascript
// 动画混合
mixer.clipAction(walkClip).crossFadeTo(runClip, 0.5);

// 动画层
const layer = mixer.addLayer('upperBody');
layer.clipAction(waveClip).play();

// 逆向动力学（IK）
// 实现更自然的角色动作
3. 视觉增强
javascript
// 后期处理
const composer = new THREE.EffectComposer(renderer);
composer.addPass(new THREE.RenderPass(scene, camera));
composer.addPass(new THREE.SSAOPass());

// LOD系统
const lod = new THREE.LOD();
lod.addLevel(highDetailMesh, 0);
lod.addLevel(lowDetailMesh, 50);
4. 交互功能
javascript
// 角色选择
const raycaster = new THREE.Raycaster();
raycaster.setFromCamera(mouse, camera);
const intersects = raycaster.intersectObjects(characters);

// 动画控制面板
// 实时调整动画速度、混合权重等参数 -->


<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<!-- 页面标题：多个动画蒙皮网格示例 -->
		<title>多个动画蒙皮网格演示</title>
		<!-- 字符编码设置为UTF-8，支持中文显示 -->
		<meta charset="utf-8">
		<!-- 视口设置：适应移动设备，禁止用户缩放，设置最小和最大缩放比例 -->
		<meta content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" name="viewport">
		<!-- 引入CSS样式文件 -->
		<link type="text/css" rel="stylesheet" href="main.css">
	</head>
	<body>
		<!-- 信息展示区域：说明演示的功能和特点 -->
		<div id="info">
			<strong>演示说明：</strong><br/>
			1. 本演示展示了<strong>SkeletonUtils.clone()方法</strong>的使用方式<br/>
			2. 演示了如何设置<strong>共享骨骼系统</strong><br/>
			3. 可以通过右下角控制面板切换<strong>独立骨骼模式</strong>和<strong>共享骨骼模式</strong><br/>
			4. 士兵模型来源：<a href="https://www.mixamo.com" target="_blank" rel="noopener">Mixamo动画库</a><br/>
			<br/>
		</div>

		<!-- 模块导入映射配置：定义JavaScript模块的导入路径 -->
		<script type="importmap">
			{
				"imports": {
					"three": "../build/three.module.js",
					"three/addons/": "./jsm/"
				}
			}
		</script>

		<script type="module">
			// ========== 模块导入部分 ==========
			// 导入Three.js核心库的所有功能
			import * as THREE from 'three';

			// 导入GLTF加载器：用于加载GLTF/GLB格式的3D模型文件
			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
			
			// 导入骨骼工具集：包含克隆骨骼模型的重要工具函数
			import * as SkeletonUtils from 'three/addons/utils/SkeletonUtils.js';
			
			// 导入GUI库：用于创建用户交互控制面板（轻量级）
			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';

			// ========== 全局变量声明 ==========
			// Three.js核心对象
			let camera,      // 相机：定义观察3D场景的视角
				scene,       // 场景：包含所有3D对象的容器
				renderer,    // 渲染器：将3D场景渲染到2D画布上
				clock;       // 时钟：用于精确控制动画时间

			// 模型相关变量
			let model,      // 加载的3D模型对象
				animations; // 模型包含的动画数据数组

			// 管理数组
			const mixers = [],   // 动画混合器数组：管理所有动画的播放状态
				  objects = [];  // 场景对象数组：存储所有添加到场景中的对象

			// GUI控制参数对象
			const params = {
				sharedSkeleton: false  // 是否使用共享骨骼模式，默认关闭（独立骨骼模式）
			};

			// ========== 程序入口：初始化函数调用 ==========
			init();

			// ========== 初始化函数定义 ==========
			function init() {
				// ----- 1. 相机设置 -----
				// 创建透视相机：模拟人眼视角，近大远小的效果
				camera = new THREE.PerspectiveCamera(
					45,                            // 视野角度（FOV）：45度
					window.innerWidth / window.innerHeight, // 宽高比：窗口宽高比
					1,                             // 近裁剪面：距离相机1个单位以内的物体不显示
					1000                           // 远裁剪面：距离相机1000个单位以外的物体不显示
				);
				// 设置相机位置（x, y, z坐标系）
				camera.position.set(2, 3, -6);
				// 设置相机观察点：看向场景中心偏上的位置
				camera.lookAt(0, 1, 0);

				// ----- 2. 时间控制 -----
				// 创建时钟对象：用于获取精确的时间差，保证动画流畅
				clock = new THREE.Clock();

				// ----- 3. 场景设置 -----
				// 创建主场景容器
				scene = new THREE.Scene();
				// 设置场景背景颜色（浅灰色）
				scene.background = new THREE.Color(0xa0a0a0);
				// 添加雾效：增强场景的深度感和真实感
				scene.fog = new THREE.Fog(0xa0a0a0, 10, 50);
				// 参数说明：
				// 0xa0a0a0 - 雾的颜色（与背景色一致）
				// 10 - 雾开始出现的距离（从相机开始10个单位）
				// 50 - 雾完全遮盖物体的距离（50个单位处完全看不见）

				// ----- 4. 灯光设置 -----
				// 4.1 创建半球光：模拟天空和地面的环境光反射
				const hemiLight = new THREE.HemisphereLight(
					0xffffff,  // 天空颜色（白色）
					0x8d8d8d,  // 地面颜色（深灰色）
					3          // 光照强度
				);
				hemiLight.position.set(0, 20, 0);  // 将灯光放置在场景上方
				scene.add(hemiLight);

				// 4.2 创建平行光：模拟太阳光（方向性光源）
				const dirLight = new THREE.DirectionalLight(0xffffff, 3);
				dirLight.position.set(-3, 10, -10);  // 设置光源位置
				dirLight.castShadow = true;  // 启用阴影投射
				
				// 配置阴影相机参数：定义阴影的渲染范围
				dirLight.shadow.camera.top = 4;     // 阴影相机上边界
				dirLight.shadow.camera.bottom = -4; // 阴影相机下边界
				dirLight.shadow.camera.left = -4;   // 阴影相机左边界
				dirLight.shadow.camera.right = 4;   // 阴影相机右边界
				dirLight.shadow.camera.near = 0.1;  // 阴影相机近裁剪面
				dirLight.shadow.camera.far = 40;    // 阴影相机远裁剪面
				scene.add(dirLight);

				// 可选：添加阴影相机辅助器，可视化阴影相机的范围（调试用）
				// scene.add(new THREE.CameraHelper(dirLight.shadow.camera));

				// ----- 5. 地面创建 -----
				// 创建一个巨大的平面作为地面
				const mesh = new THREE.Mesh(
					// 几何体：200x200单位的平面
					new THREE.PlaneGeometry(200, 200),
					// 材质：使用Phong着色器，具有镜面高光效果
					new THREE.MeshPhongMaterial({ 
						color: 0xcbcbcb,      // 地面颜色
						depthWrite: false     // 优化：地面不写入深度缓冲
					})
				);
				mesh.rotation.x = -Math.PI / 2;  // 旋转平面使其水平（默认Three.js平面是竖立的）
				mesh.receiveShadow = true;       // 重要：让地面接收其他物体投射的阴影
				scene.add(mesh);

				// ----- 6. 模型加载 -----
				// 创建GLTF加载器实例
				const loader = new GLTFLoader();
				
				// 异步加载士兵模型文件
				loader.load('models/gltf/Soldier.glb', function(gltf) {
					// 加载成功回调函数
					
					// 获取模型场景（包含所有网格、骨骼等）
					model = gltf.scene;
					
					// 获取模型包含的动画数据数组
					// GLTF文件通常包含多个动画片段（空闲、跑步、走路等）
					animations = gltf.animations;

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

					// 加载完成后设置默认场景（独立骨骼模式）
					setupDefaultScene();
				});

				// ----- 7. 渲染器设置 -----
				// 创建WebGL渲染器
				renderer = new THREE.WebGLRenderer({ 
					antialias: true  // 开启抗锯齿，使边缘更平滑
				});
				// 设置设备像素比：适应高DPI显示器（如Retina屏）
				renderer.setPixelRatio(window.devicePixelRatio);
				// 设置渲染器尺寸为整个窗口
				renderer.setSize(window.innerWidth, window.innerHeight);
				// 设置动画循环函数（替代传统的requestAnimationFrame）
				renderer.setAnimationLoop(animate);
				// 启用阴影映射：让渲染器计算和显示阴影
				renderer.shadowMap.enabled = true;
				// 将渲染器的canvas元素添加到页面body中
				document.body.appendChild(renderer.domElement);

				// ----- 8. 事件监听 -----
				// 监听窗口大小变化事件
				window.addEventListener('resize', onWindowResize);

				// ----- 9. GUI控制面板 -----
				// 创建GUI实例
				const gui = new GUI();
				
				// 添加共享骨骼模式开关
				gui.add(params, 'sharedSkeleton')
				   .name('共享骨骼模式')  // 设置中文显示名称
				   .onChange(function() {
						// 当开关状态改变时的回调函数
						clearScene();  // 首先清理当前场景的所有对象
				
						// 根据开关状态设置不同的场景
						if (params.sharedSkeleton === true) {
							// 开启：设置共享骨骼场景
							setupSharedSkeletonScene();
						} else {
							// 关闭：设置默认独立骨骼场景
							setupDefaultScene();
						}
					});
				gui.open();  // 默认打开GUI面板
			}

			// ========== 清理场景函数 ==========
			// 功能：完全清理当前场景中的所有动画和对象
			function clearScene() {
				// 1. 停止所有动画混合器的动作
				// 遍历mixers数组中的所有动画混合器
				for (const mixer of mixers) {
					// 停止混合器中的所有动画动作
					mixer.stopAllAction();
				}
				// 清空混合器数组，释放内存
				mixers.length = 0;

				// 2. 从场景中移除所有对象
				// 遍历objects数组中的所有场景对象
				for (const object of objects) {
					// 从场景中移除对象
					scene.remove(object);
					
					// 遍历场景中的每个子对象
					scene.traverse(function(child) {
						// 如果子对象是蒙皮网格（具有骨骼的网格）
						if (child.isSkinnedMesh) {
							// 释放骨骼占用的内存资源
							child.skeleton.dispose();
						}
					});
				}
			}

			// ========== 设置默认场景（独立骨骼模式） ==========
			// 特点：每个模型实例都有完全独立的骨骼系统
			// 优点：每个实例可以独立控制动画状态
			// 缺点：内存占用较高，骨骼数据重复
			function setupDefaultScene() {
				// 使用SkeletonUtils.clone()克隆三个完全独立的模型
				// 每个克隆都包含独立的骨骼、网格和材质
				const model1 = SkeletonUtils.clone(model);
				const model2 = SkeletonUtils.clone(model);
				const model3 = SkeletonUtils.clone(model);

				// 设置三个模型在X轴上的不同位置（水平排列）
				model1.position.x = -2;  // 左边
				model2.position.x = 0;   // 中间
				model3.position.x = 2;   // 右边

				// 为每个独立模型创建独立的动画混合器
				// AnimationMixer是Three.js的动画控制系统
				const mixer1 = new THREE.AnimationMixer(model1);
				const mixer2 = new THREE.AnimationMixer(model2);
				const mixer3 = new THREE.AnimationMixer(model3);

				// 为每个模型播放不同的动画片段
				// animations数组包含从GLTF文件加载的所有动画
				mixer1.clipAction(animations[0]).play();  // 索引0：空闲动画（Idle）
				mixer2.clipAction(animations[1]).play();  // 索引1：跑步动画（Run）
				mixer3.clipAction(animations[3]).play();  // 索引3：走路动画（Walk）
				// 注意：索引可能因模型而异，这里假设模型有这些动画

				// 将三个模型添加到场景中
				scene.add(model1, model2, model3);
			
				// 将模型对象添加到管理数组，方便后续清理
				objects.push(model1, model2, model3);
				// 将动画混合器添加到管理数组，方便更新和清理
				mixers.push(mixer1, mixer2, mixer3);
			}

			// ========== 设置共享骨骼场景 ==========
			// 特点：多个网格共享同一个骨骼系统
			// 优点：内存占用低，性能高（骨骼数据只存储一份）
			// 缺点：所有实例动画状态同步，不能独立控制
			function setupSharedSkeletonScene() {
				// 第一步：创建共享的基础模型
				// 克隆一个完整的模型作为共享骨骼的来源
				const sharedModel = SkeletonUtils.clone(model);
				
				// 获取蒙皮网格对象（通过名称查找）
				// 'vanguard_Mesh'是GLTF模型中网格的名称
				const shareSkinnedMesh = sharedModel.getObjectByName('vanguard_Mesh');
				
				// 获取该网格绑定的骨骼系统
				const sharedSkeleton = shareSkinnedMesh.skeleton;
				
				// 获取骨骼的根节点（父骨骼）
				// 'mixamorigHips'是Mixamo骨骼系统的臀部骨骼（根骨骼）
				const sharedParentBone = sharedModel.getObjectByName('mixamorigHips');
				
				// 重要：将父骨骼添加到场景中
				// 骨骼本身也需要在场景中，动画系统才能正确更新它
				scene.add(sharedParentBone);

				// 第二步：创建共享骨骼的网格实例
				// 克隆三个共享相同骨骼的蒙皮网格
				// 注意：这里只克隆网格，不克隆骨骼
				const model1 = shareSkinnedMesh.clone();
				const model2 = shareSkinnedMesh.clone();
				const model3 = shareSkinnedMesh.clone();

				// 第三步：设置绑定模式
				// DetachedBindMode（分离绑定模式）允许：
				// 1. 多个网格绑定到同一个骨骼
				// 2. 网格可以独立于骨骼被添加到场景的不同位置
				model1.bindMode = THREE.DetachedBindMode;
				model2.bindMode = THREE.DetachedBindMode;
				model3.bindMode = THREE.DetachedBindMode;

				// 创建单位矩阵（不进行任何变换）
				// 在绑定时使用，表示网格使用骨骼的原始变换
				const identity = new THREE.Matrix4();

				// 第四步：将三个网格绑定到同一个骨骼
				// bind()函数将网格与骨骼关联起来
				model1.bind(sharedSkeleton, identity);
				model2.bind(sharedSkeleton, identity);
				model3.bind(sharedSkeleton, identity);

				// 第五步：设置网格位置
				// 即使共享骨骼，每个网格实例仍然可以有独立的位置
				model1.position.x = -2;
				model2.position.x = 0;
				model3.position.x = 2;

				// 第六步：应用模型原始变换
				// GLTF模型通常有特定的缩放和旋转需要应用
				model1.scale.setScalar(0.01);        // 缩小到原始尺寸的1%
				model1.rotation.x = -Math.PI * 0.5;  // 绕X轴旋转-90度（修正朝向）
				model2.scale.setScalar(0.01);
				model2.rotation.x = -Math.PI * 0.5;
				model3.scale.setScalar(0.01);
				model3.rotation.x = -Math.PI * 0.5;

				// 第七步：创建共享的动画混合器
				// 只需要一个混合器控制共享的骨骼
				const mixer = new THREE.AnimationMixer(sharedParentBone);
				// 播放跑步动画（所有共享骨骼的网格都会同步这个动画）
				mixer.clipAction(animations[1]).play();

				// 第八步：将所有对象添加到场景
				scene.add(
					sharedParentBone,  // 共享的骨骼（包含所有骨骼层次）
					model1,           // 第一个士兵网格
					model2,           // 第二个士兵网格
					model3            // 第三个士兵网格
				);
			
				// 第九步：将对象添加到管理数组
				objects.push(
					sharedParentBone,  // 骨骼也需要管理
					model1,
					model2,
					model3
				);
				// 只需要一个动画混合器
				mixers.push(mixer);
			}

			// ========== 窗口大小变化处理函数 ==========
			function onWindowResize() {
				// 1. 更新相机宽高比
				// 当窗口大小改变时，需要更新相机的宽高比
				camera.aspect = window.innerWidth / window.innerHeight;
				
				// 2. 更新相机投影矩阵
				// 更改相机参数后必须调用此方法更新内部矩阵
				camera.updateProjectionMatrix();
				
				// 3. 更新渲染器尺寸
				// 让渲染器画布适应新的窗口尺寸
				renderer.setSize(window.innerWidth, window.innerHeight);
			}

			// ========== 动画循环函数 ==========
			// 每帧自动调用，驱动整个3D场景的动画和渲染
			function animate() {
				// 1. 获取时间增量
				// getDelta()返回上一帧到当前帧的时间差（秒）
				// 使用时间增量而非固定帧率，确保动画在不同帧率下速度一致
				const delta = clock.getDelta();
				
				// 2. 更新所有动画混合器
				// 遍历mixers数组中的所有动画混合器
				for (const mixer of mixers) {
					// 更新混合器状态，驱动骨骼动画
					// 参数delta确保动画速度与时间而非帧率挂钩
					mixer.update(delta);
				}
				
				// 3. 渲染场景
				// 将3D场景通过相机视角渲染到2D画布上
				renderer.render(scene, camera);
			}
		</script>
	</body>
</html>