<!-- Ammo.js 软体布料物理仿真演示 - 功能与技术详解
🌐 一、整体功能概述
这是一个基于Web的3D物理仿真演示，展示了如何使用Three.js图形库和Ammo.js物理引擎实现软体布料物理模拟。主要功能包括：

核心功能模块：
软体布料模拟 - 实现可变形布料的真实物理行为

刚体动力学 - 包含砖墙、地面、机械臂等刚体

交互式控制 - 用户可通过键盘控制机械臂运动

实时物理渲染 - 图形与物理的同步更新

阴影与光照 - 逼真的视觉渲染效果

视觉场景构成：
悬挂的布料：垂直悬挂的软体布料，随风/运动自然摆动

可倒塌砖墙：由多个刚体砖块堆叠而成，可与布料互动

可旋转机械臂：通过铰链约束控制，用于提起和放下布料

物理地面：作为碰撞平面的基础

完整光照系统：环境光+平行光，支持实时阴影

🔧 二、核心技术要点
1. Three.js图形渲染系统
text
技术栈：
├── 场景管理（Scene）
├── 透视相机（PerspectiveCamera）
├── WebGL渲染器（WebGLRenderer）
├── 几何体系统（Geometry）
├── 材质系统（Material）
├── 光照系统（Lighting）
└── 阴影映射（Shadow Mapping）
关键技术：

网格几何体：使用PlaneGeometry创建布料，细分段数决定模拟精度

双面渲染：布料材质设置side: THREE.DoubleSide确保两面可见

纹理映射：网格纹理帮助观察布料变形细节

轨道控制器：提供用户交互视角控制

2. Ammo.js物理引擎集成
text
物理系统架构：
├── 世界配置（btSoftBodyRigidBodyCollisionConfiguration）
├── 碰撞调度（btCollisionDispatcher）
├── 宽相检测（btDbvtBroadphase）
├── 约束求解（btSequentialImpulseConstraintSolver）
├── 软体求解（btDefaultSoftBodySolver）
└── 动态世界（btSoftRigidDynamicsWorld）
关键技术：

软体创建：使用btSoftBodyHelpers.CreatePatch()创建布料软体

参数配置：设置迭代次数影响模拟精度和稳定性

质量分布：setTotalMass()设置布料总质量

3. 软体-刚体耦合技术
布料锚点系统：
javascript
// 将布料顶点锚定到机械臂
clothSoftBody.appendAnchor(0, arm.userData.physicsBody, false, 0.5);
clothSoftBody.appendAnchor(clothNumSegmentsZ, arm.userData.physicsBody, false, 0.5);
实现原理：

顶点索引锚定：将布料特定顶点绑定到刚体

影响系数控制：0.5表示部分固定，允许一定变形

双锚点设计：顶部两端固定，中间部分自由下垂

铰链约束系统：
javascript
// 创建旋转铰链
new Ammo.btHingeConstraint(pylon, arm, pivotA, pivotB, axis, axis, true);
约束参数：

局部支点：在各自刚体局部坐标系中定义连接点

旋转轴：Y轴允许绕垂直轴旋转

电机控制：enableAngularMotor()实现旋转驱动

4. 实时同步机制
布料顶点同步：
text
更新流程：
物理计算 → 获取节点位置 → 更新几何体顶点 → 重新计算法线
关键技术：

直接内存访问：通过nodes.at(i).get_m_x()获取物理顶点

批量更新：一次遍历更新所有顶点

法线重计算：顶点变化后必须更新法线以保证正确光照

刚体变换同步：
text
同步过程：
获取运动状态 → 提取世界变换 → 应用位置/旋转 → Three.js渲染
5. 碰撞检测优化
边缘余量策略：

布料的margin：margin * 3（更大边缘防止穿透）

刚体的margin：margin（标准碰撞余量）

宽相优化：btDbvtBroadphase加速碰撞检测

碰撞组管理：

javascript
physicsWorld.addSoftBody(clothSoftBody, 1, -1);  // 与所有组碰撞
6. 性能优化技术
内存管理优化：
对象重用：transformAux1在更新循环中重复使用

数组缓存：rigidBodies.length缓存避免重复查询

批量处理：统一更新所有刚体变换

物理模拟优化：
固定时间步：stepSimulation(deltaTime, 10)确保模拟稳定性

休眠禁用：setActivationState(4)防止非活跃物体

迭代次数平衡：10次迭代平衡精度与性能

7. 输入与交互系统
键盘控制机制：

text
Q键按下 → armMovement = 1 → 铰链电机正转 → 机械臂上升
A键按下 → armMovement = -1 → 铰链电机反转 → 机械臂下降
键位释放 → armMovement = 0 → 停止电机 → 机械臂静止
电机参数：

速度控制：0.8 * armMovement 控制旋转速度

扭矩限制：50 最大电机冲量

即时响应：每帧更新电机状态

🎯 三、物理仿真特点
1. 布料物理特性
质量分布：0.9kg总质量均匀分布

约束系统：边约束+对角线约束防止过度拉伸

碰撞响应：与砖墙、地面、机械臂的交互碰撞

重力影响：-9.8m/s²重力加速度

2. 刚体堆叠系统
text
砖墙结构：
├── 交错排列：奇数行偏移0.25砖长度
├── 半砖设计：两端使用半砖完成交错
├── 8层高度：稳定堆叠展示碰撞
└── 随机颜色：增强视觉区分度
3. 约束系统特点
铰链自由度：单轴旋转，模拟真实机械臂

锚点弹性：部分固定允许布料自然下垂

约束禁用碰撞：防止支柱与机械臂内部碰撞

📊 四、渲染与视觉效果
1. 光照系统配置
text
光照设置：
├── 环境光：0xbbbbbb（基础均匀照明）
├── 平行光：0xffffff, 强度3（主光源）
├── 阴影相机：10单位范围，2-50距离裁剪
├── 阴影贴图：1024x1024分辨率
└── 阴影偏移：-0.003防止自阴影
2. 材质系统
布料材质：MeshLambertMaterial无光泽表面

刚体材质：MeshPhongMaterial有光泽表面

纹理系统：网格纹理增强空间感

3. 相机与视角
初始视角：(-12, 7, 4)提供俯视全景

控制目标：(0, 2, 0)聚焦场景中心

轨道控制：鼠标拖拽、缩放自由探索

🚀 五、技术挑战与解决方案
挑战1：软体性能优化
解决方案：

控制细分段数（布料：宽度×5，高度×5）

使用WASM版本的Ammo.js获得接近原生性能

限制物理迭代次数平衡精度与性能

挑战2：同步延迟消除
解决方案：

每帧立即同步物理状态到图形

使用needsUpdate标志高效更新GPU数据

