<!-- Ammo.js软体绳索物理模拟演示
🎯 核心功能概述
这是一个基于Three.js和Ammo.js的交互式物理模拟演示，展示了软体绳索、刚体碰撞和约束系统的完整实现。用户可以通过键盘控制机械臂，观察物理链式反应：机械臂运动 → 绳索摆动 → 球体移动 → 砖墙碰撞。

🔧 主要技术栈
1. 图形渲染层
Three.js：WebGL 3D渲染库

BufferGeometry：高效顶点数据管理

Phong着色模型：实现逼真光照和材质

阴影映射：实时动态阴影

OrbitControls：用户视角交互控制

2. 物理模拟层
Ammo.js：Bullet物理引擎的JavaScript移植版

WASM加速：使用WebAssembly提高性能

多体动力学：支持刚体、软体混合模拟

约束系统：铰链约束实现旋转关节

3. 软体物理实现
text
绳索结构：
节点(Node) --- 弹簧(Spring) --- 节点
    |               |               |
  质量点          弹性约束         质量点
    |               |               |
锚点约束         弯曲刚度         锚点约束
📐 物理系统架构
1. 碰撞检测管线
text
┌─────────────────┐    ┌─────────────────┐    ┌─────────────────┐
│   宽相检测      │ →  │   窄相检测      │ →  │   碰撞响应      │
│   (Broadphase)  │    │   (Narrowphase) │    │   (Solver)      │
└─────────────────┘    └─────────────────┘    └─────────────────┘
     快速筛选               精确检测              约束求解
    可能碰撞对             几何相交             冲量应用
2. 软体求解流程
javascript
// 软体配置参数
sbConfig.set_viterations(10);  // 速度迭代次数
sbConfig.set_piterations(10);  // 位置迭代次数
ropeSoftBody.setTotalMass(3, false);  // 总质量3kg
3. 约束类型
锚点约束：将绳索端点固定到刚体

铰链约束：限制机械臂单轴旋转

接触约束：处理物体间的碰撞接触

🏗️ 场景对象层次
1. 静态环境
javascript
地面 (静态刚体)
├── 尺寸: 40×1×40单位
├── 质量: 0 (无限大)
└── 网格纹理: 重复40×40次
2. 动态刚体
javascript
球体 (动态刚体)
├── 半径: 0.6单位
├── 质量: 1.2kg
├── 摩擦系数: 0.5
└── 形状: btSphereShape
3. 砖墙结构
javascript
砖墙 (复合刚体系统)
├── 布局: 8层×6列交错排列
├── 单砖尺寸: 0.6×0.6×1.2
├── 交错算法: 奇数行偏移1/4砖
└── 物理特性: 可倒塌的堆叠结构
4. 绳索系统
javascript
软体绳索 (质点-弹簧系统)
├── 段数: 10段，11个节点
├── 长度: 4单位
├── 质量: 3kg (均匀分布)
├── 锚点: 
│   ├── 起点→球体 (固定连接)
│   └── 终点→机械臂 (固定连接)
└── 求解迭代: 速度10次，位置10次
5. 机械臂系统
javascript
机械臂装置 (铰链约束系统)
├── 基座: 静态固定平台
├── 支柱: 垂直支撑结构 (静态)
├── 机械臂: 可旋转部件 (动态，2kg)
└── 铰链约束:
    ├── 旋转轴: Y轴 (垂直方向)
    ├── 电机控制: 键盘Q/A键
    └── 最大扭矩: 50N·m
⚙️ 关键算法实现
1. 物理-图形同步机制
javascript
// 更新循环中的双向数据流
function updatePhysics(deltaTime) {
    // 1. 用户输入 → 物理控制
    hinge.enableAngularMotor(true, 1.5 * armMovement, 50);
    
    // 2. 物理模拟步进
    physicsWorld.stepSimulation(deltaTime, 10);
    
    // 3. 物理状态 → 图形更新
    // 软体更新
    for (节点 in 软体) {
        顶点位置 = 节点.物理位置;
    }
    
    // 刚体更新
    for (刚体 in 刚体数组) {
        图形对象.位置 = 物理刚体.位置;
        图形对象.旋转 = 物理刚体.旋转;
    }
}
2. 软体动力学计算
弹簧力计算：胡克定律 $F = -k \cdot \Delta x$

阻尼力计算：速度相关阻力 $F_d = -c \cdot v$

约束投影：保持绳索长度不变

碰撞响应：与刚体的交互处理

3. 性能优化策略
javascript
// 1. 对象重用（避免GC）
const transformAux1 = new Ammo.btTransform(); // 复用变换对象

