<!-- Three.js 大规模批量渲染优化系统 - 详细功能与技术点分析
🎯 核心功能概述
这是一个高性能WebGL 3D渲染演示，展示了如何高效渲染50万个3D实例对象。系统通过多种优化技术实现了在浏览器中流畅运行大规模场景，并提供了完整的交互体验。

📊 主要技术特点
1. 批量渲染引擎
核心技术：使用Three.js的BatchedMesh类

渲染优化：将50万个实例合并到单个WebGL绘制调用中

内存效率：所有实例共享几何体数据，仅通过变换矩阵区分

性能对比：传统渲染需要50万次绘制调用 → 批处理仅需1次调用

2. 多层次细节（LOD）系统
自动几何体简化：为每个基础几何体生成5个细节级别

智能切换机制：根据相机距离动态选择合适细节级别

LOD 0（原始）：相机距离 < 50单位

LOD 1（简化1）：50 ≤ 距离 < 100

LOD 2（简化2）：100 ≤ 距离 < 125

LOD 3（简化3）：125 ≤ 距离 < 200

LOD 4（最简化）：距离 ≥ 200

技术实现：使用meshoptimizer算法进行网格简化

3. BVH加速结构（双层）
text
┌─────────────────────────────────┐
│       TLAS (顶层加速结构)       │
│    • 实例级别空间划分            │
│    • 加速实例选择                │
│    • 视锥体剔除优化              │
└──────────────┬──────────────────┘
               │
┌──────────────▼──────────────────┐
│       BLAS (底层加速结构)       │
│    • 几何体级别空间划分          │
│    • 加速几何体碰撞检测          │
│    • 每个LOD级别独立BLAS         │
└─────────────────────────────────┘
4. 交互与可视化功能
实时射线检测：鼠标悬停时高亮对应实例

性能监控面板：实时显示FPS、渲染时间等指标

控制面板：可动态切换BVH、LOD等功能的开关

相机控制：支持旋转、缩放、平移操作

🔧 关键技术实现细节
1. 几何体处理管道
javascript
// 处理流程：
原始几何体 → meshoptimizer简化 → 5个LOD级别 → 添加到BatchedMesh
2. 实例化系统
javascript
// 实例属性存储：
- 位置矩阵 (4x4 Matrix)
- 颜色 (RGB)
- 几何体类型ID
- LOD配置
3. 射线检测优化
BVH树遍历：O(log n)复杂度 vs 传统O(n)

Early-Out优化：firstHitOnly = true

坐标转换：屏幕坐标 → NDC → 世界空间射线

4. 渲染优化技术
基数排序：优化实例绘制顺序

视锥体剔除：使用BVH快速排除不可见实例

实例缓冲区：预分配内存，避免动态分配

⚡ 性能优化亮点
CPU端优化
减少JavaScript调用：批量处理实例更新

空间数据结构：BVH树加速查询操作

数据预计算：LOD几何体预生成

GPU端优化
减少绘制调用：从50万次降到1次

顶点重用：所有实例共享顶点缓冲区

着色器优化：统一材质和着色器程序

内存优化
共享几何数据：所有实例引用相同几何体

LOD数据复用：不同LOD级别共享顶点位置

缓冲区复用：变换矩阵和颜色数据紧凑存储

🎮 用户体验特性
视觉表现
PBR材质：金属质感表面，逼真光照效果

环境贴图：室内环境反射，增强真实感

色调映射：ACES Filmic电影级色彩处理

交互设计
实时反馈：鼠标悬停立即高亮

直观控制：GUI面板提供功能切换

性能透明：Stats.js显示实时性能数据

📈 技术指标对比
优化技术	传统方法	本系统优化	性能提升
绘制调用	500,000次	1次	500,000倍
射线检测	O(n)线性扫描	O(log n)树遍历	1000+倍
内存使用	每个实例独立几何体	共享几何体+实例数据	减少80-90%
LOD切换	手动管理	自动距离检测	减少50%三角形
🔄 系统工作流程
text
用户交互 → 事件处理 → 射线检测(BVH加速) → 实例高亮
     ↓
相机控制 → 视锥体计算 → LOD选择 → 渲染准备
     ↓
几何处理 → 实例排序 → WebGL绘制 → 屏幕显示
     ↓
