<!-- 项目功能与技术点详解
🎯 一、项目概述
这是一个基于Three.js的WebGL 3D交互演示项目，展示了一个具有逆向运动学（IK）控制的3D角色动画系统。用户可以通过拖动场景中的球体实时控制角色手臂的运动，同时角色头部会跟随球体转动，实现自然的交互体验。

🚀 二、核心功能模块
1. 角色模型与场景
低多边形角色模型：加载并显示名为"Kira"的3D角色模型

环境设置：包含背景、雾效和基本照明

对象管理：通过命名系统识别和管理角色各个部位（头部、手臂、手等）

2. 逆向运动学（IK）系统
CCD算法实现：使用Cyclic Coordinate Descent算法解决IK问题

手臂控制：通过拖动目标球体控制角色左手的位置和姿态

关节限制：为肘关节和肩关节设置合理的旋转范围，避免不自然的姿势

实时更新：IK系统每帧自动计算或通过按钮手动触发

3. 交互控制系统
三重交互控制：

轨道控制（OrbitControls）：鼠标拖拽旋转视角，滚轮缩放

变换控制（TransformControls）：拖动3D控制柄移动IK目标位置

GUI控制面板：开关各项功能（跟随、头部转动、IK更新等）

4. 视觉效果
实时环境反射：球体表面反射周围环境

动态雾效：指数雾效增强场景深度感

头部跟踪动画：角色头部自然跟随控制球体

5. 性能与调试
性能监视器（Stats.js）：实时显示帧率（FPS）等性能指标

IK可视化辅助：显示IK链的可视化辅助线

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

💡 三、主要技术点
1. Three.js核心框架
场景图系统：层级化的3D对象管理

WebGL渲染器：硬件加速的3D渲染

相机系统：透视相机和立方体相机的使用

材质与纹理：基本材质和环境贴图

2. 模型加载与处理
GLTF/GLB格式：现代3D模型标准格式

Draco压缩：Google的3D几何压缩技术，减少文件大小

骨骼动画系统：蒙皮网格与骨骼绑定

模型遍历与查找：通过名称查找特定对象

3. 逆向运动学技术
CCD算法原理：从末端到根部的迭代旋转调整

末端效应器（Effector）：IK链的末端（左手）

目标（Target）：IK要到达的位置（目标球体）

关节链（Links）：包含多个关节的层次结构

4. 3D数学与变换
向量运算：位置计算、插值运动

四元数与欧拉角：旋转表示和转换

世界坐标与局部坐标：坐标系统转换

矩阵变换：对象的位置、旋转、缩放变换

5. 现代JavaScript特性
ES6模块系统：使用import/export管理依赖

异步/等待（async/await）：处理模型加载等异步操作

Import Maps：浏览器原生模块映射

箭头函数与遍历方法：现代JS语法特性

6. 性能优化技术
边界球计算：优化视锥体裁剪

立方体贴图复用：环境反射优化

控制器的合理禁用：避免输入冲突

平滑插值（LERP）：流畅的动画过渡

🔧 四、技术实现细节
IK系统配置示例：
javascript
const iks = [
  {
    target: 22,        // 目标骨骼索引
    effector: 6,       // 末端效应器索引
    links: [
      {
        index: 5,      // 小臂关节
        rotationMin: new THREE.Vector3(1.2, -1.8, -0.4),  // 旋转限制
        rotationMax: new THREE.Vector3(1.7, -1.1, 0.3)
      }
    ]
  }
]
相机跟随的平滑实现：
javascript
// 获取球体世界位置
OOI.sphere.getWorldPosition(v0);
// 线性插值平滑移动
orbitControls.target.lerp(v0, 0.1); // 每帧移动10%的距离
环境反射实现：
javascript
// 创建立方体相机
const cubeCamera = new THREE.CubeCamera(0.05, 50, renderTarget);
// 更新反射贴图
object.visible = false;
cubeCamera.update(renderer, scene);
object.visible = true;
📊 五、项目架构
text
项目结构：
├── 场景管理层
│   ├── 场景创建与配置
│   ├── 相机系统（主相机+立方体相机）
│   └── 灯光与雾效
├── 资源管理层
│   ├── 模型加载器（GLTF + Draco）
│   ├── 材质管理系统
│   └── 纹理处理
├── 动画系统
│   ├── 逆向运动学求解器
│   ├── 头部跟踪动画
│   └── 平滑过渡插值
├── 交互系统
│   ├── 轨道控制器
│   ├── 变换控制器
│   └── GUI控制面板
├── 渲染系统
│   ├── WebGL渲染器
│   ├── 环境反射
│   └── 后期处理
└── 工具层
    ├── 性能监视
    ├── IK可视化
    └── 响应式处理 -->