// 2. 缓冲区更新（最小化GPU上传）
rope.geometry.attributes.position.needsUpdate = true;

// 3. 停用状态管理（静止物体优化）
body.setActivationState(4); // DISABLE_DEACTIVATION

// 4. 碰撞过滤（减少检测对）
physicsWorld.addSoftBody(ropeSoftBody, 1, -1);
🎮 交互系统设计
1. 输入处理链
text
键盘事件 → 状态变量 → 物理电机 → 铰链旋转 → 绳索摆动
   ↓
KeyDown → armMovement → hinge.setMotor → 机械臂旋转
   ↓
KeyUp → armMovement=0 → hinge.disableMotor → 停止运动
2. 物理响应链
text
机械臂旋转 → 绳索端点位移 → 弹簧力传播 → 球体受力
   ↓
铰链约束 → 锚点约束 → 软体动力学 → 刚体动力学
   ↓
电机扭矩 → 位置约束 → 内部节点 → 外部碰撞
📊 性能特性
1. 计算复杂度
text
物体数量: ~50个物理对象
碰撞对数量: ~1000对（宽相筛选后）
求解迭代: 每个子步10次
帧率目标: 60FPS (16.7ms/帧)
2. 内存使用
text
Three.js: 顶点缓冲区、纹理、材质
Ammo.js: 物理形状、刚体、约束对象
双重表示: 每个物理对象对应图形对象
3. 渲染负载
text
阴影计算: 1024×1024阴影贴图
顶点处理: ~1000个顶点
绘制调用: ~10次/帧
🔍 技术亮点
1. 混合物理模拟
刚体与软体的无缝交互

多约束类型协同工作

实时物理反馈循环

2. 可视化调试
线段显示绳索内部结构

实时性能统计显示

交互式摄像机控制

3. 工程化实践
ES6模块化组织

资源异步加载

响应式布局适配

错误弹性设计 -->


