<!-- 代码功能描述
这是一个基于Three.js和Ammo.js的三维物理破碎模拟演示，展示凸面体对象在物理碰撞下的实时破碎效果。

核心功能
1. 实时物理模拟
实现刚体动力学模拟（重力、碰撞、摩擦力等）

支持静态物体（地面）和动态物体（塔、桥、石头）

物理响应具有真实感（质量、惯性、弹性等）

2. 凸面体破碎系统
物体在受到足够冲击力时会实时破碎

破碎过程基于凸面体几何分解

生成物理正确的碎片，继承原物体的速度和角速度

3. 交互式体验
用户可以通过鼠标点击抛掷球体

使用轨道控制器自由探索场景

实时观察物体碰撞和破碎效果

4. 场景构建
包含多个可破碎的结构：两座塔、一座桥、一排石头、一座山

所有结构都支持物理破碎

逼真的灯光和阴影效果

主要技术点
一、图形渲染技术（Three.js）
1. 场景管理
相机系统：透视相机（PerspectiveCamera）提供3D视角

场景图：层级化对象管理（Scene）

渲染器：WebGLRenderer利用硬件加速渲染

2. 几何与材质
几何类型：使用BoxGeometry（立方体）、SphereGeometry（球体）、ConvexGeometry（凸面体）

材质系统：MeshPhongMaterial支持光照和阴影

纹理映射：地面使用重复的网格纹理

3. 光照与阴影
环境光：提供基础全局照明

方向光：模拟太阳，产生明确的高光和阴影

阴影映射：实时动态阴影，增加场景真实感

4. 交互控制
OrbitControls：鼠标拖拽旋转、滚轮缩放

射线投射：将2D屏幕坐标转换为3D空间射线

二、物理模拟技术（Ammo.js）
1. 物理引擎架构
碰撞配置：定义碰撞检测的全局参数

广义阶段：快速排除不可能碰撞的对象对（使用DbvtBroadphase）

约束求解器：解决接触约束和其他物理约束

2. 刚体动力学
质量与惯性：基于形状计算惯性张量

运动状态：连接物理变换与视觉对象

碰撞形状：btBoxShape、btSphereShape、btConvexHullShape

3. 碰撞检测系统
碰撞对（Manifold）：存储碰撞点信息

接触点管理：多个接触点支持复杂碰撞

冲量计算：衡量碰撞强度的关键指标

三、破碎算法实现
1. 凸面体分解
ConvexObjectBreaker：Three.js的凸面体破碎扩展

prepareBreakableObject：预计算对象的凸面体分解

subdivideByImpact：根据碰撞点细分对象

2. 破碎条件判断
冲量阈值：fractureImpulse = 250（破碎的最小冲量）

碰撞点验证：实际接触点（距离<0）才触发破碎

防重复破碎：collided标志防止同一帧多次破碎

3. 碎片物理属性继承
速度继承：碎片继承原物体的线速度和角速度

质量分布：根据碎片体积分配质量

碰撞形状：为每个碎片创建独立的凸面体碰撞形状

四、性能优化技术
1. 内存管理
对象池：预分配objectsToRemove数组（容量500）

辅助对象复用：transformAux1、tempBtVec3_1等

避免频繁创建：在循环外创建重复使用的变量

2. 渲染优化
阴影贴图分辨率：1024x1024平衡质量和性能

几何体复杂度：合理设置球体的分段数（14x10）

纹理复用：网格纹理重复使用，减少内存占用

3. 物理优化
激活状态控制：禁用动态物体的休眠（setActivationState(4)）

碰撞边距：margin=0.05防止数值误差导致的穿透

时间步长控制：最大10个子步确保模拟稳定性

五、系统集成设计
1. 双数据绑定
Three.js ↔ Ammo.js双向链接：

javascript
// Three.js对象存储物理刚体引用
object.userData.physicsBody = body;

// 物理刚体存储Three.js对象引用
btVecUserData.threeObject = object;
body.setUserPointer(btVecUserData);
2. 主循环架构
text
动画循环（60FPS）
├── 获取时间增量（deltaTime）
├── 更新物理模拟（stepSimulation）
├── 同步物理状态到图形对象
├── 检测碰撞并处理破碎
├── 移除已破碎的对象
└── 渲染场景
3. 模块化设计
初始化分离：图形、物理、对象创建、输入处理独立

功能封装：createRigidBody、createDebrisFromBreakableObject等函数

配置参数化：重力、边距、破碎阈值等可调参数

六、关键技术挑战与解决方案
1. 精度问题
挑战：物理模拟的数值误差导致物体穿透

解决方案：设置碰撞边距（margin=0.05）

2. 性能瓶颈
挑战：破碎产生大量碎片，性能急剧下降

解决方案：限制碎片数量（1-2个碎片）、对象池管理

3. 同步问题
挑战：物理状态与图形状态不同步

解决方案：每帧从运动状态（MotionState）获取最新变换

4. 破碎真实性
挑战：碎片运动不自然

解决方案：碎片继承原物体的速度和角速度

七、扩展可能性
1. 视觉效果增强
破碎时的粒子效果

声音效果（碰撞声、破碎声）

更复杂的材质系统（法线贴图、环境光遮蔽）

2. 物理特性增强
材料属性系统（不同材料不同强度）

更精确的破碎模式（基于应力分析）

碎片间的二次碰撞检测

3. 交互功能扩展
不同类型的抛射物（立方体、锥体等）

爆炸效果（冲击波影响多个物体）

慢动作模式（便于观察破碎细节）

4. 场景复杂度提升
更多可破碎结构

动态环境（移动平台、可破坏地形）

天气效果（雨、雪对物理的影响）