性能统计 → GUI更新 → 循环下一帧
🛠 扩展性与应用场景
适用场景
大规模数据可视化（点云、地理数据）

游戏中的大规模场景（植被、人群）

建筑和城市仿真

科学计算可视化

扩展方向
动态实例：支持实例动画和变换更新

GPU拾取：使用颜色编码实现更快的对象选择

流式加载：支持动态加载/卸载实例

多线程：使用Web Worker进行后台计算

🎯 总结
这个系统展示了现代WebGL高性能渲染的最佳实践，通过批量渲染、LOD系统、BVH加速三大核心技术，实现了在浏览器中流畅渲染50万个3D对象的壮举。它不仅是技术演示，更是实时图形编程的教学范例，涵盖了从底层WebGL优化到上层用户体验设计的完整知识体系。 -->


<!DOCTYPE html>
<html lang="en">
	<head>
		<!-- 页面标题：描述页面核心功能 -->
		<title>Three.js批量渲染优化示例 - 包含LOD和BVH加速</title>
		<!-- 字符编码设置：使用UTF-8支持多语言 -->
		<meta charset="utf-8">
		<!-- 视口设置：禁止用户缩放，确保WebGL内容正确显示 -->
		<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>
			a {
				text-decoration: underline;
			}
		</style>
	</head>

	<body>
		<!-- 页面信息区域：展示项目信息和功能说明 -->
		<div id="info">
			<!-- 项目链接和技术栈说明 -->
			<a href="https://threejs.org" target="_blank" rel="noopener">Three.js</a> 批量渲染 - LOD - BVH 加速演示 - 基于 <a href="https://github.com/agargaro/batched-mesh-extensions" target="_blank" rel="noopener">@three.ez/batched-mesh-extensions</a> 扩展库<br/>
			<!-- 核心功能说明 -->
			使用BatchedMesh批量渲染技术，包含10种不同几何体和50万个实例对象。<br>
			每个几何体拥有5个LOD（多层次细节）级别，其中4个通过meshoptimizer自动生成。<br>
			通过BVH（包围层次结构）技术实现视锥体剔除和射线检测加速，包含TLAS（顶层加速结构）和BLAS（底层加速结构）。<br>
			<br>
			<!-- 交互说明 -->
			<strong>操作指南：</strong><br>
			1. 鼠标拖拽：旋转视角<br>
			2. 鼠标滚轮：缩放场景<br>
			3. 鼠标移动：悬停高亮实例<br>
			4. 右侧控制面板：可切换BVH/LOD功能<br>
			<!-- 性能说明 -->
			<br>
			<strong>技术亮点：</strong><br>
			- 批量渲染：减少WebGL绘制调用，提升渲染性能<br>
			- LOD系统：根据距离动态切换几何体复杂度，优化渲染负载<br>
			- BVH加速：使用空间划分算法加速碰撞检测和视锥体剔除<br>
			- 实例化：50万个实例共享几何体数据，节省内存<br>
		</div>

		<!-- 
			导入映射配置 (Import Maps)
			作用：定义JavaScript模块的导入路径映射，类似于package.json中的依赖映射
			优势：避免在代码中写冗长的相对路径，提高代码可读性
		-->
		<script type="importmap">
			{
				"imports": {
					"three": "../build/three.module.js",
					"three/addons/": "./jsm/",

					"three-mesh-bvh": "https://cdn.jsdelivr.net/npm/three-mesh-bvh@0.9.0/build/index.module.js",

					"@three.ez/batched-mesh-extensions": "https://cdn.jsdelivr.net/npm/@three.ez/batched-mesh-extensions@0.0.8/build/webgl.js",
					"bvh.js": "https://cdn.jsdelivr.net/npm/bvh.js@0.0.13/build/index.js",

					"@three.ez/simplify-geometry": "https://cdn.jsdelivr.net/npm/@three.ez/simplify-geometry@0.0.1/build/index.js",
					"meshoptimizer": "https://cdn.jsdelivr.net/npm/meshoptimizer@0.23.0/+esm"
				}
			}
		</script>

		<!-- 主应用程序脚本模块 -->
		<script type="module">

			// ========== 模块导入区域 ==========
			// 导入Three.js核心库
			import * as THREE from 'three';
			// 导入性能统计模块：显示FPS、渲染时间等性能指标
			import Stats from 'three/addons/libs/stats.module.js';
			// 导入地图控制器：提供适合3D场景的轨道控制（旋转、缩放、平移）
			import { MapControls } from 'three/addons/controls/MapControls.js';
			// 导入室内环境贴图生成器：创建基于物理的渲染环境
			import { RoomEnvironment } from 'three/addons/environments/RoomEnvironment.js';
			// 导入轻量级GUI库：创建交互式控制面板
			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';

			// 导入BVH相关扩展函数
			// acceleratedRaycast: 使用BVH加速的射线检测方法
			// computeBatchedBoundsTree: 为BatchedMesh计算边界树的方法
			import { acceleratedRaycast, computeBatchedBoundsTree } from 'three-mesh-bvh';

			// 导入批处理网格扩展功能
			// createRadixSort: 创建基数排序器，优化实例渲染顺序
			// extendBatchedMeshPrototype: 扩展BatchedMesh原型，添加自定义方法
			// getBatchedMeshLODCount: 获取BatchedMesh的LOD计数信息
			import { createRadixSort, extendBatchedMeshPrototype, getBatchedMeshLODCount } from '@three.ez/batched-mesh-extensions';
			// 导入几何体简化功能
			// performanceRangeLOD: 性能优化的LOD距离范围配置
			// simplifyGeometriesByErrorLOD: 根据误差值简化几何体生成LOD
			import { performanceRangeLOD, simplifyGeometriesByErrorLOD } from '@three.ez/simplify-geometry';

			// ========== 原型扩展 ==========
			// 扩展BatchedMesh的原型，添加批处理网格特有的方法和属性
			// 这是使用扩展库的必要步骤
			extendBatchedMeshPrototype();

			// ========== Three.js核心功能扩展 ==========
			// 用BVH加速的射线检测方法替换默认的Mesh.raycast方法
			// 这会使所有Mesh对象（包括BatchedMesh）都使用加速的射线检测
			THREE.Mesh.prototype.raycast = acceleratedRaycast;
			
			// 为BatchedMesh添加计算边界树的方法
			// 这个方法会构建BLAS（底层加速结构），用于几何体级别的空间划分
			THREE.BatchedMesh.prototype.computeBoundsTree = computeBatchedBoundsTree;

			// ========== 全局变量声明 ==========
			// 性能统计对象，用于监控渲染性能
			let stats;
			// Three.js三大核心对象
			let camera, scene, renderer;

			// 实例数量常量：总共创建50万个实例
			const instancesCount = 500000;
			// 批处理网格对象：核心渲染对象
			let batchedMesh;
			// 上一次鼠标悬停的实例ID，用于实现悬停高亮效果
			let lastHoveredInstance = null;
			// 保存上一次悬停实例的原始颜色
			const lastHoveredColor = new THREE.Color();
			// 高亮颜色：当鼠标悬停时使用的颜色
			const highlight = new THREE.Color( 'red' );

			// 射线检测相关对象
			// raycaster：执行从屏幕坐标到3D空间的射线检测
			const raycaster = new THREE.Raycaster();
			// mouse：存储标准化设备坐标（NDC），范围[-1, 1]
			const mouse = new THREE.Vector2( 1, 1 );
			
			// 变换相关对象：用于实例的放置和变换
			// position：实例的位置（平移）
			const position = new THREE.Vector3();
			// quaternion：实例的旋转（四元数表示，避免万向节锁）
			const quaternion = new THREE.Quaternion();
			// scale：实例的缩放（统一缩放为1，即不缩放）
			const scale = new THREE.Vector3( 1, 1, 1 );
			// matrix：组合平移、旋转、缩放的变换矩阵
			const matrix = new THREE.Matrix4();
			// color：实例的颜色（随机生成）
			const color = new THREE.Color();

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

			// ========== 异步初始化函数 ==========
			// async关键字：因为需要等待LOD几何体生成完成
			async function init() {

				// ========== 1. 渲染器设置 ==========
				// 创建WebGL渲染器，开启抗锯齿
				renderer = new THREE.WebGLRenderer( { antialias: true } );
				// 设置设备像素比，适配高DPI屏幕
				renderer.setPixelRatio( window.devicePixelRatio );
				// 设置渲染器大小为整个窗口
				renderer.setSize( window.innerWidth, window.innerHeight );
				// 设置色调映射：ACESFilmic提供电影级色调效果
				renderer.toneMapping = THREE.ACESFilmicToneMapping;
				// 设置色调映射曝光度：控制场景亮度
				renderer.toneMappingExposure = 0.8;
				// 将渲染器的canvas元素添加到DOM中
				document.body.appendChild( renderer.domElement );

				// ========== 2. 场景设置 ==========
				// 创建Three.js场景对象，包含所有3D对象、灯光、相机等
				scene = new THREE.Scene();

				// 创建环境贴图：基于物理的渲染需要环境光照
				// PMREMGenerator：预计算辐照度环境贴图生成器
				const pmremGenerator = new THREE.PMREMGenerator( renderer );
				// 从RoomEnvironment场景生成环境贴图
				scene.environment = pmremGenerator.fromScene( new RoomEnvironment(), 0.04 ).texture;

				// ========== 3. 相机设置 ==========
				// 创建透视相机：模拟人眼视角
				// 参数：视野角(FOV)、宽高比、近裁剪面、远裁剪面
				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 0.1, 1000 );
				// 设置相机初始位置：(x, y, z)坐标
				camera.position.set( 0, 20, 55 );

				// ========== 4. 射线检测器优化设置 ==========
				// firstHitOnly：只返回第一个交点，提高性能
				// 对于悬停检测，我们只需要知道是否命中以及第一个命中的对象
				raycaster.firstHitOnly = true;

				// ========== 5. 性能统计初始化 ==========
				// 创建Stats.js性能监控面板
				stats = new Stats();
				// 将性能面板添加到页面中
				document.body.appendChild( stats.dom );

				// ========== 6. 场景控制器设置 ==========
				// 创建地图控制器，绑定到相机和渲染器的DOM元素
				const controls = new MapControls( camera, renderer.domElement );
				// 限制垂直旋转角度：防止相机翻转到地面以下
				controls.maxPolarAngle = Math.PI / 2; // 90度限制

				// ========== 7. 创建基础几何体 ==========
				// 创建10种不同的环面纽结几何体（TorusKnot）
				// 参数说明：(半径, 管道半径, 管段数, 径向段数, p值, q值)
				// p和q值控制纽结的缠绕方式，不同的组合产生不同的几何形状
				const geometries = [
					new THREE.TorusKnotGeometry( 1, 0.4, 256, 32, 1, 1 ),
					new THREE.TorusKnotGeometry( 1, 0.4, 256, 32, 1, 2 ),
					new THREE.TorusKnotGeometry( 1, 0.4, 256, 32, 1, 3 ),
					new THREE.TorusKnotGeometry( 1, 0.4, 256, 32, 1, 4 ),
					new THREE.TorusKnotGeometry( 1, 0.4, 256, 32, 1, 5 ),
					new THREE.TorusKnotGeometry( 1, 0.4, 256, 32, 2, 1 ),
					new THREE.TorusKnotGeometry( 1, 0.4, 256, 32, 2, 3 ),
					new THREE.TorusKnotGeometry( 1, 0.4, 256, 32, 3, 1 ),
					new THREE.TorusKnotGeometry( 1, 0.4, 256, 32, 4, 1 ),
					new THREE.TorusKnotGeometry( 1, 0.4, 256, 32, 5, 3 )
				];

				// ========== 8. 生成LOD几何体 ==========
				// 异步生成多层次细节几何体
				// 参数：原始几何体数组、LOD级别数（4）、LOD距离配置
				// 返回：二维数组，[几何体索引][LOD级别]
				const geometriesLODArray = await simplifyGeometriesByErrorLOD( geometries, 4, performanceRangeLOD );
				// 结果结构示例：
				// [
				//   [原始几何体, LOD1几何体, LOD2几何体, LOD3几何体, LOD4几何体], // 几何体0
				//   [原始几何体, LOD1几何体, LOD2几何体, LOD3几何体, LOD4几何体], // 几何体1
				//   ...
				// ]

				// ========== 9. 创建批处理网格 ==========
				// 首先获取批处理网格所需的顶点和索引计数信息
				// 这些信息用于预分配内存，优化性能
				const { vertexCount, indexCount, LODIndexCount } = getBatchedMeshLODCount( geometriesLODArray );
				
				// 创建BatchedMesh实例
				// 参数：最大实例数、顶点数、索引数、材质
				batchedMesh = new THREE.BatchedMesh( 
					instancesCount,                    // 最大支持50万个实例
					vertexCount,                       // 总顶点数
					indexCount,                        // 总索引数
					new THREE.MeshStandardMaterial( {  // PBR标准材质
						metalness: 1,    // 金属度：1表示完全金属
						roughness: 0.8   // 粗糙度：0.8表示较粗糙表面
					} ) 
				);
			
				// 启用基数排序优化
				// 基数排序根据实例的深度进行排序，优化渲染顺序（从远到近或从近到远）
				batchedMesh.customSort = createRadixSort( batchedMesh );

				// ========== 10. 添加几何体和LOD到批处理网格 ==========
				// 遍历所有几何体的LOD数组
				for ( let i = 0; i < geometriesLODArray.length; i ++ ) {

					// 获取当前几何体的所有LOD级别
					const geometryLOD = geometriesLODArray[ i ];
					
					// 添加基础几何体（LOD 0）到批处理网格
					// 参数：几何体、材质索引（-1表示使用默认材质）、LOD索引计数
					// 返回值：几何体ID，用于后续引用
					const geometryId = batchedMesh.addGeometry( geometryLOD[ 0 ], - 1, LODIndexCount[ i ] );
					
					// 添加其他LOD级别，每个级别有不同的切换距离（单位：世界单位）
					// LOD切换原理：当相机与实例的距离超过阈值时，自动切换到更简化的几何体
					batchedMesh.addGeometryLOD( geometryId, geometryLOD[ 1 ], 50 );   // LOD 1：距离50单位时切换
					batchedMesh.addGeometryLOD( geometryId, geometryLOD[ 2 ], 100 );  // LOD 2：距离100单位时切换
					batchedMesh.addGeometryLOD( geometryId, geometryLOD[ 3 ], 125 );  // LOD 3：距离125单位时切换
					batchedMesh.addGeometryLOD( geometryId, geometryLOD[ 4 ], 200 );  // LOD 4：距离200单位时切换
					// 注意：所有LOD级别共享相同的顶点位置数据，只有索引数据不同
					// 这是批处理网格LOD系统的优化特性
				}

				// ========== 11. 创建并放置实例 ==========
				// 计算网格布局：将50万个实例排列成二维网格
				
				// 计算网格每边的实例数（取平方根向上取整）
				const sqrtCount = Math.ceil( Math.sqrt( instancesCount ) );
				// 实例之间的间距
				const size = 5.5;
				// 计算起始位置：使整个网格在场景中居中
				// 公式解释：从中心点向左偏移一半网格宽度，再向右偏移半个间距
				const start = ( sqrtCount / - 2 * size ) + ( size / 2 );

				// 循环创建每个实例
				for ( let i = 0; i < instancesCount; i ++ ) {

					// 计算当前实例在网格中的行列坐标
					const r = Math.floor( i / sqrtCount ); // 行索引
					const c = i % sqrtCount;              // 列索引
					
					// 随机选择一个几何体类型（0-9之间）
					const geometryIndex = Math.floor( Math.random() * geometriesLODArray.length );
					// 在批处理网格中添加一个实例，返回实例ID
					const id = batchedMesh.addInstance( geometryIndex );
					
					// 设置实例位置
					// 列坐标×间距 + 起始位置 = X轴位置
					// 行坐标×间距 + 起始位置 = Z轴位置
					// Y轴始终为0（地面高度）
					position.set( c * size + start, 0, r * size + start );
					
					// 设置随机旋转：使用四元数生成随机旋转
					quaternion.random();
					
					// 构建变换矩阵：组合位置、旋转、缩放
					// compose方法：将位置、旋转、缩放组合成一个4x4变换矩阵
					matrix.compose( position, quaternion, scale );
					// 将变换矩阵应用到实例
					batchedMesh.setMatrixAt( id, matrix );
					
					// 设置随机颜色：使用HSL颜色空间生成鲜艳的颜色
					// HSL参数：色相（0-1）、饱和度（0.6）、亮度（0.5）
					color.setHSL( Math.random(), 0.6, 0.5 );
					// 将颜色应用到实例
					batchedMesh.setColorAt( id, color );
			
				}

				// ========== 12. 构建加速结构 ==========
				// 计算BLAS（Bottom-Level Acceleration Structure，底层加速结构）
				// 这是针对几何体本身的BVH，用于加速几何体级别的射线检测
				// 在LOD系统中，每个LOD级别都有自己的BLAS
				batchedMesh.computeBoundsTree();

				// 计算TLAS（Top-Level Acceleration Structure，顶层加速结构）
				// 这是针对实例的BVH，用于加速实例级别的视锥体剔除和射线检测
				// 参数：THREE.WebGLCoordinateSystem 指定使用WebGL坐标系
				batchedMesh.computeBVH( THREE.WebGLCoordinateSystem );
				// BVH构建原理：
				// 1. 将场景空间递归分割成更小的区域（包围盒）
				// 2. 构建层次树结构，快速排除不相关的区域
				// 3. 射线检测时只需遍历相关节点，而非所有实例
			
				// ========== 13. 将批处理网格添加到场景 ==========
				scene.add( batchedMesh );
			
				// ========== 14. GUI控制面板设置 ==========
				// 配置对象：存储GUI控件的状态
				const config = {
					freeze: false,   // 是否冻结渲染（停止动画更新）
					useBVH: true,    // 是否使用BVH加速
					useLOD: true     // 是否使用LOD系统
				};
			
				// 保存原始引用，用于GUI切换时恢复
				const bvh = batchedMesh.bvh;  // BVH加速结构引用
				// 获取所有几何体的LOD配置
				const lods = batchedMesh._geometryInfo.map( x => x.LOD );
				// 保存原始的onBeforeRender方法
				const onBeforeRender = batchedMesh.onBeforeRender;
			
				// 创建GUI实例
				const gui = new GUI();

				// 添加只读控件：显示当前实例数量
				gui.add( batchedMesh, 'instanceCount' )
					.name( '实例数量' )  // 控件显示名称
					.disable();         // 禁用编辑，只读显示
			
				// 添加冻结/解冻渲染控件
				gui.add( config, 'freeze' )
					.name( '冻结渲染' )  // 控件显示名称
					.onChange( v => {   // 值变化时的回调函数
						// 如果冻结，将onBeforeRender替换为空函数
						// 如果解冻，恢复原始的onBeforeRender方法
						batchedMesh.onBeforeRender = v ? () => {} : onBeforeRender;
					} );

				// 创建视锥体剔除和射线检测设置文件夹
				const frustumCullingFolder = gui.addFolder( '视锥体剔除 & 射线检测' );
				frustumCullingFolder.add( config, 'useBVH' )
					.name( '使用BVH加速' )
					.onChange( v => {
						// 切换BVH加速结构
						batchedMesh.bvh = v ? bvh : null;
						// 设置为null时，Three.js会回退到基本的遍历检测
					} );

				// 创建几何体设置文件夹
				const geometriesFolder = gui.addFolder( '几何体设置' );
				geometriesFolder.add( config, 'useLOD' )
					.name( '使用LOD系统' )
					.onChange( v => {
						// 获取所有几何体信息
						const geometryInfo = batchedMesh._geometryInfo;
						// 遍历所有几何体，启用或禁用LOD
						for ( let i = 0; i < geometryInfo.length; i ++ ) {
							// 如果启用LOD，恢复原始LOD配置
							// 如果禁用LOD，将LOD设置为null（始终使用最高细节级别）
							geometryInfo[ i ].LOD = v ? lods[ i ] : null;
						}
					} );

				// ========== 15. 事件监听器设置 ==========
				// 监听鼠标移动事件：用于射线检测和悬停高亮
				document.addEventListener( 'pointermove', onPointerMove );
				// 监听窗口大小变化事件：响应式调整渲染
				window.addEventListener( 'resize', onWindowResize );
				// 初始调用一次窗口大小调整，确保正确初始化
				onWindowResize();
			
				// ========== 16. 启动渲染循环 ==========
				// 使用setAnimationLoop替代旧的requestAnimationFrame方式
				// 这个循环会持续运行，每帧调用animate函数
				renderer.setAnimationLoop( animate );

			}

			// ========== 事件处理函数 ==========

			/**
			 * 鼠标移动事件处理函数
			 * 功能：将鼠标屏幕坐标转换为标准化设备坐标，并触发射线检测
			 * @param {MouseEvent} event - 鼠标事件对象
			 */
			function onPointerMove( event ) {

				// 阻止默认行为（如文本选择）
				event.preventDefault();

				// 将鼠标坐标转换为标准化设备坐标（Normalized Device Coordinates, NDC）
				// NDC范围：x轴[-1, 1]，从左到右；y轴[-1, 1]，从下到上
				// clientX/clientY：鼠标相对于浏览器窗口的坐标
				// innerWidth/innerHeight：浏览器窗口的内部尺寸
				mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
				mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
				// 注意：y坐标取反，因为WebGL坐标系y轴向上，而屏幕坐标系y轴向下

				// 执行射线检测
				raycast();

			}
			

			/**
			 * 窗口大小调整处理函数
			 * 功能：当浏览器窗口大小改变时，调整相机和渲染器
			 */
			function onWindowResize() {

				// 更新相机的宽高比
				// 宽高比 = 窗口宽度 / 窗口高度
				camera.aspect = window.innerWidth / window.innerHeight;
				// 更新相机的投影矩阵
				// 必须调用此方法使宽高比更改生效
				camera.updateProjectionMatrix();

				// 更新渲染器大小，使其填充整个窗口
				renderer.setSize( window.innerWidth, window.innerHeight );

			}

			/**
			 * 射线检测函数
			 * 功能：从相机向鼠标位置发射射线，检测命中的实例并高亮显示
			 */
			function raycast() {

				// 从相机和鼠标位置创建射线
				// setFromCamera方法：根据标准化设备坐标生成射线
				raycaster.setFromCamera( mouse, camera );
				
				// 执行射线检测，检测与批处理网格的交点
				// intersectObject方法：返回射线与对象的所有交点数组
				// 由于设置了firstHitOnly=true，只会返回第一个交点
				const intersection = raycaster.intersectObject( batchedMesh );

				// 获取交点对应的实例ID
				// batchId是BatchedMesh特有的属性，表示实例的索引
				const batchId = intersection.length > 0 ? intersection[ 0 ].batchId : null;
			
				// 优化：如果悬停的实例没有变化，直接返回，避免不必要的更新
				if ( lastHoveredInstance === batchId ) return;

				// 恢复上一个悬停实例的原始颜色
				if ( lastHoveredInstance ) {
					// setColorAt：设置指定实例的颜色
					batchedMesh.setColorAt( lastHoveredInstance, lastHoveredColor );
				}

				// 高亮当前悬停的实例
				if ( batchId ) {
					// 首先保存当前实例的原始颜色，用于后续恢复
					// getColorAt：获取指定实例的颜色
					batchedMesh.getColorAt( batchId, lastHoveredColor );
					// 将实例颜色设置为高亮颜色（红色）
					batchedMesh.setColorAt( batchId, highlight );
				}

				// 更新当前悬停实例ID
				lastHoveredInstance = batchId;

				// 注意：颜色更改后需要标记实例颜色需要更新
				// BatchedMesh内部会自动处理这个标记

			}

			/**
			 * 动画循环函数
			 * 功能：每帧执行，更新场景渲染
			 * 被renderer.setAnimationLoop调用，每秒约60次（取决于显示器刷新率）
			 */
			function animate() {

				// 开始性能统计测量
				// Stats.js会记录这一帧的开始时间
				stats.begin();

				// 渲染场景
				// 参数：场景对象、相机对象
				// 内部执行：几何体处理、着色器计算、WebGL绘制调用等
				renderer.render( scene, camera );

				// 结束性能统计测量
				// Stats.js会计算这一帧的耗时并更新显示
				stats.end();

				// 注意：这里没有更新场景中的对象位置或动画
				// 因为这是一个静态场景演示，主要展示渲染性能
				// 在更复杂的应用中，这里可能会更新对象位置、物理计算等

			}

		</script>

	</body>
</html>