<html lang="zh-CN">
	<head>
		<!-- 
			标题：Ammo.js物理引擎软体绳索演示
			描述：展示Three.js与Ammo.js集成的物理模拟，包含软体绳索、刚体碰撞和约束系统
		-->
		<title>Ammo.js物理引擎软体绳索演示</title>
		<meta charset="utf-8">
		<!-- 
			视口设置：
			width=device-width: 宽度等于设备宽度
			user-scalable=no: 禁止用户缩放
			minimum-scale=1.0: 最小缩放比例为1
			maximum-scale=1.0: 最大缩放比例为1
			确保在不同设备上保持一致的显示效果
		-->
		<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">
		<!-- 内联CSS样式：设置基础文本颜色 -->
		<style>
			body {
				color: #333; /* 深灰色文本，提高可读性 */
			}
		</style>
	</head>
	<body>
	<!-- 
		演示信息面板：
		显示操作说明和演示标题
		位置：屏幕左上角，提供用户操作指引
	-->
	<div id="info">Ammo.js物理引擎软体绳索演示<br>按Q键抬起机械臂，按A键放下机械臂</div>
	<!-- 
		三维渲染容器：
		Three.js将在这个div内渲染3D场景
		id="container" 用于JavaScript中获取DOM引用
	-->
	<div id="container"></div>

	<!-- 
		Ammo.js物理引擎库（WebAssembly版本）：
		基于Bullet物理引擎的JavaScript移植
		使用WASM版本提高性能，支持软体物理模拟
		注意：此文件必须先于主脚本加载
	-->
	<script src="jsm/libs/ammo.wasm.js"></script>

	<!-- 
		ES模块导入映射表（Import Map）：
		现代JavaScript模块化解决方案
		定义模块名称到实际文件路径的映射
		允许使用简洁的模块名称而不是相对路径
	-->
	<script type="importmap">
		{
			"imports": {
				"three": "../build/three.module.js",
				"three/addons/": "./jsm/"
			}
		}
	</script>

	<!-- 
		主应用程序模块：
		type="module" 声明这是一个ES6模块
		模块化代码，支持import/export语法
	-->
	<script type="module">
		// ==================== 模块导入区域 ====================
		// 导入Three.js核心库的所有功能，THREE作为命名空间
		import * as THREE from 'three';

		// 导入性能监控器（Stats.js）
		// 用于显示帧率、渲染时间等性能指标
		import Stats from 'three/addons/libs/stats.module.js';

		// 导入轨道控制器（OrbitControls）
		// 提供鼠标控制摄像机旋转、缩放和平移的功能
		import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

		// ==================== 图形渲染变量声明 ====================
		// DOM容器和性能统计对象
		let container, stats;
		
		// Three.js核心对象：
		// camera：摄像机，定义观察者的视角
		// controls：用户交互控制器
		// scene：场景图，包含所有要渲染的对象
		// renderer：渲染器，负责将3D场景绘制到2D画布
		let camera, controls, scene, renderer;
		
		// 纹理加载器：用于异步加载图像纹理
		let textureLoader;
		
		// 动画时钟：用于计算帧之间的时间差，确保动画与时间相关而非帧率相关
		const clock = new THREE.Clock();

		// ==================== 物理引擎变量声明 ====================
		// 重力常量：地球标准重力加速度，负值表示向下
		const gravityConstant = -9.8;
		
		// 物理引擎核心组件：
		let collisionConfiguration; // 碰撞配置：定义物体如何交互和碰撞
		let dispatcher;             // 碰撞调度器：管理碰撞检测过程
		let broadphase;             // 宽相碰撞检测：快速筛选可能碰撞的对象对
		let solver;                 // 约束求解器：解决物理约束（如关节、接触）
		let softBodySolver;         // 软体求解器：专门处理软体物理模拟
		let physicsWorld;           // 物理世界：包含所有物理对象和模拟环境
		
		// 应用程序特定变量：
		const rigidBodies = [];     // 存储所有动态刚体的Three.js对象引用
		const margin = 0.05;        // 碰撞形状边距：防止物体因浮点误差而穿透
		let hinge;                  // 铰链约束：机械臂的旋转关节
		let rope;                   // 绳索的Three.js对象引用
		let transformAux1;          // Ammo变换辅助对象：用于高效更新刚体位置

		// 用户输入状态：
		let armMovement = 0;        // 机械臂运动方向：1=向上，-1=向下，0=静止

		// ==================== Ammo.js初始化 ====================
		// Ammo()返回一个Promise，加载完成后执行回调
		Ammo().then(function (AmmoLib) {
			// 将加载的Ammo库赋给全局变量Ammo
			// 注意：这通常不推荐，但在此演示中是必要的
			Ammo = AmmoLib;
			
			// 初始化整个应用程序
			init();
		});

		// ==================== 主初始化函数 ====================
		function init() {
			// 1. 初始化图形系统：设置Three.js场景、相机、灯光等
			initGraphics();
			
			// 2. 初始化物理系统：创建Ammo.js物理世界和组件
			initPhysics();
			
			// 3. 创建所有物理和图形对象：地面、球体、砖墙、绳索、机械臂等
			createObjects();
			
			// 4. 初始化用户输入处理：键盘事件监听
			initInput();
		}

		// ==================== 图形系统初始化 ====================
		function initGraphics() {
			// 获取DOM容器元素
			container = document.getElementById('container');

			// 创建透视摄像机：
			// 参数1: 视野角度(FOV) - 60度，角度越大看到的场景越广
			// 参数2: 宽高比 - 窗口宽度除以高度，保持正确比例
			// 参数3: 近裁剪面 - 0.2单位，比这近的物体不渲染
			// 参数4: 远裁剪面 - 2000单位，比这远的物体不渲染
			camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.2, 2000);

			// 创建3D场景：
			// 场景是所有3D对象的容器，包含网格、灯光、相机等
			scene = new THREE.Scene();
			
			// 设置场景背景颜色：淡蓝色 (#bfd1e5)
			scene.background = new THREE.Color(0xbfd1e5);

			// 设置摄像机初始位置：三维坐标(x, y, z)
			// x=-7: 向左偏移，y=5: 向上偏移，z=8: 向后偏移
			camera.position.set(-7, 5, 8);

			// 创建WebGL渲染器：
			// WebGL是基于OpenGL ES的JavaScript API，用于硬件加速3D图形
			renderer = new THREE.WebGLRenderer({ antialias: true }); // antialias:true启用抗锯齿
			
			// 设置设备像素比例：适应高DPI显示设备（如Retina显示屏）
			renderer.setPixelRatio(window.devicePixelRatio);
			
			// 设置渲染器尺寸为整个窗口大小
			renderer.setSize(window.innerWidth, window.innerHeight);
			
			// 设置动画循环回调函数：每一帧都调用animate函数
			renderer.setAnimationLoop(animate);
			
			// 启用阴影映射：允许物体投射和接收阴影
			renderer.shadowMap.enabled = true;
			
			// 将渲染器的canvas元素添加到DOM容器中
			container.appendChild(renderer.domElement);

			// 初始化轨道控制器：
			// 连接相机和渲染器的DOM元素，允许用户通过鼠标交互控制视角
			controls = new OrbitControls(camera, renderer.domElement);
			
			// 设置控制器的目标点（相机围绕旋转的中心点）
			controls.target.set(0, 2, 0);
			
			// 更新控制器状态（必须调用）
			controls.update();

			// 初始化纹理加载器：
			// Three.js的TextureLoader用于从URL加载图像作为纹理
			textureLoader = new THREE.TextureLoader();

			// ========== 灯光设置 ==========
			
			// 环境光：
			// 均匀照射场景所有表面的光源，没有方向性，用于模拟间接光照
			const ambientLight = new THREE.AmbientLight(0xbbbbbb); // 浅灰色环境光
			scene.add(ambientLight);

			// 定向光（主光源）：
			// 平行光线，模拟太阳等远距离光源，所有光线方向相同
			const light = new THREE.DirectionalLight(0xffffff, 3); // 白色光，强度3
			
			// 设置光源位置：左上方
			light.position.set(-10, 10, 5);
			
			// 启用阴影投射
			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;  // 远裁剪面
			
			// 设置阴影贴图分辨率：
			// 分辨率越高，阴影质量越好，但性能消耗越大
			light.shadow.mapSize.x = 1024; // 宽度分辨率
			light.shadow.mapSize.y = 1024; // 高度分辨率
			
			// 将光源添加到场景
			scene.add(light);

			// ========== 性能监控器设置 ==========
			
			// 创建Stats.js实例
			stats = new Stats();
			
			// 设置Stats面板的CSS样式：绝对定位在左上角
			stats.domElement.style.position = 'absolute';
			stats.domElement.style.top = '0px';
			
			// 将Stats面板添加到容器中
			container.appendChild(stats.domElement);

			// ========== 事件监听器 ==========
			
			// 窗口大小调整事件监听：当浏览器窗口大小改变时重新调整渲染
			window.addEventListener('resize', onWindowResize);
		}

		// ==================== 物理系统初始化 ====================
		function initPhysics() {
			// 1. 创建碰撞配置对象：
			// btSoftBodyRigidBodyCollisionConfiguration 支持软体和刚体之间的碰撞检测
			collisionConfiguration = new Ammo.btSoftBodyRigidBodyCollisionConfiguration();
			
			// 2. 创建碰撞调度器：
			// 管理碰撞检测算法的执行，处理物体之间的碰撞事件
			dispatcher = new Ammo.btCollisionDispatcher(collisionConfiguration);
			
			// 3. 创建宽相碰撞检测器：
			// btDbvtBroadphase使用动态边界体积层次结构，高效筛选可能碰撞的物体对
			// 减少需要精确检测的物体对数量，提高性能
			broadphase = new Ammo.btDbvtBroadphase();
			
			// 4. 创建约束求解器：
			// btSequentialImpulseConstraintSolver使用顺序脉冲算法解决物理约束
			// 处理接触点、关节等约束条件
			solver = new Ammo.btSequentialImpulseConstraintSolver();
			
			// 5. 创建软体求解器：
			// 专门处理软体物理（如布料、绳索）的求解器
			softBodySolver = new Ammo.btDefaultSoftBodySolver();
			
			// 6. 创建物理世界：
			// btSoftRigidDynamicsWorld是同时支持软体和刚体的动态世界
			// 参数：调度器、宽相检测、求解器、碰撞配置、软体求解器
			physicsWorld = new Ammo.btSoftRigidDynamicsWorld(dispatcher, broadphase, solver, collisionConfiguration, softBodySolver);
			
			// 7. 设置物理世界的重力：
			// btVector3(0, gravityConstant, 0) 表示只在Y轴（上下方向）有重力
			// X和Z轴重力为0，这是典型的地面场景设置
			physicsWorld.setGravity(new Ammo.btVector3(0, gravityConstant, 0));
			
			// 8. 设置世界信息中的重力（某些物理计算需要）：
			physicsWorld.getWorldInfo().set_m_gravity(new Ammo.btVector3(0, gravityConstant, 0));

			// 9. 创建变换辅助对象：
			// 在更新循环中重复使用，避免频繁创建新对象，提高性能
			transformAux1 = new Ammo.btTransform();
		}

		// ==================== 创建物理和图形对象 ====================
		function createObjects() {
			// 创建辅助向量和四元数对象（重复使用以提高性能）
			const pos = new THREE.Vector3(); // 位置向量 (x, y, z)
			const quat = new THREE.Quaternion(); // 旋转四元数 (x, y, z, w)

			// ========== 创建地面 ==========
			
			// 设置地面位置：在Y轴-0.5处（向下偏移0.5单位）
			pos.set(0, -0.5, 0);
			
			// 设置地面旋转：单位四元数表示无旋转
			quat.set(0, 0, 0, 1);
			
			// 创建地面长方体：
			// 尺寸：40×1×40（宽×高×深），质量0（静态物体），白色材质
			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;
				
				// 设置纹理包装模式为重复（RepeatWrapping）
				// 当纹理坐标超过1.0时，纹理会重复而不是拉伸
				texture.wrapS = THREE.RepeatWrapping; // S轴（U轴，水平方向）
				texture.wrapT = THREE.RepeatWrapping; // T轴（V轴，垂直方向）
				
				// 设置纹理重复次数：40×40，使网格纹理在整个地面上重复
				texture.repeat.set(40, 40);
				
				// 将纹理赋给地面材质的漫反射贴图
				ground.material.map = texture;
				
				// 标记材质需要更新，以便Three.js重新编译着色器
				ground.material.needsUpdate = true;
			});

			// ========== 创建球体刚体 ==========
			
			// 球体物理参数：
			const ballMass = 1.2;      // 质量：1.2千克，影响惯性和重力作用
			const ballRadius = 0.6;    // 半径：0.6单位
			
			// 创建球体网格对象：
			// SphereGeometry参数：半径，宽度分段数，高度分段数
			// 分段数越高球体越光滑，但性能消耗越大
			const ball = new THREE.Mesh(
				new THREE.SphereGeometry(ballRadius, 20, 20), // 几何体
				new THREE.MeshPhongMaterial({ color: 0x202020 }) // 材质：深灰色
			);
			
			// 启用阴影
			ball.castShadow = true;
			ball.receiveShadow = true;
			
			// 创建球体碰撞形状：
			const ballShape = new Ammo.btSphereShape(ballRadius);
			
			// 设置碰撞形状边距：防止穿透
			ballShape.setMargin(margin);
			
			// 设置球体初始位置：X=-3, Y=2, Z=0
			pos.set(-3, 2, 0);
			quat.set(0, 0, 0, 1);
			
			// 创建球体刚体，关联物理和图形对象
			createRigidBody(ball, ballShape, ballMass, pos, quat);
			
			// 设置球体摩擦系数：0.5（中等摩擦）
			// 影响球体在表面滚动的阻力
			ball.userData.physicsBody.setFriction(0.5);

			// ========== 创建砖墙 ==========
			
			// 砖块物理参数：
			const brickMass = 0.5;           // 每块砖质量
			const brickLength = 1.2;         // 砖块长度（Z轴方向）
			const brickDepth = 0.6;          // 砖块深度（X轴方向）
			const brickHeight = brickLength * 0.5; // 砖块高度（Y轴方向）
			
			// 砖墙布局参数：
			const numBricksLength = 6;       // 每行砖块数量（偶数行）
			const numBricksHeight = 8;       // 砖墙层数
			
			// 计算起始Z坐标：使砖墙在X轴对称分布
			const z0 = -numBricksLength * brickLength * 0.5;
			
			// 设置第一块砖的初始位置
			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 ropeNumSegments = 10; // 绳索段数：段数越多越平滑，但计算量越大
			const ropeLength = 4;       // 绳索长度：4单位
			const ropeMass = 3;         // 绳索总质量：3千克
			
			// 计算绳索起点位置：在球体正上方
			const ropePos = ball.position.clone();
			ropePos.y += ballRadius;

			// 创建绳索图形对象（线段表示）：
			// 计算每段绳索的长度
			const segmentLength = ropeLength / ropeNumSegments;
			
			// 创建缓冲区几何体：高效存储顶点数据
			const ropeGeometry = new THREE.BufferGeometry();
			
			// 创建线段材质：黑色基本线
			const ropeMaterial = new THREE.LineBasicMaterial({ color: 0x000000 });
			
			// 顶点位置数组和索引数组
			const ropePositions = [];
			const ropeIndices = [];

			// 生成绳索顶点位置：
			// 共 ropeNumSegments + 1 个顶点（n段有n+1个端点）
			for (let i = 0; i < ropeNumSegments + 1; i++) {
				// 顶点位置：X不变，Y递增，Z不变
				ropePositions.push(
					ropePos.x, 
					ropePos.y + i * segmentLength, 
					ropePos.z
				);
			}

			// 生成线段索引：
			// 连接相邻顶点形成线段
			for (let i = 0; i < ropeNumSegments; i++) {
				// 每两个索引一组，表示一条线段
				ropeIndices.push(i, i + 1);
			}

			// 设置几何体的索引属性：
			// Uint16Array：16位无符号整数数组，最多65535个顶点
			// 参数2：每个索引数据的大小（元素数量）
			ropeGeometry.setIndex(new THREE.BufferAttribute(new Uint16Array(ropeIndices), 1));
			
			// 设置几何体的位置属性：
			// Float32Array：32位浮点数数组，存储顶点坐标
			// 参数2：每个顶点数据的组件数量（3表示x,y,z）
			ropeGeometry.setAttribute('position', new THREE.BufferAttribute(new Float32Array(ropePositions), 3));
			
			// 计算边界球体：用于视锥体裁剪（Frustum Culling）
			ropeGeometry.computeBoundingSphere();
			
			// 创建线段对象
			rope = new THREE.LineSegments(ropeGeometry, ropeMaterial);
			
			// 启用阴影
			rope.castShadow = true;
			rope.receiveShadow = true;
			
			// 将绳索添加到场景
			scene.add(rope);

			// 创建绳索物理软体对象：
			// Ammo提供软体辅助类来简化软体创建
			const softBodyHelpers = new Ammo.btSoftBodyHelpers();
			
			// 创建绳索起点和终点的Ammo向量
			const ropeStart = new Ammo.btVector3(ropePos.x, ropePos.y, ropePos.z);
			const ropeEnd = new Ammo.btVector3(ropePos.x, ropePos.y + ropeLength, ropePos.z);
			
			// 创建绳索软体：
			// 参数1：物理世界信息
			// 参数2：起点位置
			// 参数3：终点位置
			// 参数4：段数-1（Ammo的段数定义与Three.js不同）
			// 参数5：固定点数量（0表示没有固定点）
			const ropeSoftBody = softBodyHelpers.CreateRope(
				physicsWorld.getWorldInfo(), 
				ropeStart, ropeEnd, 
				ropeNumSegments - 1, 0
			);
			
			// 获取软体配置对象，用于调整物理属性
			const sbConfig = ropeSoftBody.get_m_cfg();
			
			// 设置速度迭代次数：影响物理模拟的精度和稳定性
			// 更高的迭代次数=更精确但更耗性能
			sbConfig.set_viterations(10);
			
			// 设置位置迭代次数
			sbConfig.set_piterations(10);
			
			// 设置绳索总质量
			ropeSoftBody.setTotalMass(ropeMass, false);
			
			// 设置软体碰撞形状边距（比刚体大以防止穿透）
			Ammo.castObject(ropeSoftBody, Ammo.btCollisionObject).getCollisionShape().setMargin(margin * 3);
			
			// 将软体添加到物理世界：
			// 参数2：碰撞过滤组，参数3：碰撞过滤掩码
			physicsWorld.addSoftBody(ropeSoftBody, 1, -1);
			
			// 将物理软体对象存储在Three.js对象的userData中
			rope.userData.physicsBody = ropeSoftBody;
			
			// 禁用停用状态：防止物理引擎在物体静止时停止模拟
			// 4 = DISABLE_DEACTIVATION 常数值
			ropeSoftBody.setActivationState(4);

			// ========== 创建机械臂系统 ==========
			
			// 机械臂参数：
			const armMass = 2;              // 机械臂质量
			const armLength = 3;            // 机械臂长度
			const pylonHeight = ropePos.y + ropeLength; // 支柱高度：绳索终点高度
			const baseMaterial = new THREE.MeshPhongMaterial({ color: 0x606060 }); // 灰色金属材质

			// 创建基座（地面固定部分）：
			pos.set(ropePos.x, 0.1, ropePos.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(ropePos.x, 0.5 * pylonHeight, ropePos.z - armLength);
			const pylon = createParalellepiped(0.4, pylonHeight, 0.4, 0, pos, quat, baseMaterial);
			pylon.castShadow = true;
			pylon.receiveShadow = true;

			// 创建机械臂（可旋转部分）：
			pos.set(ropePos.x, pylonHeight + 0.2, ropePos.z - 0.5 * armLength);
			const arm = createParalellepiped(0.4, 0.4, armLength + 0.4, armMass, pos, quat, baseMaterial);
			arm.castShadow = true;
			arm.receiveShadow = true;

			// ========== 设置绳索锚点 ==========
			
			// 锚点影响力：1表示完全固定，0表示自由
			const influence = 1;
			
			// 将绳索起点（索引0）锚定到球体：
			// 参数1：软体节点索引
			// 参数2：锚定到的刚体
			// 参数3：是否禁用碰撞（true=禁用，减少计算量）
			// 参数4：影响力
			ropeSoftBody.appendAnchor(0, ball.userData.physicsBody, true, influence);
			
			// 将绳索终点锚定到机械臂：
			ropeSoftBody.appendAnchor(ropeNumSegments, arm.userData.physicsBody, true, influence);

			// ========== 创建铰链约束（机械臂旋转关节） ==========
			
			// 定义两个局部空间中的支点位置：
			// 支点A：在支柱上的位置（相对于支柱中心）
			const pivotA = new Ammo.btVector3(0, pylonHeight * 0.5, 0);
			
			// 支点B：在机械臂上的位置（相对于机械臂中心）
			const pivotB = new Ammo.btVector3(0, -0.2, -armLength * 0.5);
			
			// 定义旋转轴：Y轴（垂直方向）
			const axis = new Ammo.btVector3(0, 1, 0);
			
			// 创建铰链约束：
			// 连接支柱和机械臂，允许绕Y轴旋转
			// 参数7：true表示使用参考帧A（支柱的坐标系）
			hinge = new Ammo.btHingeConstraint(
				pylon.userData.physicsBody,  // 刚体A：支柱
				arm.userData.physicsBody,    // 刚体B：机械臂
				pivotA, pivotB,              // 两个支点
				axis, axis,                  // 两个旋转轴（此处相同）
				true                         // 使用参考帧A
			);
			
			// 将铰链约束添加到物理世界：
			// 参数2：true表示禁用相关刚体之间的碰撞（防止自碰撞问题）
			physicsWorld.addConstraint(hinge, true);
		}

		// ==================== 创建长方体刚体辅助函数 ====================
		/**
		 * 创建长方体刚体（物理和图形）
		 * @param {number} sx - X轴尺寸（宽度）
		 * @param {number} sy - Y轴尺寸（高度）
		 * @param {number} sz - Z轴尺寸（深度）
		 * @param {number} mass - 质量（0=静态，>0=动态）
		 * @param {THREE.Vector3} pos - 位置向量
		 * @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网格对象（长方体）
			const threeObject = new THREE.Mesh(
				new THREE.BoxGeometry(sx, sy, sz, 1, 1, 1), // 几何体
				material // 材质
			);
			
			// 创建Ammo长方体碰撞形状：
			// btBoxShape参数是半尺寸（half extents）
			const shape = new Ammo.btBoxShape(new Ammo.btVector3(sx * 0.5, sy * 0.5, sz * 0.5));
			
			// 设置碰撞形状边距
			shape.setMargin(margin);

			// 创建刚体并关联Three.js对象
			createRigidBody(threeObject, shape, mass, pos, quat);

			return threeObject;
		}

		// ==================== 创建刚体辅助函数 ====================
		/**
		 * 创建刚体并关联到Three.js对象
		 * @param {THREE.Object3D} threeObject - Three.js对象
		 * @param {Ammo.btCollisionShape} physicsShape - 物理碰撞形状
		 * @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();
			
			// 设置变换的原点（位置）
			transform.setOrigin(new Ammo.btVector3(pos.x, pos.y, pos.z));
			
			// 设置变换的旋转（四元数）
			transform.setRotation(new Ammo.btQuaternion(quat.x, quat.y, quat.z, quat.w));

			// 创建运动状态对象：
			// 管理刚体的位置和旋转随时间的变化
			const motionState = new Ammo.btDefaultMotionState(transform);

			// 计算局部惯性张量：
			// 描述质量在物体中的分布，影响旋转行为
			const localInertia = new Ammo.btVector3(0, 0, 0);
			
			// 如果质量大于0，计算惯性（静态物体不需要）
			if (mass > 0) {
				physicsShape.calculateLocalInertia(mass, localInertia);
			}

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

			// 将物理刚体对象存储在Three.js对象的userData中
			// 这样可以从图形对象访问对应的物理对象
			threeObject.userData.physicsBody = body;

			// 将Three.js对象添加到场景
			scene.add(threeObject);

			// 如果是动态刚体（质量>0），添加到刚体数组
			if (mass > 0) {
				rigidBodies.push(threeObject);
				
				// 禁用停用状态：防止物理引擎在物体静止时停止模拟
				// 4 = DISABLE_DEACTIVATION 常数值
				body.setActivationState(4);
			}

			// 将刚体添加到物理世界
			physicsWorld.addRigidBody(body);
		}

		// ==================== 实用工具函数 ====================
		
		/**
		 * 生成随机颜色（24位RGB值）
		 * @returns {number} 随机颜色值（0x000000 到 0xFFFFFF）
		 */
		function createRandomColor() {
			// 1 << 24 = 2^24 = 16777216（16,777,216种颜色）
			return Math.floor(Math.random() * (1 << 24));
		}

		/**
		 * 创建具有随机颜色的Phong材质
		 * @returns {THREE.MeshPhongMaterial} 随机颜色的Phong材质
		 */
		function createMaterial() {
			return new THREE.MeshPhongMaterial({ color: createRandomColor() });
		}

		// ==================== 输入处理初始化 ====================
		function initInput() {
			// 键盘按下事件监听器
			window.addEventListener('keydown', function (event) {
				// event.keyCode: 按键的键码值
				switch (event.keyCode) {
					// Q键（键码81）：抬起机械臂
					case 81:
						armMovement = 1; // 正方向运动
						break;

					// A键（键码65）：放下机械臂
					case 65:
						armMovement = -1; // 负方向运动
						break;
				}
			});

			// 键盘释放事件监听器
			window.addEventListener('keyup', function () {
				// 释放任何键时停止机械臂运动
				armMovement = 0;
			});
		}

		// ==================== 窗口大小调整处理 ====================
		function onWindowResize() {
			// 更新相机宽高比：窗口宽度除以高度
			camera.aspect = window.innerWidth / window.innerHeight;
			
			// 更新相机投影矩阵（必须调用）
			// 投影矩阵定义了3D空间到2D屏幕的映射关系
			camera.updateProjectionMatrix();

			// 更新渲染器大小为新的窗口尺寸
			renderer.setSize(window.innerWidth, window.innerHeight);
		}

		// ==================== 动画循环函数 ====================
		function animate() {
			// 渲染当前帧
			render();
			
			// 更新性能统计显示
			stats.update();
		}

		// ==================== 渲染函数 ====================
		function render() {
			// 获取自上一帧以来的时间增量（秒）
			// 用于与时间相关的物理模拟，确保在不同帧率下行为一致
			const deltaTime = clock.getDelta();

			// 更新物理模拟
			updatePhysics(deltaTime);

			// 使用相机渲染场景到画布
			renderer.render(scene, camera);
		}

		// ==================== 物理模拟更新函数 ====================
		/**
		 * 更新物理世界状态
		 * @param {number} deltaTime - 时间增量（秒）
		 */
		function updatePhysics(deltaTime) {
			// ========== 控制机械臂铰链电机 ==========
			// 启用铰链的角电机：
			// 参数1：true=启用电机
			// 参数2：目标速度（弧度/秒），正负决定旋转方向
			// 参数3：最大电机冲量（扭矩），影响加速度
			hinge.enableAngularMotor(true, 1.5 * armMovement, 50);

			// ========== 物理世界步进模拟 ==========
			// 推进物理模拟一个时间步长：
			// 参数1：时间步长（秒）- 模拟的时间增量
			// 参数2：最大子步数 - 如果deltaTime太大，会分解为多个子步
			// 子步数越多模拟越稳定，但性能消耗越大
			physicsWorld.stepSimulation(deltaTime, 10);

			// ========== 更新软体绳索的图形位置 ==========
			// 获取绳索的物理软体对象
			const softBody = rope.userData.physicsBody;
			
			// 获取绳索几何体的顶点位置数组（Float32Array）
			const ropePositions = rope.geometry.attributes.position.array;
			
			// 计算顶点数量：数组长度除以3（每个顶点有x,y,z三个分量）
			const numVerts = ropePositions.length / 3;
			
			// 获取软体的所有节点
			const nodes = softBody.get_m_nodes();
			
			// 数组索引指针
			let indexFloat = 0;

			// 遍历所有软体节点，更新Three.js顶点位置
			for (let i = 0; i < numVerts; i++) {
				// 获取第i个节点
				const node = nodes.at(i);
				
				// 获取节点的当前位置
				const nodePos = node.get_m_x();
				
				// 更新顶点位置数组
				ropePositions[indexFloat++] = nodePos.x(); // X坐标
				ropePositions[indexFloat++] = nodePos.y(); // Y坐标
				ropePositions[indexFloat++] = nodePos.z(); // Z坐标
			}

			// 标记位置属性需要更新
			// 这通知Three.js更新GPU缓冲区中的顶点数据
			rope.geometry.attributes.position.needsUpdate = true;

			// ========== 更新所有刚体的图形位置 ==========
			// 遍历所有动态刚体（存储在rigidBodies数组中）
			for (let i = 0, il = rigidBodies.length; i < il; i++) {
				// 获取Three.js对象
				const objThree = rigidBodies[i];
				
				// 获取对应的物理刚体对象
				const objPhys = objThree.userData.physicsBody;
				
				// 获取运动状态对象
				const ms = objPhys.getMotionState();

				// 如果运动状态存在（动态刚体才有）
				if (ms) {
					// 获取刚体的当前世界变换
					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());
				}
			}
		}
	</script>

	</body>
</html>