技术栈总结
技术领域	使用技术	主要作用
3D图形	Three.js	创建和渲染3D场景
物理引擎	Ammo.js (Bullet)	刚体动力学模拟
破碎算法	ConvexObjectBreaker	凸面体分解和破碎
用户交互	OrbitControls + Raycaster	相机控制和物体选择
性能监控	Stats.js	帧率和内存监控
模块加载	ES6 Modules + Import Maps	现代JavaScript模块管理
应用场景
游戏开发：可破坏环境的物理效果

模拟训练：结构破坏的物理行为演示

教育演示：物理力学和材料科学的可视化

产品展示：材料强度和破坏测试的交互演示

艺术创作：动态破碎效果的视觉艺术 -->


<!-- HTML文档开始，设置语言为英文 -->
<html lang="en">
	<head>
		<!-- 中文标题：凸面体破碎物理模拟演示 -->
		<title>凸面体破碎物理模拟演示 - Three.js与Ammo.js集成</title>
		<!-- 字符编码设置 -->
		<meta charset="utf-8">
		<!-- 视口设置，适配移动设备，禁止缩放 -->
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<!-- 外部样式表链接 -->
		<link type="text/css" rel="stylesheet" href="main.css">
		<!-- 内联样式 -->
		<style>
			body {
				color: #333; /* 设置默认文字颜色为深灰色 */
			}
		</style>
	</head>
	<body>
		<!-- 
			中文操作提示区域：
			1. 说明这是一个实时凸面体破碎的物理模拟演示
			2. 提示用户点击鼠标抛掷球体并移动相机
			3. ID为info用于JavaScript可能需要的DOM操作
		-->
		<div id="info">
			三维物理模拟演示：实时凸面体破碎效果<br />
			操作说明：点击鼠标抛掷球体 | 拖动鼠标旋转视角 | 滚动鼠标缩放视图
		</div>
		
		<!-- 
			Three.js渲染容器：
			所有3D图形都将渲染到这个div元素中
			JavaScript代码会获取这个容器的引用
		-->
		<div id="container"></div>

		<!-- 
			加载Ammo.js物理引擎库：
			1. Ammo.js是Bullet物理引擎的JavaScript移植版本
			2. wasm版本提供更好的性能
			3. 这是一个同步加载，但实际使用时通过异步加载
		-->
		<script src="jsm/libs/ammo.wasm.js"></script>

		<!-- 
			模块导入映射配置（Import Maps）：
			现代浏览器支持的功能，用于指定模块的导入路径
			允许我们使用简短的模块名而不是完整的URL
		-->
		<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）
			// 用于显示帧率、内存使用等性能指标，通常显示在左上角
			import Stats from 'three/addons/libs/stats.module.js';

			// 导入轨道控制器（OrbitControls）
			// 允许用户通过鼠标拖拽、滚轮缩放来交互式控制相机
			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
			
			// 导入凸面体破碎器（ConvexObjectBreaker）
			// 专门用于处理凸面体破碎效果的扩展工具
			import { ConvexObjectBreaker } from 'three/addons/misc/ConvexObjectBreaker.js';
			
			// 导入凸面体几何体生成器
			// 用于从一组点创建凸面体几何形状
			import { ConvexGeometry } from 'three/addons/geometries/ConvexGeometry.js';

			// ==================== 全局变量声明区域 ====================
			// 将变量分类组织，提高代码可读性

			// ---------- 图形渲染相关变量 ----------
			let container;      // 指向HTML容器div的引用
			let stats;          // 性能监控器实例
			let camera;         // 3D相机，决定场景的观察视角
			let controls;       // 轨道控制器实例，处理用户输入
			let scene;          // 3D场景，包含所有要渲染的对象
			let renderer;       // WebGL渲染器，负责将3D场景绘制到2D画布
			let textureLoader;  // 纹理加载器，用于加载图像纹理
			
			// 创建一个时钟对象，用于计算时间差（delta time）
			// 这是实现与帧率无关的动画的关键
			const clock = new THREE.Clock();

			// ---------- 鼠标交互相关变量 ----------
			const mouseCoords = new THREE.Vector2();  // 存储鼠标位置的2D向量（归一化坐标）
			const raycaster = new THREE.Raycaster();  // 射线投射器，用于3D拾取（将2D屏幕坐标转换为3D射线）
			
			// 球体材质（用于抛掷的球体）
			// MeshPhongMaterial是Phong光照模型的材质，支持高光反射
			const ballMaterial = new THREE.MeshPhongMaterial( { color: 0x202020 } );

			// ---------- 物理引擎相关变量 ----------
			const gravityConstant = 7.8;  // 重力常数，影响物体下落的加速度
			
			// Ammo.js物理引擎的核心组件
			let collisionConfiguration;  // 碰撞配置，定义碰撞检测的全局设置
			let dispatcher;              // 碰撞分配器，管理碰撞检测过程
			let broadphase;              // 广义阶段，快速排除不可能碰撞的对象对
			let solver;                  // 约束求解器，解决物理约束（如接触约束）
			let physicsWorld;            // 物理世界，包含所有物理对象和模拟环境
			
			const margin = 0.05;  // 碰撞形状的边距，防止数值误差导致的穿透

			// 凸面体破碎器实例化
			// 这个对象负责处理凸面体的破碎逻辑
			const convexBreaker = new ConvexObjectBreaker();

			// ---------- 物理对象管理 ----------
			// 存储所有动态刚体（质量>0的对象）的数组
			// 这些对象的位置和旋转每帧都会根据物理模拟更新
			const rigidBodies = [];

			// ---------- 辅助变量（用于性能优化） ----------
			// 重复使用的变量，避免在循环中频繁创建新对象
			const pos = new THREE.Vector3();    // 临时位置向量
			const quat = new THREE.Quaternion(); // 临时四元数（表示旋转）
			
			// Ammo.js物理引擎的辅助对象
			let transformAux1;  // 临时物理变换对象，用于获取刚体的世界变换
			let tempBtVec3_1;   // 临时物理向量，用于传递数据

			// ---------- 对象管理 ----------
			// 待移除对象数组（对象池模式）
			// 预分配数组空间，避免频繁的内存分配和垃圾回收
			const objectsToRemove = [];
			
			// 初始化对象池，容量为500
			for ( let i = 0; i < 500; i ++ ) {
				objectsToRemove[ i ] = null;  // 初始化为null
			}
			
			let numObjectsToRemove = 0;  // 当前待移除对象的数量

			// ---------- 碰撞检测相关 ----------
			// 用于存储碰撞信息
			const impactPoint = new THREE.Vector3();   // 碰撞点的世界坐标
			const impactNormal = new THREE.Vector3();  // 碰撞法线（碰撞方向）

			// ==================== 主程序入口 ====================
			
			/**
			 * Ammo.js库的异步加载
			 * Ammo()函数返回一个Promise，加载完成后执行回调
			 * 这是必需的，因为Ammo.js可能需要下载和编译WebAssembly模块
			 */
			Ammo().then( function ( AmmoLib ) {
				Ammo = AmmoLib;  // 将加载的Ammo库赋值给全局变量
				init();          // 初始化整个应用程序
			} );

			// ==================== 函数定义区域 ====================

			/**
			 * 主初始化函数
			 * 按照特定顺序初始化应用程序的各个部分
			 * 顺序很重要：必须先有图形系统，才能创建可见对象
			 */
			function init() {
				initGraphics();   // 1. 初始化图形系统（渲染器、相机、场景等）
				initPhysics();    // 2. 初始化物理引擎
				createObjects();  // 3. 创建场景中的3D对象（地面、建筑、山等）
				initInput();      // 4. 初始化用户输入处理（鼠标事件）
			}

			/**
			 * 初始化图形系统
			 * 设置Three.js的核心组件：渲染器、相机、场景、灯光等
			 * 这是纯视觉部分，不涉及物理模拟
			 */
			function initGraphics() {
				// 获取HTML容器元素的引用
				// 所有Three.js渲染的内容都将显示在这个div中
				container = document.getElementById( 'container' );

				// 创建透视相机
				// 参数说明：
				// 1. 视野角度（60度）- 越大看到的范围越广
				// 2. 宽高比 - 根据窗口尺寸计算
				// 3. 近剪裁面（0.2）- 距离相机多近开始渲染
				// 4. 远剪裁面（2000）- 距离相机多远停止渲染
				camera = new THREE.PerspectiveCamera( 
					60, 
					window.innerWidth / window.innerHeight, 
					0.2, 
					2000 
				);

				// 创建3D场景
				// 场景是一个容器，用于保存所有要渲染的对象（网格、灯光、相机等）
				scene = new THREE.Scene();
				
				// 设置场景背景颜色（淡蓝色）
				// 这类似于天空盒的简化版本
				scene.background = new THREE.Color( 0xbfd1e5 );

				// 设置相机初始位置
				// 参数：(x, y, z)坐标
				// 这里将相机放置在场景的左上方，俯视场景中心
				camera.position.set( -14, 8, 16 );

				// 创建WebGL渲染器
				// WebGLRenderer使用WebGL API在HTML canvas元素上绘制3D图形
				renderer = new THREE.WebGLRenderer( { 
					antialias: true  // 启用抗锯齿，使边缘更平滑
				} );
				
				// 设置设备像素比
				// 在高DPI屏幕上提供更清晰的图像
				renderer.setPixelRatio( window.devicePixelRatio );
				
				// 设置渲染器尺寸为整个窗口大小
				renderer.setSize( window.innerWidth, window.innerHeight );
				
				// 设置动画循环回调函数
				// setAnimationLoop是requestAnimationFrame的Three.js封装
				// 它会以显示器的刷新率（通常60FPS）持续调用animate函数
				renderer.setAnimationLoop( animate );
				
				// 启用阴影映射
				// 这允许对象投射和接收阴影，增加场景的真实感
				renderer.shadowMap.enabled = true;
				
				// 将渲染器的canvas元素添加到HTML容器中
				// 这样用户才能在网页上看到3D场景
				container.appendChild( renderer.domElement );

				// 初始化轨道控制器
				// OrbitControls允许用户通过鼠标交互控制相机：
				// - 左键拖拽：旋转视角
				// - 右键拖拽：平移视角
				// - 滚轮：缩放视角
				controls = new OrbitControls( camera, renderer.domElement );
				
				// 设置控制器的目标点（相机看向的点）
				// 这里设置为场景中心略微上方，使视角更自然
				controls.target.set( 0, 2, 0 );
				
				// 更新控制器内部状态
				controls.update();

				// 创建纹理加载器实例
				// 纹理是应用于3D对象表面的图像
				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, 18, 5 );  // 设置在场景左上方
				light.castShadow = true;  // 启用阴影投射
				
				// 设置阴影相机参数
				// 阴影相机定义了阴影的渲染范围（视锥体）
				const d = 14;  // 阴影范围的一半
				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;  // 宽度1024像素
				light.shadow.mapSize.y = 1024;  // 高度1024像素
				
				scene.add( light );

				// ---------- 性能监控器 ----------
				// 创建Stats.js实例并添加到页面
				// Stats.js显示三个重要指标：
				// 1. FPS: 每秒帧数（绿色表示60FPS，黄色表示性能下降，红色表示卡顿）
				// 2. MS: 每帧渲染耗时（毫秒）
				// 3. MB: 内存使用量
				stats = new Stats();
				stats.domElement.style.position = 'absolute';  // 绝对定位
				stats.domElement.style.top = '0px';           // 顶部对齐
				container.appendChild( stats.domElement );     // 添加到容器

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

			/**
			 * 初始化物理引擎（Ammo.js）
			 * 设置Bullet物理引擎的核心组件和世界参数
			 * 物理引擎负责模拟物体的运动、碰撞和破碎
			 */
			function initPhysics() {
				// 1. 创建碰撞配置
				// btDefaultCollisionConfiguration是Bullet的默认碰撞配置
				// 它定义了碰撞检测算法和碰撞处理器
				collisionConfiguration = new Ammo.btDefaultCollisionConfiguration();

				// 2. 创建碰撞分配器
				// 分配器管理碰撞检测过程，使用配置中的设置
				dispatcher = new Ammo.btCollisionDispatcher( collisionConfiguration );

				// 3. 创建广义阶段（broadphase）
				// broadphase快速检测可能发生碰撞的对象对
				// btDbvtBroadphase使用动态边界体积层次结构，适合动态场景
				broadphase = new Ammo.btDbvtBroadphase();

				// 4. 创建约束求解器
				// 求解器解决物理约束，如接触约束、关节约束等
				solver = new Ammo.btSequentialImpulseConstraintSolver();

				// 5. 创建物理世界
				// 离散动力学世界，这是主要的模拟环境
				// 它将所有组件组合在一起，并管理模拟过程
				physicsWorld = new Ammo.btDiscreteDynamicsWorld( 
					dispatcher, 
					broadphase, 
					solver, 
					collisionConfiguration 
				);
				
				// 设置物理世界的重力
				// btVector3(0, -gravityConstant, 0)表示向下的重力
				// 负Y轴方向，大小由gravityConstant决定
				physicsWorld.setGravity( new Ammo.btVector3( 0, -gravityConstant, 0 ) );

				// 初始化辅助对象（性能优化）
				// 这些对象在模拟过程中重复使用，避免频繁创建和销毁
				transformAux1 = new Ammo.btTransform();  // 用于获取刚体的世界变换
				tempBtVec3_1 = new Ammo.btVector3( 0, 0, 0 );  // 临时向量，用于数据传递
			}

			/**
			 * 创建可破碎的物理对象
			 * 这是一个工厂函数，用于创建可破碎的盒子状对象
			 * 
			 * @param {number} mass - 物体质量（kg），0表示静态对象
			 * @param {THREE.Vector3} halfExtents - 物体的半尺寸（长/2, 宽/2, 高/2）
			 * @param {THREE.Vector3} pos - 物体的初始位置（世界坐标）
			 * @param {THREE.Quaternion} quat - 物体的初始旋转（四元数）
			 * @param {THREE.Material} material - 物体的视觉材质
			 */
			function createObject( mass, halfExtents, pos, quat, material ) {
				// 1. 创建Three.js网格对象（视觉部分）
				// BoxGeometry创建立方体几何，参数是完整尺寸
				const object = new THREE.Mesh( 
					new THREE.BoxGeometry( 
						halfExtents.x * 2,  // 宽度
						halfExtents.y * 2,  // 高度
						halfExtents.z * 2   // 深度
					), 
					material 
				);
				
				// 设置对象的位置和旋转
				object.position.copy( pos );
				object.quaternion.copy( quat );
				
				// 2. 准备对象为可破碎对象
				// convexBreaker.prepareBreakableObject执行以下操作：
				// - 将对象标记为可破碎（userData.breakable = true）
				// - 存储质量信息
				// - 计算并存储凸面体分解（为破碎做准备）
				// - 参数说明：对象、质量、初始速度、初始角速度、是否分解为凸面体
				convexBreaker.prepareBreakableObject( 
					object, 
					mass, 
					new THREE.Vector3(),  // 初始速度为零向量
					new THREE.Vector3(),  // 初始角速度为零向量
					true                  // 分解为凸面体（必需）
				);
				
				// 3. 为可破碎对象创建物理表示
				// 这会创建对应的物理刚体并添加到物理世界
				createDebrisFromBreakableObject( object );
			}

			/**
			 * 创建场景中的所有对象
			 * 这是场景设置函数，创建地面、建筑、桥、石头和山
			 */
			function createObjects() {
				// ---------- 地面 ----------
				pos.set( 0, -0.5, 0 );      // 地面中心位置，略微低于原点
				quat.set( 0, 0, 0, 1 );     // 无旋转（单位四元数）
				
				// 创建立方体地面（静态对象，质量为0）
				// 参数：宽度40，高度1，深度40，质量0
				const ground = createParalellepipedWithPhysics( 
					40, 1, 40, 
					0, 
					pos, quat, 
					new THREE.MeshPhongMaterial( { color: 0xFFFFFF } ) 
				);
				
				ground.receiveShadow = true;  // 地面接收阴影
				
				// 加载并应用网格纹理
				textureLoader.load( 'textures/grid.png', function ( texture ) {
					// 设置纹理重复模式
					texture.wrapS = THREE.RepeatWrapping;  // 水平重复
					texture.wrapT = THREE.RepeatWrapping;  // 垂直重复
					texture.repeat.set( 40, 40 );          // 重复40×40次
					
					ground.material.map = texture;        // 应用纹理
					ground.material.needsUpdate = true;   // 标记材质需要更新
				} );

				// ---------- 塔1 ----------
				const towerMass = 1000;  // 塔的质量（很重）
				const towerHalfExtents = new THREE.Vector3( 2, 5, 2 );  // 塔的半尺寸
				pos.set( -8, 5, 0 );  // 塔1位置（左侧）
				quat.set( 0, 0, 0, 1 );
				
				// 创建塔1，使用特定的红褐色材质
				createObject( towerMass, towerHalfExtents, pos, quat, createMaterial( 0xB03014 ) );

				// ---------- 塔2 ----------
				pos.set( 8, 5, 0 );  // 塔2位置（右侧）
				quat.set( 0, 0, 0, 1 );
				
				// 创建塔2，使用略微不同的红褐色
				createObject( towerMass, towerHalfExtents, pos, quat, createMaterial( 0xB03214 ) );

				// ---------- 桥 ----------
				const bridgeMass = 100;  // 桥的质量
				const bridgeHalfExtents = new THREE.Vector3( 7, 0.2, 1.5 );  // 桥的半尺寸
				pos.set( 0, 10.2, 0 );  // 桥的位置（连接两座塔）
				quat.set( 0, 0, 0, 1 );
				
				// 创建桥，使用黄绿色材质
				createObject( bridgeMass, bridgeHalfExtents, pos, quat, createMaterial( 0xB3B865 ) );

				// ---------- 石头（一排多个） ----------
				const stoneMass = 120;  // 单个石头的质量
				const stoneHalfExtents = new THREE.Vector3( 1, 2, 0.15 );  // 石头的半尺寸（薄而高）
				const numStones = 8;    // 石头数量
				quat.set( 0, 0, 0, 1 ); // 所有石头无旋转
				
				// 创建一排石头
				for ( let i = 0; i < numStones; i ++ ) {
					// 计算石头位置：在Z轴上等间距分布
					// 15是总长度，(0.5 - i/(numStones+1))创建对称分布
					pos.set( 0, 2, 15 * ( 0.5 - i / ( numStones + 1 ) ) );
					
					// 创建石头，使用灰色材质
					createObject( stoneMass, stoneHalfExtents, pos, quat, createMaterial( 0xB0B0B0 ) );
				}

				// ---------- 山（凸面体，不是立方体） ----------
				const mountainMass = 860;  // 山的质量
				const mountainHalfExtents = new THREE.Vector3( 4, 5, 4 );  // 山的半尺寸
				pos.set( 5, mountainHalfExtents.y * 0.5, -7 );  // 山的位置
				quat.set( 0, 0, 0, 1 );
				
				// 定义山的顶点（凸面体）
				// 凸面体：任意两点连线都在体内的几何体
				const mountainPoints = [];
				
				// 底部四个点（一个矩形）
				mountainPoints.push( new THREE.Vector3( mountainHalfExtents.x, -mountainHalfExtents.y, mountainHalfExtents.z ) );
				mountainPoints.push( new THREE.Vector3( -mountainHalfExtents.x, -mountainHalfExtents.y, mountainHalfExtents.z ) );
				mountainPoints.push( new THREE.Vector3( mountainHalfExtents.x, -mountainHalfExtents.y, -mountainHalfExtents.z ) );
				mountainPoints.push( new THREE.Vector3( -mountainHalfExtents.x, -mountainHalfExtents.y, -mountainHalfExtents.z ) );
				
				// 顶部一个点（形成锥形）
				mountainPoints.push( new THREE.Vector3( 0, mountainHalfExtents.y, 0 ) );
				
				// 使用ConvexGeometry从点集创建凸面体网格
				const mountain = new THREE.Mesh( 
					new ConvexGeometry( mountainPoints ), 
					createMaterial( 0xB03814 ) 
				);
				
				// 设置山的位置和旋转
				mountain.position.copy( pos );
				mountain.quaternion.copy( quat );
				
				// 准备山为可破碎对象
				convexBreaker.prepareBreakableObject( mountain, mountainMass, new THREE.Vector3(), new THREE.Vector3(), true );
				
				// 为山创建物理表示
				createDebrisFromBreakableObject( mountain );
			}

			/**
			 * 创建立方体物理对象的简化函数
			 * 这是一个辅助函数，将Three.js网格与物理刚体关联
			 * 
			 * @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 - 视觉材质
			 * @returns {THREE.Mesh} 创建的网格对象
			 */
			function createParalellepipedWithPhysics( sx, sy, sz, mass, pos, quat, material ) {
				// 1. 创建Three.js网格（视觉部分）
				// BoxGeometry创建了一个立方体几何
				const object = new THREE.Mesh( 
					new THREE.BoxGeometry( sx, sy, sz, 1, 1, 1 ), 
					material 
				);
				
				// 2. 创建物理形状（碰撞体积）
				// btBoxShape是立方体的物理表示
				// 注意：物理形状使用半尺寸
				const shape = new Ammo.btBoxShape( 
					new Ammo.btVector3( sx * 0.5, sy * 0.5, sz * 0.5 ) 
				);
				shape.setMargin( margin );  // 设置碰撞边距
				
				// 3. 创建刚体（将视觉网格与物理形状关联）
				createRigidBody( object, shape, mass, pos, quat );
				
				return object;  // 返回创建的网格对象
			}

			/**
			 * 从可破碎对象创建物理碎片
			 * 这是将Three.js可破碎对象连接到物理引擎的关键函数
			 * 
			 * @param {THREE.Object3D} object - Three.js可破碎对象
			 */
			function createDebrisFromBreakableObject( object ) {
				// 启用阴影投射和接收
				// 碎片也应该有阴影效果
				object.castShadow = true;
				object.receiveShadow = true;
				
				// 1. 基于几何体顶点创建凸面体物理形状
				// object.geometry.attributes.position.array包含所有顶点坐标
				const shape = createConvexHullPhysicsShape( object.geometry.attributes.position.array );
				shape.setMargin( margin );  // 设置碰撞边距
				
				// 2. 创建刚体
				// 从object.userData获取质量、速度等信息
				const body = createRigidBody( 
					object,                  // Three.js对象
					shape,                   // 物理形状
					object.userData.mass,    // 质量（从userData获取）
					null,                    // 位置（使用对象的当前位置）
					null,                    // 旋转（使用对象的当前旋转）
					object.userData.velocity,       // 初始线速度
					object.userData.angularVelocity // 初始角速度
				);
				
				// 3. 设置用户数据指针
				// 这是关键步骤：允许在物理回调中获取对应的Three.js对象
				// 物理引擎需要知道哪个物理刚体对应哪个Three.js对象
				const btVecUserData = new Ammo.btVector3( 0, 0, 0 );
				btVecUserData.threeObject = object;  // 存储Three.js对象引用
				body.setUserPointer( btVecUserData ); // 设置到物理刚体
			}

			/**
			 * 移除碎片对象
			 * 当对象破碎后，需要从场景和物理世界中移除原始对象
			 * 
			 * @param {THREE.Object3D} object - 要移除的对象
			 */
			function removeDebris( object ) {
				scene.remove( object );  // 从Three.js场景中移除
				physicsWorld.removeRigidBody( object.userData.physicsBody );  // 从物理世界中移除
			}

			/**
			 * 从顶点数组创建凸面体物理形状
			 * 这是将Three.js几何体转换为物理形状的核心函数
			 * 
			 * @param {Float32Array} coords - 顶点坐标数组，格式：[x1,y1,z1, x2,y2,z2, ...]
			 * @returns {Ammo.btConvexHullShape} 凸面体物理形状
			 */
			function createConvexHullPhysicsShape( coords ) {
				// 创建凸面体物理形状
				const shape = new Ammo.btConvexHullShape();
				
				// 遍历所有顶点，添加到凸面体形状中
				// 注意：顶点坐标以3个为一组（x,y,z）
				for ( let i = 0, il = coords.length; i < il; i += 3 ) {
					// 从数组中提取顶点坐标
					tempBtVec3_1.setValue( coords[ i ], coords[ i + 1 ], coords[ i + 2 ] );
					
					// 判断是否是最后一个点
					const lastOne = ( i >= ( il - 3 ) );
					
					// 将点添加到凸面体形状
					shape.addPoint( tempBtVec3_1, lastOne );
				}
				
				return shape;  // 返回创建的物理形状
			}

			/**
			 * 创建刚体的核心函数
			 * 这是连接Three.js视觉对象与Ammo.js物理引擎的关键函数
			 * 
			 * @param {THREE.Object3D} object - Three.js视觉对象
			 * @param {Ammo.btCollisionShape} physicsShape - 物理碰撞形状
			 * @param {number} mass - 质量（0=静态，>0=动态）
			 * @param {THREE.Vector3} pos - 初始位置（如果为null则使用object.position）
			 * @param {THREE.Quaternion} quat - 初始旋转（如果为null则使用object.quaternion）
			 * @param {THREE.Vector3} vel - 初始线速度（可选）
			 * @param {THREE.Vector3} angVel - 初始角速度（可选）
			 * @returns {Ammo.btRigidBody} 创建的物理刚体
			 */
			function createRigidBody( object, physicsShape, mass, pos, quat, vel, angVel ) {
				// 1. 设置对象的位置和旋转
				if ( pos ) {
					object.position.copy( pos );  // 使用传入的位置
				} else {
					pos = object.position;  // 使用对象的当前位置
				}

				if ( quat ) {
					object.quaternion.copy( quat );  // 使用传入的旋转
				} else {
					quat = object.quaternion;  // 使用对象的当前旋转
				}

				// 2. 创建物理变换
				// btTransform表示刚体的位置和旋转
				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 ) );  // 设置旋转
				
				// 3. 创建运动状态
				// btMotionState连接物理变换与视觉对象
				const motionState = new Ammo.btDefaultMotionState( transform );

				// 4. 计算局部惯性
				// 惯性张量描述物体质量分布，影响旋转阻力
				const localInertia = new Ammo.btVector3( 0, 0, 0 );
				physicsShape.calculateLocalInertia( mass, localInertia );  // 根据质量和形状计算

				// 5. 创建刚体构造信息
				// btRigidBodyConstructionInfo包含创建刚体所需的所有参数
				const rbInfo = new Ammo.btRigidBodyConstructionInfo( 
					mass,           // 质量
					motionState,    // 运动状态
					physicsShape,   // 碰撞形状
					localInertia    // 局部惯性
				);
				
				// 设置物理属性
				rbInfo.set_m_restitution( 0.5 );  // 恢复系数（弹性）：0.5表示中等弹性
				rbInfo.set_m_friction( 0.5 );     // 摩擦系数：0.5表示中等摩擦

				// 6. 创建刚体
				const body = new Ammo.btRigidBody( rbInfo );

				// 7. 设置初始速度（如果提供）
				if ( vel ) {
					body.setLinearVelocity( new Ammo.btVector3( vel.x, vel.y, vel.z ) );
				}

				if ( angVel ) {
					body.setAngularVelocity( new Ammo.btVector3( angVel.x, angVel.y, angVel.z ) );
				}

				// 8. 存储引用到用户数据
				// 这是双向链接：Three.js对象知道物理刚体，物理刚体知道Three.js对象
				object.userData.physicsBody = body;  // 存储物理刚体引用
				object.userData.collided = false;    // 初始化碰撞标志

				// 9. 将对象添加到场景
				scene.add( object );

				// 10. 如果是动态物体（质量>0），添加到刚体数组
				if ( mass > 0 ) {
					rigidBodies.push( object );  // 添加到全局数组（用于每帧更新）
					
					// 禁用休眠状态（始终保持激活）
					// 激活状态4表示DISABLE_DEACTIVATION
					// 这样物体即使静止也不会被物理引擎优化掉
					body.setActivationState( 4 );
				}

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

				return body;  // 返回创建的物理刚体
			}

			/**
			 * 生成随机颜色
			 * 用于为对象分配随机但可预测的颜色
			 * 
			 * @returns {number} 十六进制颜色值（0xRRGGBB格式）
			 */
			function createRandomColor() {
				// 生成0到2^24-1之间的随机整数
				// 这对应24位颜色值（RGB各8位）
				return Math.floor( Math.random() * ( 1 << 24 ) );
			}

			/**
			 * 创建Phong材质
			 * Phong材质支持高光反射，使对象看起来更有光泽
			 * 
			 * @param {number} color - 十六进制颜色值（如0xFF0000表示红色）
			 * @returns {THREE.MeshPhongMaterial} Phong材质对象
			 */
			function createMaterial( color ) {
				// 如果没有指定颜色，生成随机颜色
				color = color || createRandomColor();
				
				// 创建并返回Phong材质
				return new THREE.MeshPhongMaterial( { color: color } );
			}

			/**
			 * 初始化用户输入处理
			 * 设置鼠标点击事件监听器，允许用户与场景交互
			 */
			function initInput() {
				// 监听鼠标点击事件（pointerdown支持触摸和鼠标）
				window.addEventListener( 'pointerdown', function ( event ) {
					// 1. 计算归一化设备坐标（NDC）
					// 将屏幕坐标转换为Three.js使用的归一化坐标：
					// - X轴：从左到右，-1到1
					// - Y轴：从上到下，-1到1
					mouseCoords.set(
						( event.clientX / window.innerWidth ) * 2 - 1,   // X坐标
						- ( event.clientY / window.innerHeight ) * 2 + 1 // Y坐标（反转，因为屏幕Y轴向下）
					);

					// 2. 更新射线投射器
					// 从相机位置向鼠标点击方向发射一条3D射线
					raycaster.setFromCamera( mouseCoords, camera );

					// 3. 创建球体参数
					// 用户点击时会抛出一个球体
					const ballMass = 35;      // 球体质量
					const ballRadius = 0.4;   // 球体半径

					// 4. 创建球体网格（视觉部分）
					// SphereGeometry参数：半径、宽度分段数、高度分段数
					// 更多分段数=更平滑的球体，但性能消耗更大
					const ball = new THREE.Mesh( 
						new THREE.SphereGeometry( ballRadius, 14, 10 ), 
						ballMaterial 
					);
					ball.castShadow = true;     // 球体投射阴影
					ball.receiveShadow = true;  // 球体接收阴影
					
					// 5. 创建球体物理形状
					const ballShape = new Ammo.btSphereShape( ballRadius );
					ballShape.setMargin( margin );  // 设置碰撞边距
					
					// 6. 计算球体初始位置
					// 位置 = 射线原点 + 射线方向（使球体出现在相机前方）
					pos.copy( raycaster.ray.direction );     // 复制射线方向
					pos.add( raycaster.ray.origin );         // 加上射线起点
					quat.set( 0, 0, 0, 1 );                  // 无旋转
					
					// 7. 创建球体刚体
					const ballBody = createRigidBody( ball, ballShape, ballMass, pos, quat );

					// 8. 给球体施加速度
					// 速度方向与射线方向相同，大小通过乘以标量控制
					pos.copy( raycaster.ray.direction );  // 再次获取射线方向
					pos.multiplyScalar( 24 );             // 乘以速度系数
					ballBody.setLinearVelocity( new Ammo.btVector3( pos.x, pos.y, pos.z ) );
				} );
			}

			/**
			 * 窗口大小变化处理函数
			 * 当浏览器窗口大小改变时，需要调整相机和渲染器
			 */
			function onWindowResize() {
				// 1. 更新相机宽高比
				// 透视相机需要知道渲染区域的宽高比
				camera.aspect = window.innerWidth / window.innerHeight;
				camera.updateProjectionMatrix();  // 必须调用此方法使更改生效
				
				// 2. 更新渲染器大小
				renderer.setSize( window.innerWidth, window.innerHeight );
			}

			/**
			 * 动画循环函数
			 * 这是Three.js的渲染循环，以显示器的刷新率调用（通常60FPS）
			 * 每帧执行渲染和性能统计更新
			 */
			function animate() {
				render();        // 渲染场景
				stats.update();  // 更新性能统计器
			}

			/**
			 * 渲染函数
			 * 每帧执行，更新物理模拟并渲染场景
			 */
			function render() {
				// 1. 获取时间增量（delta time）
				// 这是从上一次渲染到当前渲染的时间差（秒）
				// 使用时间增量可以使动画与帧率无关
				const deltaTime = clock.getDelta();
				
				// 2. 更新物理模拟
				// 这是物理引擎的核心，计算所有物体的新位置和速度
				updatePhysics( deltaTime );
				
				// 3. 渲染场景
				// 将3D场景通过相机视角渲染到2D画布
				renderer.render( scene, camera );
			}

			/**
			 * 更新物理模拟
			 * 这是物理引擎的核心更新函数，执行以下操作：
			 * 1. 推进物理模拟时间
			 * 2. 更新所有刚体的位置和旋转
			 * 3. 检测和处理碰撞
			 * 4. 处理破碎效果
			 * 
			 * @param {number} deltaTime - 时间增量（秒）
			 */
			function updatePhysics( deltaTime ) {
				// ---------- 步骤1：执行物理世界模拟 ----------
				// physicsWorld.stepSimulation推进物理模拟
				// 参数说明：
				// - deltaTime: 时间步长（秒）
				// - 10: 最大子步数（如果deltaTime很大，物理引擎会分解为多个小子步）
				physicsWorld.stepSimulation( deltaTime, 10 );
				
				// ---------- 步骤2：更新所有刚体的位置和旋转 ----------
				// 物理引擎计算了新位置，现在需要更新Three.js对象
				for ( let i = 0, il = rigidBodies.length; i < il; i ++ ) {
					const objThree = rigidBodies[ i ];           // Three.js对象
					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() );
						objThree.quaternion.set( q.x(), q.y(), q.z(), q.w() );
						
						// 重置碰撞标志（为下一帧准备）
						objThree.userData.collided = false;
					}
				}
				
				// ---------- 步骤3：检测和处理碰撞 ----------
				// 遍历所有碰撞对（manifolds），检查是否需要破碎
				for ( let i = 0, il = dispatcher.getNumManifolds(); i < il; i ++ ) {
					// 获取碰撞对
					const contactManifold = dispatcher.getManifoldByIndexInternal( i );
					
					// 获取碰撞的两个刚体
					const rb0 = Ammo.castObject( contactManifold.getBody0(), Ammo.btRigidBody );
					const rb1 = Ammo.castObject( contactManifold.getBody1(), Ammo.btRigidBody );
					
					// 通过用户指针获取对应的Three.js对象
					// 这是之前在createDebrisFromBreakableObject中设置的
					const threeObject0 = Ammo.castObject( rb0.getUserPointer(), Ammo.btVector3 ).threeObject;
					const threeObject1 = Ammo.castObject( rb1.getUserPointer(), Ammo.btVector3 ).threeObject;
					
					// 如果没有关联的Three.js对象，跳过这个碰撞对
					// 这可能是纯物理对象（没有视觉表示）
					if ( ! threeObject0 && ! threeObject1 ) {
						continue;
					}
					
					// 获取用户数据
					const userData0 = threeObject0 ? threeObject0.userData : null;
					const userData1 = threeObject1 ? threeObject1.userData : null;
					
					// 检查对象是否可破碎
					// breakable标志在prepareBreakableObject中设置
					const breakable0 = userData0 ? userData0.breakable : false;
					const breakable1 = userData1 ? userData1.breakable : false;
					
					// 检查是否已碰撞过（避免同一帧多次破碎）
					const collided0 = userData0 ? userData0.collided : false;
					const collided1 = userData1 ? userData1.collided : false;
					
					// 如果两个对象都不可破碎，或都已碰撞过，跳过
					if ( ( ! breakable0 && ! breakable1 ) || ( collided0 && collided1 ) ) {
						continue;
					}
					
					// ---------- 步骤4：检查实际接触点 ----------
					let contact = false;     // 是否有实际接触
					let maxImpulse = 0;      // 最大冲量（用于判断破碎强度）
					
					// 遍历碰撞对中的所有接触点
					for ( let j = 0, jl = contactManifold.getNumContacts(); j < jl; j ++ ) {
						const contactPoint = contactManifold.getContactPoint( j );
						
						// 距离小于0表示两个物体实际接触（穿透）
						// 距离等于0表示刚好接触，大于0表示分离
						if ( contactPoint.getDistance() < 0 ) {
							contact = true;  // 标记有实际接触
							const impulse = contactPoint.getAppliedImpulse(); // 获取冲量大小
							
							// 寻找最大冲量（最强烈的碰撞）
							if ( impulse > maxImpulse ) {
								maxImpulse = impulse;
								
								// 获取碰撞点位置和法线
								const pos = contactPoint.get_m_positionWorldOnB();
								const normal = contactPoint.get_m_normalWorldOnB();
								
								// 存储碰撞信息
								impactPoint.set( pos.x(), pos.y(), pos.z() );    // 碰撞点
								impactNormal.set( normal.x(), normal.y(), normal.z() ); // 碰撞法线
							}
							break;  // 找到一个接触点就足够
						}
					}
					
					// 如果没有实际接触点，跳过破碎处理
					if ( ! contact ) continue;
					
					// ---------- 步骤5：破碎判断和处理 ----------
					const fractureImpulse = 250;  // 破碎阈值（冲量大于此值则破碎）
					
					// 处理第一个对象的破碎
					if ( breakable0 && ! collided0 && maxImpulse > fractureImpulse ) {
						// 使用凸面体破碎器细分对象
						// 参数：对象、碰撞点、碰撞法线、最小碎片数、最大碎片数
						const debris = convexBreaker.subdivideByImpact( 
							threeObject0, 
							impactPoint, 
							impactNormal, 
							1,    // 最小碎片数
							2     // 最大碎片数
						);
						
						// 为每个碎片创建物理实体
						const numObjects = debris.length;
						for ( let j = 0; j < numObjects; j ++ ) {
							// 获取原对象的线速度和角速度
							const vel = rb0.getLinearVelocity();
							const angVel = rb0.getAngularVelocity();
							
							const fragment = debris[ j ];  // 碎片对象
							
							// 将速度信息存储到碎片的userData
							// 这些速度将在createDebrisFromBreakableObject中使用
							fragment.userData.velocity.set( vel.x(), vel.y(), vel.z() );
							fragment.userData.angularVelocity.set( angVel.x(), angVel.y(), angVel.z() );
							
							// 为碎片创建物理表示
							createDebrisFromBreakableObject( fragment );
						}
						
						// 标记原对象待移除
						objectsToRemove[ numObjectsToRemove ++ ] = threeObject0;
						userData0.collided = true;  // 标记已碰撞（避免重复破碎）
					}
					
					// 处理第二个对象的破碎（逻辑与第一个相同）
					if ( breakable1 && ! collided1 && maxImpulse > fractureImpulse ) {
						const debris = convexBreaker.subdivideByImpact( 
							threeObject1, 
							impactPoint, 
							impactNormal, 
							1, 
							2 
						);
						
						const numObjects = debris.length;
						for ( let j = 0; j < numObjects; j ++ ) {
							const vel = rb1.getLinearVelocity();
							const angVel = rb1.getAngularVelocity();
							const fragment = debris[ j ];
							fragment.userData.velocity.set( vel.x(), vel.y(), vel.z() );
							fragment.userData.angularVelocity.set( angVel.x(), angVel.y(), angVel.z() );
							
							createDebrisFromBreakableObject( fragment );
						}
						
						objectsToRemove[ numObjectsToRemove ++ ] = threeObject1;
						userData1.collided = true;
					}
				}
				
				// ---------- 步骤6：移除已破碎的对象 ----------
				// 从场景和物理世界中移除原对象
				for ( let i = 0; i < numObjectsToRemove; i ++ ) {
					removeDebris( objectsToRemove[ i ] );
				}
				
				// 重置移除计数器
				numObjectsToRemove = 0;
			}
		</script>
	</body>
</html>