<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<!-- 
			页面标题：Three.js WebGL 演示 - 包含骨骼动画和逆向运动学的角色动画
			Three.js 是一个基于WebGL的3D图形库
			WebGL 是用于在网页上渲染3D图形的JavaScript API
			骨骼动画：通过骨骼系统控制角色动作的动画技术
			逆向运动学：通过末端效应器位置反向计算关节旋转的技术
		-->
		<title>Three.js WebGL演示 - 骨骼动画与逆向运动学</title>
		
		<!-- 字符编码：UTF-8支持多语言字符 -->
		<meta charset="utf-8">
		
		<!-- 
			视口设置：响应式设计，控制移动设备上的显示
			width=device-width：宽度等于设备宽度
			user-scalable=no：禁止用户缩放页面
			minimum-scale=1.0, maximum-scale=1.0：固定缩放比例为1
		-->
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		
		<!-- 作者信息：项目创建者 -->
		<meta name="author" content="Antoine BERNIER (abernier)" />
		
		<!-- 外部CSS样式表链接 -->
		<link type="text/css" rel="stylesheet" href="main.css">
		
		<!-- 内嵌CSS样式 -->
		<style>
			/* 设置整个页面文字颜色为白色 */
			body {color: white;}
			
			/* 设置信息区域链接的颜色 */
			#info a {
				color: #4d6675;  /* 深青色，在白色背景下有良好对比度 */
			}
		</style>
	</head>
	<body>
		<!-- 
			信息展示区域：
			显示项目信息、技术说明、版权和资源来源
			这个区域通常位于页面角落，提供项目相关信息
		-->
		<div id="info">
			<a href="https://threejs.org" target="_blank" rel="noopener">Three.js</a> - WebGL - 逆向运动学演示<br />
			<!-- 资源来源说明 -->
			角色模型来自：<a href="https://assetstore.unity.com/packages/3d/characters/humanoids/humans/kira-lowpoly-character-100303" target="_blank" rel="noopener">Aki的Kira低多边形角色</a>，<br />
			家具模型来自：<a href="https://poly.pizza" target="_blank" rel="noopener">poly.pizza资源网站</a>，<br />
			场景设计：<a href="https://abernier.link/edin" target="_blank" rel="noopener">abernier</a>。<br />
			许可协议：CC0（公共领域，可自由使用）<br />
			<!-- 操作说明 -->
			操作指南：<br />
			1. 拖动橙色控制球可以移动角色的左手<br />
			2. 鼠标拖动可以旋转视角<br />
			3. 鼠标滚轮可以缩放视角<br />
			4. 右侧控制面板可以切换各种功能
		</div>

		<!-- 
			Import Maps（导入映射表）：
			现代浏览器支持的模块导入映射功能
			允许定义模块标识符与其实际URL之间的映射关系
			这使得在代码中可以使用简短的模块名称而不是完整的URL路径
		-->
		<script type="importmap">
		{
			"imports": {
				"three": "../build/three.module.js",
				"three/addons/": "./jsm/"
			}
		}
		</script>

		<!-- 
			主JavaScript模块：
			使用type="module"声明这是一个ES6模块
			模块化JavaScript支持导入/导出，有独立的作用域
		-->
		<script type="module">
		// ============================================================================
		// 模块导入部分
		// ============================================================================
		
		// 导入Three.js核心库的全部功能并重命名为THREE
		// THREE是Three.js的全局命名空间，包含所有核心类和方法
		import * as THREE from 'three';

		// 从three.js附加模块中导入各种功能
		// OrbitControls：轨道控制器，用于通过鼠标控制相机环绕目标旋转
		import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
		// TransformControls：变换控制器，提供3D空间中的移动、旋转、缩放控制手柄
		import { TransformControls } from 'three/addons/controls/TransformControls.js';
		// GLTFLoader：GLTF格式模型加载器，GLTF是3D模型的"JPEG"格式
		import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
		// DRACOLoader：Draco压缩格式加载器，用于加载经过Draco压缩的模型文件
		import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js';
		// CCDIKSolver和CCDIKHelper：CCD逆向运动学求解器及其可视化辅助器
		// CCD（Cyclic Coordinate Descent）是逆向运动学的一种迭代求解算法
		import { CCDIKSolver, CCDIKHelper } from 'three/addons/animation/CCDIKSolver.js';
		// Stats：性能监视器，显示帧率(FPS)、渲染时间等性能指标
		import Stats from 'three/addons/libs/stats.module.js';
		// GUI：图形用户界面库，用于创建控制面板
		import { GUI } from 'three/addons/libs/lil-gui.module.min.js';

		// ============================================================================
		// 全局变量声明
		// ============================================================================
		
		// 基础Three.js对象变量声明
		let scene;       // 场景对象：包含所有3D物体、灯光、相机
		let camera;      // 相机对象：定义观察者的视角
		let renderer;    // 渲染器对象：负责将3D场景渲染到2D Canvas上
		let orbitControls;   // 轨道控制器实例：控制相机环绕
		let transformControls; // 变换控制器实例：控制物体的位置/旋转/缩放
		
		// 特殊效果变量
		let mirrorSphereCamera; // 立方体相机：用于生成球体的环境反射贴图

		// OOI（Object Of Interest）：感兴趣对象集合
		// 用于存储和引用场景中的重要对象，方便后续操作
		const OOI = {};
		
		// 逆向运动学求解器实例变量
		let IKSolver;

		// 工具类变量
		let stats; // 性能监视器实例
		let gui;   // GUI控制面板实例
		let conf;  // 配置对象：存储所有可调节的参数
		
		// 临时向量变量：用于3D数学计算，避免频繁创建新对象
		// Vector3表示三维向量，用于位置、方向等计算
		const v0 = new THREE.Vector3();

		// ============================================================================
		// 初始化函数调用
		// ============================================================================
		
		// 调用异步初始化函数
		// async/await用于处理异步操作（如加载模型文件）
		init();

		// ============================================================================
		// 异步初始化函数 - 整个应用的入口点
		// ============================================================================
		
		async function init() {
			// ------------------------------------------------------------------------
			// 1. 配置对象初始化
			// ------------------------------------------------------------------------
			
			// conf对象存储所有可通过GUI调节的配置参数
			conf = {
				// 相机跟随：控制轨道控制器目标是否跟随球体移动
				followSphere: false,
				// 头部转动：控制角色头部是否跟随球体转动
				turnHead: true,
				// IK自动更新：控制逆向运动学是否在每帧自动计算
				ik_solver: true,
				// 手动更新函数：GUI按钮绑定的手动更新函数
				update: updateIK
			};

			// ------------------------------------------------------------------------
			// 2. 场景设置
			// ------------------------------------------------------------------------
			
			// 创建3D场景
			scene = new THREE.Scene();
			
			// 添加指数雾效：距离越远，雾越浓
			// 参数1：雾的颜色（白色）
			// 参数2：雾的密度（0.17）
			scene.fog = new THREE.FogExp2( 0xffffff, .17 );
			
			// 设置场景背景颜色为白色
			scene.background = new THREE.Color( 0xffffff );

			// ------------------------------------------------------------------------
			// 3. 相机设置
			// ------------------------------------------------------------------------
			
			// 创建透视相机
			// 参数1：视野角度（55度）- 角度越大，看到的范围越广
			// 参数2：纵横比（窗口宽高比）
			// 参数3：近裁剪面（0.001）- 距离相机小于此值的物体不显示
			// 参数4：远裁剪面（5000）- 距离相机大于此值的物体不显示
			camera = new THREE.PerspectiveCamera( 55, window.innerWidth / window.innerHeight, 0.001, 5000 );
			
			// 设置相机初始位置（x, y, z坐标）
			camera.position.set( 0.9728517749133652, 1.1044765132727201, 0.7316689528482836 );
			
			// 让相机看向场景中心点（原点）
			camera.lookAt( scene.position );

			// ------------------------------------------------------------------------
			// 4. 灯光设置
			// ------------------------------------------------------------------------
			
			// 创建环境光：均匀照亮整个场景的光源
			// 参数1：光的颜色（白色）
			// 参数2：光的强度（8）- 值越大越亮
			const ambientLight = new THREE.AmbientLight( 0xffffff, 8 );
			scene.add( ambientLight );

			// ------------------------------------------------------------------------
			// 5. 模型加载系统初始化
			// ------------------------------------------------------------------------
			
			// 创建DRACOLoader实例：用于加载经过Draco压缩的模型
			// Draco是Google开发的3D几何压缩库，可显著减小模型文件大小
			const dracoLoader = new DRACOLoader();
			// 设置解码器路径：包含Draco解码器文件的目录
			dracoLoader.setDecoderPath( 'jsm/libs/draco/' );
			
			// 创建GLTFLoader实例：用于加载GLTF/GLB格式的3D模型
			const gltfLoader = new GLTFLoader();
			// 将Draco加载器设置给GLTF加载器，使其支持Draco压缩格式
			gltfLoader.setDRACOLoader( dracoLoader );

			// ------------------------------------------------------------------------
			// 6. 异步加载角色模型
			// ------------------------------------------------------------------------
			
			// 使用await等待模型加载完成（异步操作）
			// GLTF格式包含模型、材质、动画等所有数据
			const gltf = await gltfLoader.loadAsync( 'models/gltf/kira.glb' );
			
			// 遍历模型场景中的所有对象（深度优先遍历）
			// gltf.scene是加载的3D场景的根对象
			gltf.scene.traverse( n => {
				// 通过对象名称识别和存储重要对象
				if ( n.name === 'head' ) OOI.head = n; // 角色头部骨骼
				if ( n.name === 'lowerarm_l' ) OOI.lowerarm_l = n; // 左小臂骨骼
				if ( n.name === 'Upperarm_l' ) OOI.Upperarm_l = n; // 左上臂骨骼
				if ( n.name === 'hand_l' ) OOI.hand_l = n; // 左手骨骼
				if ( n.name === 'target_hand_l' ) OOI.target_hand_l = n; // 左手目标位置（IK目标）
				if ( n.name === 'boule' ) OOI.sphere = n; // 控制球体（用户交互对象）
				if ( n.name === 'Kira_Shirt_left' ) OOI.kira = n; // 角色蒙皮网格
			} );
			
			// 将加载的模型场景添加到主场景中
			scene.add( gltf.scene );

			// ------------------------------------------------------------------------
			// 7. 对象附加和定位
			// ------------------------------------------------------------------------
			
			// 克隆球体的初始位置，用于轨道控制器的初始目标
			const targetPosition = OOI.sphere.position.clone();
			
			// 将球体附加到左手上
			// attach方法将对象从当前父级移除，并附加到新父级，保持世界坐标不变
			OOI.hand_l.attach( OOI.sphere );

			// ------------------------------------------------------------------------
			// 8. 反射效果设置（球体环境映射）
			// ------------------------------------------------------------------------
			
			// 创建立方体贴图渲染目标：用于存储6个方向的渲染结果
			// 参数：纹理分辨率（1024x1024）
			const cubeRenderTarget = new THREE.WebGLCubeRenderTarget( 1024 );
			
			// 创建立方体相机：在球体位置从6个方向拍摄场景
			// 参数1：近裁剪面（0.05）
			// 参数2：远裁剪面（50）
			// 参数3：渲染目标
			mirrorSphereCamera = new THREE.CubeCamera( 0.05, 50, cubeRenderTarget );
			scene.add( mirrorSphereCamera );
			
			// 创建反射材质：使用立方体贴图作为环境贴图
			const mirrorSphereMaterial = new THREE.MeshBasicMaterial( { 
				envMap: cubeRenderTarget.texture // 环境贴图
			} );
			
			// 将反射材质应用到球体
			OOI.sphere.material = mirrorSphereMaterial;

			// ------------------------------------------------------------------------
			// 9. 逆向运动学（IK）系统设置
			// ------------------------------------------------------------------------
			
			// 将角色的根骨骼添加到角色对象中（便于IK系统访问）
			OOI.kira.add( OOI.kira.skeleton.bones[ 0 ] );
			
			// 定义逆向运动学配置数组
			// 可以配置多个IK链，这里只配置了左手臂
			const iks = [
				{
					target: 22, // 目标骨骼的索引（target_hand_l）
					// 目标骨骼是IK链要到达的位置
					
					effector: 6, // 末端效应器骨骼的索引（hand_l）
					// 末端效应器是IK链的末端（通常是手或脚）
					
					links: [ // 关节链配置数组（从末端到根部的顺序）
						{
							index: 5, // 骨骼索引（lowerarm_l - 左小臂）
							// 关节限制：防止不自然的旋转
							rotationMin: new THREE.Vector3( 1.2, -1.8, -0.4 ), // 最小旋转角度（弧度）
							rotationMax: new THREE.Vector3( 1.7, -1.1, 0.3 )  // 最大旋转角度（弧度）
							// X轴：绕前臂轴旋转（1.2-1.7弧度 ≈ 69-97度）
							// Y轴：左右摆动（-1.8到-1.1弧度 ≈ -103到-63度）
							// Z轴：扭转（-0.4到0.3弧度 ≈ -23到17度）
						},
						{
							index: 4, // 骨骼索引（Upperarm_l - 左上臂）
							rotationMin: new THREE.Vector3( 0.1, -0.7, -1.8 ), // 最小旋转
							rotationMax: new THREE.Vector3( 1.1, 0, -1.4 )    // 最大旋转
							// X轴：抬臂角度（0.1-1.1弧度 ≈ 6-63度）
							// Y轴：前后摆动（-0.7到0弧度 ≈ -40到0度）
							// Z轴：扭转（-1.8到-1.4弧度 ≈ -103到-80度）
						},
					],
				}
			];
			
			// 创建CCD逆向运动学求解器
			// 参数1：包含骨架的网格对象
			// 参数2：IK配置数组
			IKSolver = new CCDIKSolver( OOI.kira, iks );
			
			// 创建IK可视化辅助器（用于调试和展示）
			// 参数1：网格对象
			// 参数2：IK配置
			// 参数3：辅助线大小（0.01）
			const ccdikhelper = new CCDIKHelper( OOI.kira, iks, 0.01 );
			scene.add( ccdikhelper ); // 将辅助器添加到场景

			// ------------------------------------------------------------------------
			// 10. 图形用户界面（GUI）设置
			// ------------------------------------------------------------------------
			
			// 创建GUI实例
			gui = new GUI();
			
			// 添加控制项到GUI
			gui.add( conf, 'followSphere' ) // 绑定到conf.followSphere属性
			   .name( '跟随球体' ); // 显示名称
			   
			gui.add( conf, 'turnHead' )
			   .name( '头部转动' );
			   
			gui.add( conf, 'ik_solver' )
			   .name( 'IK自动更新' );
			   
			gui.add( conf, 'update' ) // 绑定到函数，点击时会执行该函数
			   .name( '手动更新IK' );
			   
			gui.open(); // 默认打开GUI面板

			// ------------------------------------------------------------------------
			// 11. 渲染器设置
			// ------------------------------------------------------------------------
			
			// 创建WebGL渲染器
			// antialias: true 开启抗锯齿，使边缘更平滑
			renderer = new THREE.WebGLRenderer( { antialias: true } );
			
			// 设置设备像素比：适应高DPI屏幕（如Retina显示屏）
			renderer.setPixelRatio( window.devicePixelRatio );
			
			// 设置渲染器尺寸为窗口大小
			renderer.setSize( window.innerWidth, window.innerHeight );
			
			// 设置动画循环回调函数
			// 使用setAnimationLoop替代传统的requestAnimationFrame
			// 浏览器每帧都会调用animate函数
			renderer.setAnimationLoop( animate );
			
			// 将渲染器的Canvas元素添加到页面body中
			document.body.appendChild( renderer.domElement );

			// ------------------------------------------------------------------------
			// 12. 控制器设置
			// ------------------------------------------------------------------------
			
			// 创建轨道控制器（控制相机）
			// 参数1：要控制的相机
			// 参数2：事件监听的DOM元素（渲染器的Canvas）
			orbitControls = new OrbitControls( camera, renderer.domElement );
			orbitControls.minDistance = 0.2; // 最小缩放距离（相机与目标的最小距离）
			orbitControls.maxDistance = 1.5; // 最大缩放距离
			orbitControls.enableDamping = true; // 启用阻尼效果（惯性）
			orbitControls.target.copy( targetPosition ); // 设置控制目标点

			// 创建变换控制器（控制目标位置）
			transformControls = new TransformControls( camera, renderer.domElement );
			transformControls.size = 0.75; // 控制手柄的大小
			transformControls.showX = false; // 隐藏X轴控制（只显示Y和Z轴）
			transformControls.space = 'world'; // 使用世界坐标系（非局部坐标系）
			transformControls.attach( OOI.target_hand_l ); // 附加到左手目标位置
			scene.add( transformControls.getHelper() ); // 添加控制器的辅助器到场景

			// 设置控制器交互逻辑
			// 当开始使用变换控制器时，禁用轨道控制器
			transformControls.addEventListener( 'mouseDown', () => {
				orbitControls.enabled = false; // 禁用轨道控制
			} );
			
			// 当结束使用变换控制器时，重新启用轨道控制器
			transformControls.addEventListener( 'mouseUp', () => {
				orbitControls.enabled = true; // 启用轨道控制
			} );

			// ------------------------------------------------------------------------
			// 13. 性能监视器设置
			// ------------------------------------------------------------------------
			
			// 创建性能监视器实例
			stats = new Stats();
			// 将监视器的DOM元素添加到页面
			document.body.appendChild( stats.dom );
			// Stats默认显示FPS（帧率），点击可切换到渲染时间等

			// ------------------------------------------------------------------------
			// 14. 窗口事件监听
			// ------------------------------------------------------------------------
			
			// 监听窗口大小变化事件
			// 当窗口大小改变时，调整相机和渲染器
			window.addEventListener( 'resize', onWindowResize, false );
			// 第三个参数false表示使用冒泡阶段（默认）

		}

		// ============================================================================
		// 动画循环函数
		// ============================================================================
		
		// 这是Three.js的主动画循环
		// 浏览器每帧（通常每秒60次）都会调用此函数
		function animate( ) {
			// ------------------------------------------------------------------------
			// 1. 更新球体反射贴图
			// ------------------------------------------------------------------------
			
			// 检查球体和立方体相机是否存在
			if ( OOI.sphere && mirrorSphereCamera ) {
				// 隐藏球体：避免球体自身出现在反射贴图中
				OOI.sphere.visible = false;
				
				// 获取球体在世界坐标系中的位置
				// getWorldPosition方法考虑所有父级变换
				OOI.sphere.getWorldPosition( mirrorSphereCamera.position );
				
				// 更新立方体相机：从球体位置渲染6个方向
				// 参数1：渲染器
				// 参数2：要渲染的场景
				mirrorSphereCamera.update( renderer, scene );
				
				// 重新显示球体
				OOI.sphere.visible = true;
			}

			// ------------------------------------------------------------------------
			// 2. 相机跟随逻辑
			// ------------------------------------------------------------------------
			
			// 如果启用了跟随球体功能
			if ( OOI.sphere && conf.followSphere ) {
				// 获取球体的世界位置
				OOI.sphere.getWorldPosition( v0 );
				
				// 使用线性插值(LERP)平滑移动轨道控制器的目标点
				// lerp(v, alpha)：将当前向量向目标向量v移动alpha比例
				// alpha=0.1表示每帧移动10%的距离，产生平滑的跟随效果
				orbitControls.target.lerp( v0, 0.1 );
			}

			// ------------------------------------------------------------------------
			// 3. 头部转动逻辑
			// ------------------------------------------------------------------------
			
			// 如果启用了头部转动功能
			if ( OOI.head && OOI.sphere && conf.turnHead ) {
				// 获取球体的世界位置
				OOI.sphere.getWorldPosition( v0 );
				
				// 让头部看向球体位置
				// lookAt方法会自动计算头部需要的旋转
				OOI.head.lookAt( v0 );
				
				// 调整头部旋转：因为模型初始朝向可能不匹配
				// 在Y轴旋转上添加π弧度（180度）的偏移
				OOI.head.rotation.set( 
					OOI.head.rotation.x, 
					OOI.head.rotation.y + Math.PI, // Y轴旋转180度
					OOI.head.rotation.z 
				);
			}

			// ------------------------------------------------------------------------
			// 4. 逆向运动学更新
			// ------------------------------------------------------------------------
			
			// 如果启用了IK自动更新
			if ( conf.ik_solver ) {
				// 调用IK更新函数
				updateIK();
			}

			// ------------------------------------------------------------------------
			// 5. 控制器更新
			// ------------------------------------------------------------------------
			
			// 更新轨道控制器（处理阻尼等效果）
			orbitControls.update();

			// ------------------------------------------------------------------------
			// 6. 场景渲染
			// ------------------------------------------------------------------------
			
			// 将3D场景渲染到2D Canvas上
			// 参数1：要渲染的场景
			// 参数2：使用的相机
			renderer.render( scene, camera );

			// ------------------------------------------------------------------------
			// 7. 性能监视器更新
			// ------------------------------------------------------------------------
			
			// 更新性能监视器的显示
			stats.update();

		}

		// ============================================================================
		// 逆向运动学更新函数
		// ============================================================================
		
		function updateIK() {
			// 检查IK求解器是否存在
			if ( IKSolver ) {
				// 调用求解器的update方法
				// 这会根据目标位置重新计算所有关节的旋转
				IKSolver.update();
			}

			// 遍历场景中的所有对象
			scene.traverse( function ( object ) {
				// 检查对象是否为蒙皮网格
				// 蒙皮网格是绑定到骨骼的网格，用于角色动画
				if ( object.isSkinnedMesh ) {
					// 重新计算蒙皮网格的边界球
					// 边界球用于视锥体裁剪和碰撞检测
					// 当骨骼移动时，网格的边界可能改变，需要重新计算
					object.computeBoundingSphere();
				}
			} );
		}

		// ============================================================================
		// 窗口大小变化处理函数
		// ============================================================================
		
		function onWindowResize() {
			// ------------------------------------------------------------------------
			// 1. 更新相机参数
			// ------------------------------------------------------------------------
			
			// 根据新的窗口宽高比更新相机的纵横比
			camera.aspect = window.innerWidth / window.innerHeight;
			
			// 更新相机的投影矩阵
			// 当相机参数改变后，必须调用此方法更新内部矩阵
			camera.updateProjectionMatrix();

			// ------------------------------------------------------------------------
			// 2. 更新渲染器尺寸
			// ------------------------------------------------------------------------
			
			// 将渲染器的尺寸设置为新的窗口尺寸
			renderer.setSize( window.innerWidth, window.innerHeight );
			
			// 注意：这里不需要重新设置像素比，因为设备像素比不会因窗口大小改变而改变
		}
		</script>
	</body>
</html>