统一更新循环避免状态不一致

挑战3：碰撞稳定性
解决方案：

调整碰撞边缘余量防止穿透

使用合适的求解器迭代次数

禁用无关碰撞提高稳定性

🎨 六、教育与应用价值
学习价值：
物理引擎入门：了解刚体、软体、约束等基本概念

图形物理集成：学习Three.js与Ammo.js的协同工作

实时模拟技术：掌握游戏和仿真应用的开发基础

性能优化实践：学习Web环境下的性能调优技巧

潜在应用：
游戏开发：布料、绳索等软体效果

工程仿真：机械系统动力学分析

教育演示：物理原理可视化教学

互动艺术：基于物理的交互装置

🔄 七、代码架构总结
text
项目架构：
src/
├── 初始化模块
│   ├── initGraphics()    # 图形系统初始化
│   ├── initPhysics()     # 物理系统初始化
│   └── initInput()       # 输入系统初始化
├── 对象创建模块
│   ├── createObjects()   # 主场景创建
│   ├── createParalellepiped()  # 刚体创建辅助
│   └── createRigidBody() # 刚体创建核心
├── 渲染循环模块
│   ├── animate()         # 动画循环
│   ├── render()          # 渲染主函数
│   └── updatePhysics()   # 物理更新核心
└── 工具函数模块
    ├── createRandomColor() # 随机颜色生成
    └── createMaterial()    # 材质创建 -->


<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<!-- 设置页面标题，描述这是一个基于Ammo.js的软体布料物理仿真演示 -->
		<title>Ammo.js 软体布料物理仿真演示</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">
		
		<!-- 引入外部CSS样式表 -->
		<link type="text/css" rel="stylesheet" href="main.css">
		
		<!-- 内联样式：设置页面基础文本颜色 -->
		<style>
			body {
				color: #333; /* 深灰色文本，提高可读性 */
			}
		</style>
	</head>
	
	<body>
		<!-- 
			页面信息提示区域：
			1. 第一行：演示标题
			2. 第二行：操作说明，指导用户如何使用键盘控制机械臂
			3. 这个div将显示在页面左上角，作为用户操作的提示
		-->
		<div id="info">
			Ammo.js 软体布料物理仿真演示<br>
			按 Q 键升起机械臂，按 A 键降下机械臂
		</div>
		
		<!-- 
			Three.js渲染容器：
			所有的3D图形都将在这个div内渲染显示
			这个容器占据了整个浏览器视口
		-->
		<div id="container"></div>

		<!-- 
			加载Ammo.js物理引擎（WebAssembly版本）：
			Ammo.js是Bullet物理引擎的JavaScript/WASM移植版本
			WASM版本提供更好的性能，接近原生代码的速度
			注意：这个脚本是全局加载的，不通过模块系统
		-->
		<script src="jsm/libs/ammo.wasm.js"></script>

		<!-- 
			模块导入映射（Import Map）：
			这是现代JavaScript模块系统的配置，告诉浏览器如何解析模块导入路径
			1. three → 指向Three.js主库
			2. three/addons/ → 指向Three.js的附加组件目录
			这个配置使得我们可以使用import语句导入Three.js模块
		-->
		<script type="importmap">
			{
				"imports": {
					"three": "../build/three.module.js",
					"three/addons/": "./jsm/"
				}
			}
		</script>

		<!-- 
			主JavaScript模块：
			type="module"表示这是一个ES6模块，支持import/export语法
			模块中的代码有自己的作用域，不会污染全局命名空间
		-->
		<script type="module">
			// ---------- 模块导入部分 ----------
			
			// 导入Three.js核心库的全部功能
			// Three.js是一个强大的3D图形库，用于创建和显示3D场景
			import * as THREE from 'three';
			
			// 导入Stats.js性能监视器
			// 这个工具可以显示帧率(FPS)等性能指标，对于调试和优化非常重要
			import Stats from 'three/addons/libs/stats.module.js';
			
			// 导入轨道控制器(OrbitControls)
			// 这个控制器允许用户通过鼠标拖拽、缩放来交互式地控制相机视角
			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

			// ---------- 图形渲染相关变量声明 ----------
			
			let container;    // 存储对页面中container div元素的引用
			let stats;       // 存储Stats性能监视器实例
			
			// 3D渲染核心对象：
			let camera;      // 相机：定义了观察3D场景的视角和投影方式
			let controls;    // 控制器：处理用户与3D场景的交互
			let scene;       // 场景：包含所有3D对象的容器，相当于一个虚拟世界
			let renderer;    // 渲染器：负责将3D场景绘制到2D屏幕上的组件
			
			let textureLoader; // 纹理加载器：用于加载图像纹理到3D材质中
			
			// 创建时钟对象，用于计算时间间隔（delta time）
			// 这对于与帧率无关的动画和物理模拟非常重要
			const clock = new THREE.Clock();

			// ---------- 物理引擎相关变量声明 ----------
			
			// 重力常数：地球标准重力加速度，负值表示方向向下
			// 这个值影响所有物理对象的运动
			const gravityConstant = -9.8;
			
			let physicsWorld; // Ammo物理世界实例：管理所有物理模拟的核心对象
			
			// 存储所有刚体的数组
			// 刚体是指形状和大小不会改变的物理对象（如砖块、机械臂）
			const rigidBodies = [];
			
			// 碰撞形状的边缘余量（margin）
			// 这个值防止物理对象在接触时发生穿透现象
			// 适当的值可以提高模拟的稳定性
			const margin = 0.05;
			
			let hinge;        // 铰链约束对象：用于控制机械臂的旋转运动
			let cloth;        // 布料网格对象：Three.js中表示布料的3D对象
			
			// Ammo变换辅助对象
			// 用于在Three.js和Ammo.js之间转换坐标和旋转信息
			// 这个对象被重复使用以提高性能
			let transformAux1;

			// 机械臂运动控制变量
			// 这个变量根据用户的键盘输入改变：
			// -1：机械臂向下运动（顺时针旋转）
			//  0：机械臂静止
			//  1：机械臂向上运动（逆时针旋转）
			let armMovement = 0;

			// ---------- Ammo.js初始化 ----------
			
			// Ammo()返回一个Promise，当Ammo.js库加载完成后解析
			// Ammo.js是Bullet物理引擎的JavaScript/WASM移植
			Ammo().then(function (AmmoLib) {
				// 将加载的Ammo库赋给全局变量，使其在整个应用中可用
				Ammo = AmmoLib;
				
				// Ammo加载完成后，开始初始化整个应用
				init();
			});

			// ---------- 主初始化函数 ----------
			
			/**
			 * 应用总初始化函数
			 * 这个函数按顺序调用各个初始化模块
			 * 确保所有依赖按正确顺序建立
			 */
			function init() {
				initGraphics();   // 第一步：初始化图形系统（Three.js相关）
				initPhysics();    // 第二步：初始化物理系统（Ammo.js相关）
				createObjects();  // 第三步：创建场景中的所有3D对象
				initInput();      // 第四步：初始化用户输入系统
			}

			// ---------- 图形系统初始化 ----------
			
			/**
			 * 初始化Three.js图形渲染系统
			 * 这个函数创建了所有与3D渲染相关的对象
			 */
			function initGraphics() {
				// 获取页面中的container元素
				// 这是Three.js渲染器将要绘制3D场景的DOM容器
				container = document.getElementById('container');

				// 创建透视相机（PerspectiveCamera）
				// 参数说明：
				// 60 - 视野角度（Field of View），单位是度，影响观察范围
				// window.innerWidth / window.innerHeight - 宽高比，保持图像不变形
				// 0.2 - 近裁剪面，距离相机多近的物体开始渲染
				// 2000 - 远裁剪面，距离相机多远的物体停止渲染
				camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.2, 2000);

				// 创建3D场景
				// 场景是所有3D对象的容器，包括模型、灯光、相机等
				scene = new THREE.Scene();
				
				// 设置场景背景颜色为浅蓝色
				// 这个颜色在没有物体或天空盒的地方显示
				scene.background = new THREE.Color(0xbfd1e5);

				// 设置相机初始位置
				// 三个参数分别表示：X轴（左右）、Y轴（上下）、Z轴（前后）
				// 这个位置提供了一个观察整个场景的良好视角
				camera.position.set(-12, 7, 4);

				// 创建WebGL渲染器
				// WebGL是用于在浏览器中渲染3D图形的JavaScript API
				// { antialias: true } 启用抗锯齿，使边缘更平滑
				renderer = new THREE.WebGLRenderer({ antialias: true });
				
				// 设置设备像素比，确保在高分辨率屏幕上清晰显示
				// 这个值通常是1（普通屏幕）或2（Retina屏幕）
				renderer.setPixelRatio(window.devicePixelRatio);
				
				// 设置渲染器大小为整个浏览器窗口
				renderer.setSize(window.innerWidth, window.innerHeight);
				
				// 设置动画循环回调函数
				// animate函数将在每一帧被调用，实现动画效果
				renderer.setAnimationLoop(animate);
				
				// 启用阴影映射
				// 这使得物体可以投射和接收阴影，增加场景的真实感
				renderer.shadowMap.enabled = true;
				
				// 将渲染器的canvas元素添加到container div中
				// 这样3D图形就会显示在页面上了
				container.appendChild(renderer.domElement);

				// 创建轨道控制器
				// 这个控制器允许用户：
				// 1. 左键拖拽：旋转视角
				// 2. 右键拖拽：平移视角
				// 3. 鼠标滚轮：缩放视角
				controls = new OrbitControls(camera, renderer.domElement);
				
				// 设置控制器的目标点（相机看向的点）
				// 这个点通常是场景的中心或用户关注的对象
				controls.target.set(0, 2, 0);
				
				// 更新控制器状态
				// 必须在改变控制器参数后调用
				controls.update();

				// 创建纹理加载器实例
				// 纹理是应用到3D模型表面的图像，用于增加细节和真实感
				textureLoader = new THREE.TextureLoader();

				// ---------- 光源设置 ----------
				
				// 添加环境光（AmbientLight）
				// 环境光没有方向，均匀地照亮所有物体
				// 参数0xbbbbbb表示浅灰色，亮度适中
				// 环境光通常用于模拟间接光照，防止阴影区域完全黑暗
				const ambientLight = new THREE.AmbientLight(0xbbbbbb);
				scene.add(ambientLight);

				// 添加平行光（DirectionalLight）作为主光源
				// 平行光模拟来自遥远光源的光线，如太阳光
				// 参数说明：
				// 0xffffff - 白光
				// 3 - 光照强度，值越大越亮
				const light = new THREE.DirectionalLight(0xffffff, 3);
				
				// 设置光源位置
				// 这个位置决定了光线的方向
				light.position.set(-7, 10, 15);
				
				// 启用光源投射阴影
				// 只有启用了这个属性，光源才能产生阴影
				light.castShadow = true;
				
				// 设置阴影相机的范围
				// 阴影相机决定了哪些区域的物体会计算阴影
				// 这些值定义了阴影相机的左右上下边界
				const d = 10;
				light.shadow.camera.left = -d;
				light.shadow.camera.right = d;
				light.shadow.camera.top = d;
				light.shadow.camera.bottom = -d;
				
				// 设置阴影相机的近远裁剪面
				// 只有在这个范围内的物体才会投射阴影
				light.shadow.camera.near = 2;
				light.shadow.camera.far = 50;
				
				// 设置阴影贴图的分辨率
				// 分辨率越高，阴影边缘越清晰，但性能消耗越大
				// 1024x1024是一个平衡质量和性能的常用值
				light.shadow.mapSize.x = 1024;
				light.shadow.mapSize.y = 1024;
				
				// 设置阴影偏移（bias）
				// 这个值可以防止阴影与物体表面产生自阴影瑕疵（shadow acne）
				// 负值将阴影稍微拉离表面
				light.shadow.bias = -0.003;
				
				// 将光源添加到场景中
				scene.add(light);

				// ---------- 性能监视器设置 ----------
				
				// 创建Stats性能监视器实例
				// Stats会显示一个小面板，包含：
				// FPS：帧率，越高越流畅
				// MS：每帧渲染时间，越低性能越好
				// MB：内存使用情况
				stats = new Stats();
				
				// 设置Stats面板的CSS样式
				// 这里将其定位到页面的左上角
				stats.domElement.style.position = 'absolute';
				stats.domElement.style.top = '0px';
				
				// 将Stats面板添加到页面中
				container.appendChild(stats.domElement);

				// ---------- 事件监听器设置 ----------
				
				// 监听窗口大小变化事件
				// 当用户调整浏览器窗口大小时，需要更新相机和渲染器
				window.addEventListener('resize', onWindowResize);
			}

			// ---------- 物理系统初始化 ----------
			
			/**
			 * 初始化Ammo.js物理引擎
			 * 这个函数创建了物理世界和所有相关的组件
			 * Ammo.js使用与Bullet物理引擎相同的架构
			 */
			function initPhysics() {
				// 创建碰撞配置对象
				// btSoftBodyRigidBodyCollisionConfiguration支持软体与刚体之间的碰撞检测
				// 这是软体模拟（布料）所必需的配置
				const collisionConfiguration = new Ammo.btSoftBodyRigidBodyCollisionConfiguration();
				
				// 创建碰撞调度器
				// 调度器管理碰撞检测算法，决定如何检测和处理碰撞
				const dispatcher = new Ammo.btCollisionDispatcher(collisionConfiguration);
				
				// 创建宽相（broadphase）碰撞检测器
				// 宽相阶段快速找出可能发生碰撞的对象对，提高性能
				// btDbvtBroadphase使用动态边界体积层次结构，适合动态场景
				const broadphase = new Ammo.btDbvtBroadphase();
				
				// 创建约束求解器
				// 求解器处理碰撞响应和约束（如铰链、弹簧等）
				// btSequentialImpulseConstraintSolver是Bullet默认的求解器
				const solver = new Ammo.btSequentialImpulseConstraintSolver();
				
				// 创建软体求解器
				// 专门用于处理软体（布料、绳索等）的物理行为
				const softBodySolver = new Ammo.btDefaultSoftBodySolver();
				
				// 创建物理世界
				// btSoftRigidDynamicsWorld是支持软体和刚体的动态世界
				// 参数说明：
				// 1. dispatcher - 碰撞调度器
				// 2. broadphase - 宽相碰撞检测器
				// 3. solver - 约束求解器
				// 4. collisionConfiguration - 碰撞配置
				// 5. softBodySolver - 软体求解器
				physicsWorld = new Ammo.btSoftRigidDynamicsWorld(
					dispatcher,
					broadphase,
					solver,
					collisionConfiguration,
					softBodySolver
				);
				
				// 设置物理世界的全局重力
				// btVector3的三个分量分别表示X、Y、Z轴的重力
				// 这里只在Y轴（垂直方向）施加重力
				physicsWorld.setGravity(new Ammo.btVector3(0, gravityConstant, 0));
				
				// 设置世界信息中的重力（有些Ammo组件需要从这里获取重力）
				// 确保所有物理对象使用相同的重力值
				physicsWorld.getWorldInfo().set_m_gravity(new Ammo.btVector3(0, gravityConstant, 0));

				// 创建变换辅助对象
				// 这个对象将在更新循环中被重复使用
				// 用于获取和设置物理对象的位置和旋转
				transformAux1 = new Ammo.btTransform();
			}

			// ---------- 场景对象创建 ----------
			
			/**
			 * 创建场景中的所有对象
			 * 包括地面、砖墙、布料、机械臂等
			 * 每个对象都有图形表示（Three.js）和物理表示（Ammo.js）
			 */
			function createObjects() {
				// 创建临时变量，用于对象的位置和旋转
				// 这些变量将被重复使用以节省内存
				const pos = new THREE.Vector3();  // 位置向量（x, y, z）
				const quat = new THREE.Quaternion(); // 四元数（用于表示3D旋转）

				// ========== 第一部分：创建地面 ==========
				
				// 设置地面的位置（位于场景中心下方0.5单位处）
				pos.set(0, -0.5, 0);
				
				// 设置地面的旋转（无旋转，单位四元数）
				quat.set(0, 0, 0, 1);
				
				// 使用辅助函数创建立方体刚体作为地面
				// 参数说明：
				// 40, 1, 40 - 地面的宽度、高度、深度
				// 0 - 质量为0表示静态物体（不会移动）
				// pos, quat - 位置和旋转
				// new THREE.MeshPhongMaterial({ color: 0xffffff }) - 白色Phong材质
				const ground = createParalellepiped(
					40, 1, 40,
					0,
					pos,
					quat,
					new THREE.MeshPhongMaterial({ color: 0xffffff })
				);
				
				// 启用地面的阴影功能
				ground.castShadow = true;    // 地面可以投射阴影
				ground.receiveShadow = true; // 地面可以接收阴影
				
				// 为地面加载网格纹理
				// 这会使地面看起来像网格线，帮助观察物体的位置和比例
				textureLoader.load('textures/grid.png', function (texture) {
					// 设置纹理的颜色空间为sRGB，确保颜色正确显示
					texture.colorSpace = THREE.SRGBColorSpace;
					
					// 设置纹理的包裹模式为重复
					// 这样小纹理可以平铺覆盖整个地面
					texture.wrapS = THREE.RepeatWrapping;
					texture.wrapT = THREE.RepeatWrapping;
					
					// 设置纹理在U和V方向上的重复次数
					// 40x40表示纹理在整个地面上重复40×40次
					texture.repeat.set(40, 40);
					
					// 将纹理设置为地面的漫反射贴图
					ground.material.map = texture;
					
					// 标记材质需要更新，Three.js会重新编译着色器
					ground.material.needsUpdate = true;
				});

				// ========== 第二部分：创建砖墙 ==========
				
				// 砖块的基本物理属性
				const brickMass = 0.5;           // 单块砖的质量（千克）
				const brickLength = 1.2;         // 砖的长度（X轴方向）
				const brickDepth = 0.6;          // 砖的深度/厚度（Y轴方向）
				const brickHeight = brickLength * 0.5; // 砖的高度（Z轴方向）
				
				// 砖墙的尺寸
				const numBricksLength = 6;  // 每行的砖块数量
				const numBricksHeight = 8;  // 砖墙的层数
				
				// 计算砖墙的起始Z坐标
				// 将砖墙居中放置，所以从负半宽开始
				const z0 = -numBricksLength * brickLength * 0.5;
				
				// 设置第一块砖的位置
				// Y轴：半砖高度，这样砖块底部在地面上
				// Z轴：从计算好的起始位置开始
				pos.set(0, brickHeight * 0.5, z0);
				quat.set(0, 0, 0, 1); // 无旋转

				// 外层循环：逐层创建砖墙
				for (let j = 0; j < numBricksHeight; j++) {
					// 判断当前行是否为奇数行
					// 砖墙通常采用交错排列，增加稳定性
					const oddRow = (j % 2) == 1;
					
					// 每行开始时，重置Z坐标到起始位置
					pos.z = z0;
					
					// 如果是奇数行，将整行砖向右偏移半砖
					// 这样形成交错排列的效果
					if (oddRow) {
						pos.z -= 0.25 * brickLength;
					}
					
					// 计算当前行需要的砖块数量
					// 奇数行比偶数行多一块砖，以完成交错排列
					const nRow = oddRow ? numBricksLength + 1 : numBricksLength;
					
					// 内层循环：创建当前行的每一块砖
					for (let i = 0; i < nRow; i++) {
						// 默认使用完整的砖块尺寸和质量
						let brickLengthCurrent = brickLength;
						let brickMassCurrent = brickMass;
						
						// 如果是奇数行的第一块或最后一块砖
						// 使用半砖，以完成交错排列
						if (oddRow && (i == 0 || i == nRow - 1)) {
							brickLengthCurrent *= 0.5;  // 长度减半
							brickMassCurrent *= 0.5;    // 质量相应减半
						}
						
						// 创建单块砖
						// 使用随机颜色的材质，使砖墙看起来更自然
						const brick = createParalellepiped(
							brickDepth,
							brickHeight,
							brickLengthCurrent,
							brickMassCurrent,
							pos,
							quat,
							createMaterial() // 创建随机颜色的材质
						);
						
						// 启用砖块的阴影
						brick.castShadow = true;
						brick.receiveShadow = true;
						
						// 更新下一块砖的Z坐标位置
						if (oddRow && (i == 0 || i == nRow - 2)) {
							// 对于奇数行的特殊位置，使用特殊偏移
							pos.z += 0.75 * brickLength;
						} else {
							// 正常情况下，移动一块砖的长度
							pos.z += brickLength;
						}
					}
					
					// 完成一行后，Y坐标上升一层砖的高度
					// 开始创建下一层
					pos.y += brickHeight;
				}

				// ========== 第三部分：创建布料 ==========
				
				// 布料的图形属性
				const clothWidth = 4;       // 布料的宽度（单位）
				const clothHeight = 3;      // 布料的高度（单位）
				const clothNumSegmentsZ = clothWidth * 5;  // Z轴细分段数
				const clothNumSegmentsY = clothHeight * 5; // Y轴细分段数
				const clothPos = new THREE.Vector3(-3, 3, 2); // 布料的初始位置
				
				// 创建布料的几何体
				// PlaneGeometry创建一个平面，参数为：
				// clothWidth, clothHeight - 平面的宽度和高度
				// clothNumSegmentsZ, clothNumSegmentsY - 宽度和高度的分段数
				// 更多分段数意味着更精细的布料模拟，但性能消耗更大
				const clothGeometry = new THREE.PlaneGeometry(
					clothWidth,
					clothHeight,
					clothNumSegmentsZ,
					clothNumSegmentsY
				);
				
				// 将布料旋转90度，使其垂直悬挂
				// 默认平面是水平（XY平面）的，旋转后变成垂直（XZ平面）
				clothGeometry.rotateY(Math.PI * 0.5);
				
				// 将布料几何体移动到正确的位置
				// 调整位置使布料的中心点与物理模拟的锚点对齐
				clothGeometry.translate(
					clothPos.x,
					clothPos.y + clothHeight * 0.5,
					clothPos.z - clothWidth * 0.5
				);

				// 创建布料的材质
				// MeshLambertMaterial使用朗伯反射模型，适合布料这种无光泽表面
				// 参数说明：
				// color: 0xffffff - 白色
				// side: THREE.DoubleSide - 双面渲染，布料两面都可见
				const clothMaterial = new THREE.MeshLambertMaterial({
					color: 0xffffff,
					side: THREE.DoubleSide
				});
				
				// 创建布料的网格对象
				cloth = new THREE.Mesh(clothGeometry, clothMaterial);
				
				// 启用布料的阴影功能
				cloth.castShadow = true;
				cloth.receiveShadow = true;
				
				// 将布料添加到场景中
				scene.add(cloth);

				// 为布料加载网格纹理
				// 网格纹理可以帮助观察布料的变形和运动
				textureLoader.load('textures/grid.png', function (texture) {
					texture.colorSpace = THREE.SRGBColorSpace;
					texture.wrapS = THREE.RepeatWrapping;
					texture.wrapT = THREE.RepeatWrapping;
					
					// 纹理重复次数与几何体分段数相同
					// 这样每个布料网格单元都有一个网格线
					texture.repeat.set(clothNumSegmentsZ, clothNumSegmentsY);
					
					cloth.material.map = texture;
					cloth.material.needsUpdate = true;
				});

				// 创建布料的物理体（软体）
				// btSoftBodyHelpers提供了创建各种软体的辅助函数
				const softBodyHelpers = new Ammo.btSoftBodyHelpers();
				
				// 定义布料四个角点的物理坐标
				// 这些点定义了布料在物理世界中的初始位置和大小
				// 注意：这些坐标必须与Three.js几何体的位置匹配
				const clothCorner00 = new Ammo.btVector3(clothPos.x, clothPos.y + clothHeight, clothPos.z);
				const clothCorner01 = new Ammo.btVector3(clothPos.x, clothPos.y + clothHeight, clothPos.z - clothWidth);
				const clothCorner10 = new Ammo.btVector3(clothPos.x, clothPos.y, clothPos.z);
				const clothCorner11 = new Ammo.btVector3(clothPos.x, clothPos.y, clothPos.z - clothWidth);
				
				// 使用CreatePatch函数创建布料软体
				// 参数说明：
				// 1. physicsWorld.getWorldInfo() - 物理世界信息，包含重力等全局设置
				// 2-5. 布料的四个角点（左上、右上、左下、右下）
				// 6-7. 布料的细分段数（宽度和高度方向）
				// 8. 固定点标志（0表示没有固定点）
				// 9. 是否生成对角线约束（true表示生成，增加布料稳定性）
				const clothSoftBody = softBodyHelpers.CreatePatch(
					physicsWorld.getWorldInfo(),
					clothCorner00,
					clothCorner01,
					clothCorner10,
					clothCorner11,
					clothNumSegmentsZ + 1,  // 节点数 = 段数 + 1
					clothNumSegmentsY + 1,
					0,      // 没有固定点，整个布料自由运动
					true    // 生成对角线约束，防止布料过度拉伸
				);
				
				// 获取布料的配置对象，设置软体模拟参数
				const sbConfig = clothSoftBody.get_m_cfg();
				sbConfig.set_viterations(10);  // 速度迭代次数，影响布料模拟的精度和稳定性
				sbConfig.set_piterations(10);  // 位置迭代次数，影响约束求解的精度
				
				// 设置布料的总质量
				// 第一个参数：总质量值
				// 第二个参数：是否从当前质量计算（false表示直接设置）
				clothSoftBody.setTotalMass(0.9, false);
				
				// 设置布料的碰撞边缘
				// 比刚体更大的边缘可以防止布料与其他物体穿插
				// castObject用于将软体转换为碰撞对象，以便访问碰撞相关方法
				Ammo.castObject(clothSoftBody, Ammo.btCollisionObject).getCollisionShape().setMargin(margin * 3);
				
				// 将布料软体添加到物理世界
				// 参数说明：
				// 1. 软体对象本身
				// 2. 碰撞组（1表示默认组）
				// 3. 碰撞掩码（-1表示与所有组碰撞）
				physicsWorld.addSoftBody(clothSoftBody, 1, -1);
				
				// 将物理体存储到Three.js对象的用户数据中
				// 这样在更新循环中可以方便地访问物理体
				cloth.userData.physicsBody = clothSoftBody;
				
				// 设置布料的激活状态为4（禁用休眠）
				// 布料的休眠状态值：
				// 1: ACTIVE_TAG
				// 2: ISLAND_SLEEPING
				// 3: WANTS_DEACTIVATION
				// 4: DISABLE_DEACTIVATION
				// 5: DISABLE_SIMULATION
				clothSoftBody.setActivationState(4);

				// ========== 第四部分：创建机械臂系统 ==========
				
				// 机械臂的物理属性
				const armMass = 2;                     // 机械臂的质量
				const armLength = 3 + clothWidth;      // 机械臂的长度（延伸超过布料宽度）
				const pylonHeight = clothPos.y + clothHeight; // 支柱的高度（与布料顶部对齐）
				
				// 机械臂系统的材质（统一的灰色）
				const baseMaterial = new THREE.MeshPhongMaterial({ color: 0x606060 });

				// 创建底座（支撑整个机械臂系统）
				pos.set(clothPos.x, 0.1, clothPos.z - armLength);
				quat.set(0, 0, 0, 1);
				const base = createParalellepiped(1, 0.2, 1, 0, pos, quat, baseMaterial);
				base.castShadow = true;
				base.receiveShadow = true;

				// 创建支柱（支撑机械臂旋转）
				pos.set(clothPos.x, 0.5 * pylonHeight, clothPos.z - armLength);
				const pylon = createParalellepiped(0.4, pylonHeight, 0.4, 0, pos, quat, baseMaterial);
				pylon.castShadow = true;
				pylon.receiveShadow = true;

				// 创建机械臂（悬挂布料的部分）
				pos.set(clothPos.x, pylonHeight + 0.2, clothPos.z - 0.5 * armLength);
				const arm = createParalellepiped(0.4, 0.4, armLength + 0.4, armMass, pos, quat, baseMaterial);
				arm.castShadow = true;
				arm.receiveShadow = true;

				// ========== 第五部分：建立布料与机械臂的连接 ==========
				
				// 将布料的顶部两个顶点锚定到机械臂上
				// 这模拟了布料悬挂在机械臂上的效果
				const influence = 0.5; // 锚点影响系数（0-1），1表示完全固定
				
				// 将布料的第一个顶点（左上角）锚定到机械臂
				// 参数说明：
				// 1. 顶点索引（0表示第一个顶点）
				// 2. 锚定的刚体（机械臂）
				// 3. 是否允许碰撞（false表示不允许）
				// 4. 影响系数
				clothSoftBody.appendAnchor(0, arm.userData.physicsBody, false, influence);
				
				// 将布料的最后一个顶点（右上角）锚定到机械臂
				// clothNumSegmentsZ是水平方向的顶点数减1
				clothSoftBody.appendAnchor(clothNumSegmentsZ, arm.userData.physicsBody, false, influence);

				// ========== 第六部分：创建机械臂的铰链约束 ==========
				
				// 定义铰链约束的支点（在支柱和机械臂上的连接点）
				// 这些点在局部坐标系中定义
				const pivotA = new Ammo.btVector3(0, pylonHeight * 0.5, 0);    // 支柱上的支点（中心偏上）
				const pivotB = new Ammo.btVector3(0, -0.2, -armLength * 0.5);   // 机械臂上的支点（中心偏下偏后）
				
				// 定义旋转轴（Y轴）
				// 铰链将围绕这个轴旋转
				const axis = new Ammo.btVector3(0, 1, 0);
				
				// 创建铰链约束
				// btHingeConstraint允许物体围绕一个轴旋转（像门铰链）
				// 参数说明：
				// 1. 第一个刚体（支柱）
				// 2. 第二个刚体（机械臂）
				// 3. 第一个刚体上的支点（局部坐标）
				// 4. 第二个刚体上的支点（局部坐标）
				// 5. 第一个刚体的旋转轴
				// 6. 第二个刚体的旋转轴
				// 7. 是否使用第一个刚体的坐标系作为参考（true表示是）
				hinge = new Ammo.btHingeConstraint(
					pylon.userData.physicsBody,
					arm.userData.physicsBody,
					pivotA,
					pivotB,
					axis,
					axis,
					true
				);
				
				// 将铰链约束添加到物理世界
				// 第二个参数true表示禁用相关刚体的碰撞
				// 这可以防止支柱和机械臂相互碰撞产生不稳定
				physicsWorld.addConstraint(hinge, true);
			}

			// ---------- 辅助函数：创建立方体刚体 ----------
			
			/**
			 * 创建立方体（长方体）刚体的辅助函数
			 * 这个函数同时创建了Three.js的图形对象和Ammo.js的物理对象
			 * 并将它们关联起来
			 * 
			 * @param {number} sx - X轴方向的尺寸（宽度）
			 * @param {number} sy - Y轴方向的尺寸（高度）
			 * @param {number} sz - Z轴方向的尺寸（深度）
			 * @param {number} mass - 物体的质量（0表示静态物体）
			 * @param {THREE.Vector3} pos - 物体的位置（Three.js坐标）
			 * @param {THREE.Quaternion} quat - 物体的旋转（四元数）
			 * @param {THREE.Material} material - Three.js材质对象
			 * @returns {THREE.Mesh} 返回Three.js网格对象
			 */
			function createParalellepiped(sx, sy, sz, mass, pos, quat, material) {
				// 创建Three.js的立方体网格对象
				// BoxGeometry参数：宽度、高度、深度、宽度分段、高度分段、深度分段
				// 分段数都设为1，因为我们不需要细分这个简单的立方体
				const threeObject = new THREE.Mesh(
					new THREE.BoxGeometry(sx, sy, sz, 1, 1, 1),
					material
				);
				
				// 创建Ammo.js的立方体碰撞形状
				// btBoxShape参数：半宽、半高、半深
				// Ammo使用半尺寸，所以将尺寸除以2
				const shape = new Ammo.btBoxShape(new Ammo.btVector3(sx * 0.5, sy * 0.5, sz * 0.5));
				
				// 设置碰撞形状的边缘余量
				// 边缘余量防止物体在接触时相互穿透
				shape.setMargin(margin);

				// 调用通用函数创建刚体
				// 这个函数将Three.js对象和Ammo.js物理体关联起来
				createRigidBody(threeObject, shape, mass, pos, quat);

				// 返回Three.js对象，方便后续操作（如设置阴影）
				return threeObject;
			}

			// ---------- 辅助函数：创建刚体 ----------
			
			/**
			 * 创建刚体并将其绑定到Three.js对象的通用函数
			 * 这个函数处理了Three.js和Ammo.js之间的所有集成工作
			 * 
			 * @param {THREE.Mesh} threeObject - Three.js网格对象
			 * @param {Ammo.btCollisionShape} physicsShape - Ammo碰撞形状
			 * @param {number} mass - 物体的质量
			 * @param {THREE.Vector3} pos - 初始位置
			 * @param {THREE.Quaternion} quat - 初始旋转
			 */
			function createRigidBody(threeObject, physicsShape, mass, pos, quat) {
				// 设置Three.js对象的初始位置和旋转
				// 这些值将同时用于图形和物理表示
				threeObject.position.copy(pos);
				threeObject.quaternion.copy(quat);

				// 创建Ammo变换对象
				// 变换对象包含了位置和旋转信息
				const transform = new Ammo.btTransform();
				transform.setIdentity(); // 初始化为单位变换
				
				// 设置变换的原点（位置）
				// 注意：Ammo使用btVector3，需要从THREE.Vector3转换
				transform.setOrigin(new Ammo.btVector3(pos.x, pos.y, pos.z));
				
				// 设置变换的旋转（四元数）
				// 同样需要从THREE.Quaternion转换到Ammo.btQuaternion
				transform.setRotation(new Ammo.btQuaternion(quat.x, quat.y, quat.z, quat.w));

				// 创建运动状态对象
				// 运动状态管理物体的位置和旋转随时间的变化
				// btDefaultMotionState是Bullet中最常用的运动状态
				const motionState = new Ammo.btDefaultMotionState(transform);

				// 计算局部惯性张量
				// 惯性张量描述了物体的质量分布，影响旋转行为
				// 对于静态物体（质量=0），惯性为0
				const localInertia = new Ammo.btVector3(0, 0, 0);
				if (mass > 0) {
					// 只有动态物体才需要计算惯性
					physicsShape.calculateLocalInertia(mass, localInertia);
				}

				// 创建刚体构造信息
				// btRigidBodyConstructionInfo包含创建刚体所需的所有参数
				const rbInfo = new Ammo.btRigidBodyConstructionInfo(
					mass,           // 质量
					motionState,    // 运动状态
					physicsShape,   // 碰撞形状
					localInertia    // 局部惯性
				);
				
				// 创建刚体对象
				const body = new Ammo.btRigidBody(rbInfo);

				// 将物理体存储到Three.js对象的用户数据中
				// 这样在更新循环中可以方便地访问和更新物理状态
				threeObject.userData.physicsBody = body;

				// 将Three.js对象添加到场景中
				// 这样物体才会在3D场景中显示
				scene.add(threeObject);

				// 如果是动态物体（质量大于0），将其添加到刚体数组
				// 刚体数组用于在每帧更新所有动态物体的位置
				if (mass > 0) {
					rigidBodies.push(threeObject);
					
					// 设置刚体的激活状态为4（禁用休眠）
					// 这确保物体始终参与物理模拟，不会因为静止而"休眠"
					body.setActivationState(4);
				}

				// 将刚体添加到物理世界
				// 从此，物理世界将管理这个物体的运动、碰撞等物理行为
				physicsWorld.addRigidBody(body);
			}

			// ---------- 辅助函数：创建随机颜色 ----------
			
			/**
			 * 生成随机颜色的辅助函数
			 * 这个函数用于为砖墙的砖块生成随机的颜色
			 * 使砖墙看起来更自然、更有层次感
			 * 
			 * @returns {number} 返回一个随机的24位颜色值（十六进制）
			 */
			function createRandomColor() {
				// Math.random()生成0-1的随机数
				// 1 << 24等于2^24=16777216，这是24位颜色的最大值
				// Math.floor向下取整，得到0到16777215之间的整数
				// 这个整数可以转换为十六进制颜色代码（如0xFF0000是红色）
				return Math.floor(Math.random() * (1 << 24));
			}

			// ---------- 辅助函数：创建随机颜色材质 ----------
			
			/**
			 * 创建随机颜色材质的辅助函数
			 * 这个函数包装了createRandomColor()，直接返回Three.js材质对象
			 * 方便在创建物体时直接使用
			 * 
			 * @returns {THREE.MeshPhongMaterial} 返回随机颜色的Phong材质
			 */
			function createMaterial() {
				// MeshPhongMaterial使用Phong光照模型
				// Phong模型支持高光反射，使物体看起来有光泽
				// 适合砖块这种有一定反光的材质
				return new THREE.MeshPhongMaterial({ color: createRandomColor() });
			}

			// ---------- 输入系统初始化 ----------
			
			/**
			 * 初始化用户输入系统
			 * 这个函数设置键盘事件监听器，用于控制机械臂的运动
			 */
			function initInput() {
				// 监听键盘按下事件
				// 当用户按下键盘上的键时触发
				window.addEventListener('keydown', function (event) {
					// event.keyCode包含被按下键的键码
					// 键码是表示键盘上特定键的数字标识
					switch (event.keyCode) {
						// 键码81对应'Q'键
						// 'Q'键控制机械臂向上旋转（逆时针）
						case 81:
							armMovement = 1; // 设置为向上运动
							break;
						
						// 键码65对应'A'键
						// 'A'键控制机械臂向下旋转（顺时针）
						case 65:
							armMovement = -1; // 设置为向下运动
							break;
						
						// 可以在这里添加更多按键控制
						// default:
						//     console.log('未处理的按键:', event.keyCode);
					}
				});

				// 监听键盘释放事件
				// 当用户释放键盘上的键时触发
				window.addEventListener('keyup', function () {
					// 无论释放哪个键，都将机械臂运动设置为0（停止）
					// 这实现了松开按键即停止运动的控制方式
					armMovement = 0;
				});
				
				// 注意：这里没有添加触摸或游戏手柄支持
				// 在实际项目中，可能需要添加这些输入方式以提高可访问性
			}

			// ---------- 窗口大小变化处理 ----------
			
			/**
			 * 窗口大小变化事件处理函数
			 * 当用户调整浏览器窗口大小时，需要更新相机和渲染器
			 * 以确保3D场景正确显示，不变形
			 */
			function onWindowResize() {
				// 更新相机的宽高比
				// 宽高比 = 窗口宽度 / 窗口高度
				// 如果宽高比不正确，场景会被拉伸或压缩
				camera.aspect = window.innerWidth / window.innerHeight;
				
				// 通知相机投影矩阵已更改
				// 必须在更改相机参数后调用此方法
				camera.updateProjectionMatrix();
				
				// 更新渲染器的大小
				// 渲染器需要知道新的窗口尺寸，以便正确绘制
				renderer.setSize(window.innerWidth, window.innerHeight);
				
				// 注意：这里没有更新控制器的目标或其他UI元素
				// 在实际项目中，可能需要更新其他与窗口大小相关的设置
			}

			// ---------- 动画循环 ----------
			
			/**
			 * 主动画循环函数
			 * 这个函数由Three.js的渲染器在每一帧自动调用
			 * 它负责更新场景和渲染新的一帧
			 */
			function animate() {
				// 调用渲染函数，绘制当前帧
				render();
				
				// 更新性能统计器
				// 这会更新显示的FPS、内存使用等信息
				stats.update();
				
				// 注意：这个函数不直接控制更新频率
				// 更新频率由浏览器的requestAnimationFrame控制
				// 通常是60Hz（每秒60帧），但可能因设备性能而变化
			}

			// ---------- 渲染函数 ----------
			
			/**
			 * 渲染函数，负责绘制单帧
			 * 这个函数执行以下操作：
			 * 1. 计算时间增量
			 * 2. 更新物理模拟
			 * 3. 渲染3D场景
			 */
			function render() {
				// 获取自上一帧以来的时间增量（秒）
				// 这对于与帧率无关的物理模拟非常重要
				// 确保无论帧率高还是低，物理模拟的速度都是恒定的
				const deltaTime = clock.getDelta();
				
				// 更新物理模拟
				// 这是整个应用中最关键的部分之一
				// 物理模拟的结果将决定所有物体的位置和旋转
				updatePhysics(deltaTime);
				
				// 使用Three.js渲染器将场景绘制到屏幕上
				// 参数：场景和相机
				// Three.js会处理光照、阴影、材质等所有细节
				renderer.render(scene, camera);
			}

			// ---------- 物理更新函数 ----------
			
			/**
			 * 更新物理模拟的核心函数
			 * 这个函数执行以下操作：
			 * 1. 控制机械臂铰链电机
			 * 2. 执行物理世界模拟步进
			 * 3. 更新布料顶点位置
			 * 4. 更新刚体位置和旋转
			 * 
			 * @param {number} deltaTime - 自上一帧以来的时间增量（秒）
			 */
			function updatePhysics(deltaTime) {
				// ---------- 步骤1：控制机械臂铰链电机 ----------
				
				// 启用铰链的角电机（旋转电机）
				// 参数说明：
				// 1. true - 启用电机
				// 2. 0.8 * armMovement - 期望速度（正值为逆时针，负值为顺时针）
				//    armMovement为-1、0或1，乘以0.8得到实际速度
				// 3. 50 - 最大电机冲量（扭矩），值越大加速越快
				hinge.enableAngularMotor(true, 0.8 * armMovement, 50);

				// ---------- 步骤2：执行物理世界模拟步进 ----------
				
				// stepSimulation是物理模拟的核心函数
				// 它计算所有物体的运动、碰撞、约束等
				// 参数说明：
				// 1. deltaTime - 要模拟的时间长度（秒）
				// 2. 10 - 最大子步数（将deltaTime分成最多10个小步进行模拟）
				// 子步数越多，模拟越精确，但性能消耗越大
				// 3. 1/60 - 固定时间步长（未指定，使用默认值）
				physicsWorld.stepSimulation(deltaTime, 10);

				// ---------- 步骤3：更新布料顶点位置 ----------
				
				// 从Three.js布料对象的用户数据中获取物理软体对象
				const softBody = cloth.userData.physicsBody;
				
				// 获取布料几何体的顶点位置数组
				// 这个数组包含了所有顶点的x、y、z坐标
				// 数组结构：[x1, y1, z1, x2, y2, z2, ...]
				const clothPositions = cloth.geometry.attributes.position.array;
				
				// 计算顶点总数（每个顶点有3个坐标值）
				const numVerts = clothPositions.length / 3;
				
				// 获取软体的所有节点（物理顶点）
				const nodes = softBody.get_m_nodes();
				
				// 顶点数组索引，用于遍历和更新顶点坐标
				let indexFloat = 0;

				// 遍历所有顶点，将物理位置复制到图形位置
				for (let i = 0; i < numVerts; i++) {
					// 获取第i个物理节点
					// at()方法返回指定索引的节点引用
					const node = nodes.at(i);
					
					// 获取节点的当前位置
					// get_m_x()返回节点的世界坐标
					const nodePos = node.get_m_x();
					
					// 将物理坐标复制到Three.js顶点数组
					// 注意：Ammo.js和Three.js使用相同的坐标系（右手坐标系）
					clothPositions[indexFloat++] = nodePos.x(); // X坐标
					clothPositions[indexFloat++] = nodePos.y(); // Y坐标
					clothPositions[indexFloat++] = nodePos.z(); // Z坐标
				}

				// 更新布料几何体的法线
				// 法线是垂直于表面的向量，用于光照计算
				// 当顶点位置改变时，法线必须重新计算
				cloth.geometry.computeVertexNormals();
				
				// 标记顶点位置属性需要更新
				// 这会通知Three.js的渲染系统上传新数据到GPU
				cloth.geometry.attributes.position.needsUpdate = true;
				
				// 标记法线属性需要更新
				cloth.geometry.attributes.normal.needsUpdate = true;

				// ---------- 步骤4：更新刚体位置和旋转 ----------
				
				// 遍历所有动态刚体
				for (let i = 0, il = rigidBodies.length; i < il; i++) {
					// 获取Three.js对象
					const objThree = rigidBodies[i];
					
					// 从用户数据中获取对应的Ammo物理体
					const objPhys = objThree.userData.physicsBody;
					
					// 获取物理体的运动状态
					// 运动状态管理物体的位置和旋转
					const ms = objPhys.getMotionState();
					
					// 如果运动状态存在（应该总是存在）
					if (ms) {
						// 获取物体在世界坐标系中的当前变换
						// getWorldTransform将变换信息写入transformAux1
						ms.getWorldTransform(transformAux1);
						
						// 从变换中提取位置（原点）
						const p = transformAux1.getOrigin();
						
						// 从变换中提取旋转（四元数）
						const q = transformAux1.getRotation();
						
						// 将物理位置应用到Three.js对象
						objThree.position.set(p.x(), p.y(), p.z());
						
						// 将物理旋转应用到Three.js对象
						objThree.quaternion.set(q.x(), q.y(), q.z(), q.w());
						
						// 注意：这里没有直接设置缩放
						// 物理模拟通常不改变物体的缩放
					}
				}
				
				// ---------- 性能优化说明 ----------
				// 1. 重用transformAux1对象，避免每帧创建新对象
				// 2. 将rigidBodies.length缓存到il变量中，避免每次循环都查询
				// 3. 按顺序更新所有物体，保证缓存友好性
				// 这些优化对于维持高帧率非常重要
			}
		</script>
	</body>
</html>