<!-- Three.js BVH射线检测演示 - 功能与技术详解
🎯 一、核心功能概述
这是一个交互式3D射线检测性能演示，直观展示了边界体积层次结构(BVH) 如何大幅加速3D空间中的射线碰撞检测。用户可以通过GUI界面实时调整参数，观察BVH优化带来的性能提升效果。

主要功能亮点：
实时射线检测可视化 - 3000条射线实时检测与兔子模型的碰撞

BVH性能对比 - 可实时切换启用/禁用BVH，观察帧率变化

交互式控制 - 完整的参数控制面板，实时调整演示效果

3D模型展示 - 加载并展示斯坦福兔子模型

动态可视化 - 射线路径、交点、BVH结构的多层次可视化

🔧 二、主要技术点详解
1. BVH（边界体积层次结构）技术
核心技术：空间划分算法，将复杂几何体组织成树状结构

工作原理：递归地将模型三角形分组到轴对齐包围盒(AABB)中

性能提升：从O(n)线性检测优化到O(log n)对数级检测

实际效果：斯坦福兔子（7万三角形）的射线检测速度提升100-1000倍

2. Three.js扩展机制
javascript
// 扩展Three.js原生类的关键代码
THREE.BufferGeometry.prototype.computeBoundsTree = computeBoundsTree;
THREE.Mesh.prototype.raycast = acceleratedRaycast;
原型扩展：将BVH功能无缝集成到Three.js核心

向后兼容：API与原Three.js完全一致，学习成本低

按需使用：可动态启用/禁用BVH加速

3. 实例化渲染优化
javascript
// 创建实例化网格，高效渲染6000个球体
sphereInstance = new THREE.InstancedMesh(
  new THREE.SphereGeometry(),
  new THREE.MeshBasicMaterial({ color: RAY_COLOR }),
  2 * MAX_RAYS  // 6000个实例
);
Draw Call优化：6000个球体 → 1次Draw Call

内存效率：共享几何体和材质数据

动态更新：每帧更新实例变换矩阵

4. 射线检测系统
射线生成：从球面随机点发射指向原点的射线

动画效果：射线起点随时间平滑旋转

结果处理：支持"首个交点"和"所有交点"两种检测模式

可视化反馈：命中显示红线+交点球体，未命中显示灰线

5. 性能监控系统
Stats.js集成：实时显示FPS、渲染时间

动态性能对比：通过GUI切换可直观对比BVH效果

资源管理：提供disposeBoundsTree方法防止内存泄漏

6. 用户交互系统
OrbitControls：鼠标拖拽、缩放、旋转相机

lil-gui控制面板：

射线数量：1-3000条实时调整

检测模式：首个交点/所有交点

BVH开关：实时启用/禁用优化

辅助线显示：BVH结构可视化

7. 可视化层次
text
第1层：模型本身 - 斯坦福兔子
第2层：射线系统 - 起点球体 + 路径线段
第3层：碰撞反馈 - 交点球体（红色）
第4层：BVH结构 - 粉红色线框（可选显示）
⚡ 三、性能优化策略
1. 空间查询优化
BVH预计算：模型加载时一次性构建BVH树

射线筛选：先测试包围盒，快速排除无关区域

早期退出：找到首个交点后立即停止（当设置firstHitOnly时）

2. 渲染优化
实例化渲染：大量重复物体的高效绘制

动态绘制范围：只绘制活跃射线，避免空白渲染

深度写入控制：防止透明物体深度冲突

3. 内存管理
可重用变量：避免每帧创建新对象

缓冲区更新：标记更新区域，减少GPU数据传输

资源释放：提供显式的内存释放接口

📊 四、技术架构
模块依赖关系：
text
主应用
├── Three.js核心（渲染引擎）
├── three-mesh-bvh（BVH扩展库）
├── FBXLoader（模型加载）
├── OrbitControls（相机控制）
├── lil-gui（参数控制）
└── Stats.js（性能监控）
数据处理流程：
text
1. 加载模型 → 构建BVH树
2. 生成射线 → 计算起点/方向
3. BVH加速检测 → 获取交点
4. 更新可视化 → 球体+线段
5. 用户交互 → 实时参数调整
6. 循环渲染 → 60FPS动画
🎮 五、交互体验设计
1. 视觉反馈设计
颜色编码：射线灰色、交点深色、BVH粉红

透明度层次：半透明射线避免视觉混乱

动态更新：实时的位置和碰撞反馈

2. 控制逻辑
渐进式难度：默认150条射线，可逐步增加

实时对比：一键切换BVH效果

教育性：BVH辅助线帮助理解空间划分

3. 响应式设计
窗口自适应：相机和渲染器随窗口调整

性能自适应：射线数量可调，适应不同性能设备

交互适应性：鼠标、触摸板、滚轮全面支持

🔍 六、教育价值
这个演示不仅是技术展示，更是优秀的计算机图形学教学工具：

BVH概念可视化：抽象的空间数据结构变得直观可见

性能优化示范：展示算法优化如何带来数量级性能提升

3D编程实践：完整的Three.js应用开发范例

实时图形原理：射线检测、实例化渲染等核心概念

📈 七、扩展潜力
可能的增强功能：
更多检测模式：球体检测、锥形检测等

性能分析工具：显示BVH节省的具体计算量

多模型支持：对比不同复杂度模型的优化效果

移动端优化：触控交互和性能适配

导出功能：性能数据导出和分析

技术扩展方向：
WebGPU版本进一步提升性能

机器学习优化的空间划分

实时动态BVH更新（用于变形模型） -->


<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<title>Three.js 射线投射器 - BVH边界体积层次结构演示</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 {
				background-color: #eeeeee;
				color: #333;
			}

			a {
				color: #E91E63;
				text-decoration: underline;
			}
		</style>
	</head>

	<body>
		<!-- 页面信息栏：显示技术栈和项目信息 -->
		<div id="info">
			<a href="https://threejs.org" target="_blank" rel="noopener">Three.js</a> 射线投射器 - <a href="https://github.com/gkjohnson/three-mesh-bvh" target="_blank" rel="noopener">Three-Mesh-BVH扩展库</a><br/>
			此演示展示了使用边界体积层次结构(BVH)进行高性能空间查询的效果。<br/>
			模型：斯坦福兔子模型 | 功能：实时射线检测与可视化<br/>
			查看 <a href="https://github.com/gkjohnson/three-mesh-bvh" target="_blank" rel="noopener">主项目仓库</a> 获取更多信息和示例。
		</div>

		<!-- 导入映射配置：定义JavaScript模块的路径别名 -->
		<script type="importmap">
			{
				"imports": {
					"three": "../build/three.module.js",
					"three/addons/": "./jsm/",
					"three-mesh-bvh": "https://unpkg.com/three-mesh-bvh@0.7.3/build/index.module.js"
				}
			}
		</script>

		<script type="module">
			// ========== 模块导入区 ==========
			// 导入Three.js核心库的所有功能
			import * as THREE from 'three';
			
			// 从three-mesh-bvh库导入BVH相关功能：
			// computeBoundsTree: 计算网格的边界体积层次结构
			// disposeBoundsTree: 释放BVH占用的内存
			// acceleratedRaycast: 使用BVH加速的射线投射方法
			// MeshBVHHelper: 可视化BVH结构的辅助工具
			import { computeBoundsTree, disposeBoundsTree, acceleratedRaycast, MeshBVHHelper } from 'three-mesh-bvh';
			
			// 导入性能统计器，用于监控帧率等性能指标
			import Stats from 'three/addons/libs/stats.module.js';
			
			// 导入FBX模型加载器，用于加载斯坦福兔子模型
			import { FBXLoader } from 'three/addons/loaders/FBXLoader.js';
			
			// 导入轨道控制器，允许用户用鼠标拖拽、缩放来操控相机
			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
			
			// 导入轻量级GUI库，用于创建参数控制面板
			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';

			// ========== BVH功能扩展 ==========
			// 将BVH相关方法扩展到Three.js的原型中，使其可以像原生方法一样调用
			
			// 为所有BufferGeometry对象添加computeBoundsTree方法
			// 此方法会为几何体计算BVH树，显著加速射线检测等空间查询
			THREE.BufferGeometry.prototype.computeBoundsTree = computeBoundsTree;
			
			// 为所有BufferGeometry对象添加disposeBoundsTree方法
			// 当不再需要BVH时调用此方法释放内存，防止内存泄漏
			THREE.BufferGeometry.prototype.disposeBoundsTree = disposeBoundsTree;
			
			// 替换所有Mesh对象的raycast方法为加速版本
			// 新的raycast方法会利用BVH树进行优化，减少不必要的三角形相交测试
			THREE.Mesh.prototype.raycast = acceleratedRaycast;

			// ========== 全局变量声明 ==========
			let stats;            // 性能统计器实例，显示FPS、帧时间等
			let camera;          // 相机对象：定义观察场景的视角
			let scene;           // 场景对象：包含所有3D对象的容器
			let renderer;        // 渲染器对象：负责将3D场景绘制到2D画布上
			let mesh;            // 斯坦福兔子网格对象
			let helper;          // BVH辅助线可视化对象
			let bvh;             // BVH数据结构引用，存储计算好的边界体积层次
			let sphereInstance;  // 实例化球体网格：用于高效渲染大量射线起点和交点
			let lineSegments;    // 线段对象：用于可视化射线路径

			// ========== 可重用变量（避免在动画循环中重复创建对象） ==========
			const _raycaster = new THREE.Raycaster();  // 射线投射器对象，用于执行射线与几何体的相交测试
			const _position = new THREE.Vector3();     // 可重用的三维位置向量，用于临时存储位置信息
			const _quaternion = new THREE.Quaternion(); // 可重用的四元数，表示旋转
			const _scale = new THREE.Vector3(1, 1, 1); // 可重用的缩放向量，默认无缩放
			const _matrix = new THREE.Matrix4();       // 可重用的4x4变换矩阵，用于组合位置、旋转和缩放
			const _axis = new THREE.Vector3();         // 可重用的轴向量，用于旋转计算
			const MAX_RAYS = 3000;                     // 系统中支持的最大射线数量上限
			const RAY_COLOR = 0x444444;                // 射线和交点的可视化颜色（深灰色）

			// ========== 用户可调参数 ==========
			const params = {
				count: 150,           // 当前活动的射线数量（范围：1到MAX_RAYS）
				firstHitOnly: true,   // 布尔值：true表示每条射线只检测第一个交点，false检测所有交点
				useBVH: true,         // 布尔值：true启用BVH加速，false使用原生射线检测（性能对比）

				displayHelper: false, // 布尔值：是否显示BVH结构的辅助线框
				helperDepth: 10,      // 数值：BVH辅助线显示的深度级别（控制细节程度）
			};

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

			// ========== 初始化函数：设置整个3D场景 ==========
			function init() {
				// ========== 第一部分：创建3D环境 ==========
				
				// 创建透视相机：
				// 参数1: 视野角度(FOV) - 50度，控制可见范围
				// 参数2: 宽高比 - 根据浏览器窗口尺寸计算
				// 参数3: 近裁剪面 - 距离相机1单位以内的物体不显示
				// 参数4: 远裁剪面 - 距离相机100单位以外的物体不显示
				camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 100);
				camera.position.z = 10;  // 将相机沿Z轴向后移动10个单位，确保能看到整个场景
				
				// 创建场景对象，作为所有3D对象的容器
				scene = new THREE.Scene();
				scene.background = new THREE.Color(0xeeeeee);  // 设置场景背景色为浅灰色
				
				// 添加半球光（环境光）：
				// 模拟自然光照，天空颜色为白色，地面颜色为浅灰色，强度为3
				// 半球光比普通环境光更真实，能产生柔和的阴影过渡
				const ambient = new THREE.HemisphereLight(0xffffff, 0x999999, 3);
				scene.add(ambient);

				// ========== 第二部分：配置渲染器 ==========
				
				// 创建WebGL渲染器，启用抗锯齿以获得更平滑的边缘
				renderer = new THREE.WebGLRenderer({ antialias: true });
				// 设置设备像素比，适配高清屏幕（如Retina显示器）
				renderer.setPixelRatio(window.devicePixelRatio);
				// 设置渲染器尺寸与浏览器窗口一致
				renderer.setSize(window.innerWidth, window.innerHeight);
				// 设置动画循环回调函数，每帧自动调用animate函数
				renderer.setAnimationLoop(animate);
				// 将渲染器的canvas元素添加到网页body中
				document.body.appendChild(renderer.domElement);

				// ========== 第三部分：性能监控 ==========
				
				// 创建Stats.js性能统计器实例
				stats = new Stats();
				// 将统计器面板添加到页面右下角
				document.body.appendChild(stats.dom);

				// ========== 第四部分：创建射线可视化元素 ==========
				
				// 创建线段几何体，用于可视化射线路径：
				// 每条射线需要2个点（起点和终点），每个点有3个坐标值（x,y,z）
				// MAX_RAYS * 2 * 3 = 3000 * 2 * 3 = 18000个浮点数
				const lineGeometry = new THREE.BufferGeometry();
				lineGeometry.setAttribute('position', new THREE.BufferAttribute(new Float32Array(MAX_RAYS * 2 * 3), 3));
				
				// 创建线段对象，使用基础线材质：
				// color: 设置线段颜色为深灰色
				// transparent: 启用透明度
				// opacity: 设置透明度为0.25（25%不透明），使多条射线叠加时不会完全遮挡
				// depthWrite: 禁用深度写入，防止线段之间的深度冲突和闪烁
				lineSegments = new THREE.LineSegments(lineGeometry, new THREE.LineBasicMaterial({
					color: RAY_COLOR,
					transparent: true,
					opacity: 0.25,
					depthWrite: false
				}));
				
				// 创建实例化球体网格，用于高效渲染大量球体：
				// 实例化渲染的优势：相同的几何体和材质，通过变换矩阵区分每个实例
				// 相比单独创建3000个球体，实例化大幅减少Draw Call和内存使用
				sphereInstance = new THREE.InstancedMesh(
					new THREE.SphereGeometry(),  // 基础球体几何体（默认半径1，细分16）
					new THREE.MeshBasicMaterial({ color: RAY_COLOR }),  // 基础材质，不受光照影响
					2 * MAX_RAYS  // 实例总数：每条射线需要2个球体（起点球体+交点球体）
				);
				// 设置实例矩阵为动态绘制使用，因为我们需要在每帧更新这些矩阵
				sphereInstance.instanceMatrix.setUsage(THREE.DynamicDrawUsage);
				// 初始显示0个实例（等待射线数据更新）
				sphereInstance.count = 0;
				
				// 将可视化元素添加到场景中
				scene.add(sphereInstance, lineSegments);

				// ========== 第五部分：加载3D模型 ==========
				
				// 创建FBX加载器实例
				const loader = new FBXLoader();
				// 异步加载斯坦福兔子模型文件
				loader.load('models/fbx/stanford-bunny.fbx', object => {
					// 加载完成回调函数，参数object是加载的3D对象组
					mesh = object.children[0];  // 获取组中的第一个子对象（兔子网格）
					
					const geometry = mesh.geometry;  // 获取网格的几何体数据
					// 调整几何体位置：沿Y轴向上移动，使兔子站在原点平面
					geometry.translate(0, 0.5 / 0.0075, 0);
					// 为几何体计算BVH（边界体积层次结构）
					// 这个过程将几何体划分为层次化的包围盒，加速空间查询
					geometry.computeBoundsTree();
					// 保存BVH的引用，以便后续可以启用/禁用
					bvh = geometry.boundsTree;
					
					// 根据用户设置决定是否使用BVH加速
					if (!params.useBVH) {
						// 如果用户禁用了BVH，将boundsTree设为null
						// THREE.Mesh会回退到原生的射线检测方法
						geometry.boundsTree = null;
					}
					
					// 将兔子网格添加到场景中
					scene.add(mesh);
					// 将模型缩小到合适大小（原始斯坦福兔子模型单位较大）
					mesh.scale.setScalar(0.0075);
					
					// 创建BVH辅助线可视化对象
					// 这个辅助对象会显示BVH的层次结构，帮助理解空间划分
					helper = new MeshBVHHelper(mesh);
					helper.color.set(0xE91E63);  // 设置辅助线颜色为粉红色
					scene.add(helper);  // 将辅助线添加到场景
				});

				// ========== 第六部分：用户交互控制 ==========
				
				// 创建轨道控制器，允许用户：
				// - 左键拖拽：旋转相机
				// - 右键拖拽：平移相机
				// - 滚轮：缩放视图
				const controls = new OrbitControls(camera, renderer.domElement);
				controls.minDistance = 5;   // 最小缩放距离：相机不能比5单位更近
				controls.maxDistance = 75;  // 最大缩放距离：相机不能比75单位更远

				// ========== 第七部分：创建GUI控制面板 ==========
				
				// 创建GUI实例
				const gui = new GUI();
				
				// 创建"射线检测"参数文件夹
				const rayFolder = gui.addFolder('射线检测设置');
				// 添加射线数量滑块控件：
				// 参数1: 绑定到params.count属性
				// 参数2: 最小值1
				// 参数3: 最大值MAX_RAYS(3000)
				// 参数4: 步长1（整数变化）
				rayFolder.add(params, 'count', 1, MAX_RAYS, 1);
				// 添加"只检测首个交点"复选框
				rayFolder.add(params, 'firstHitOnly');
				// 添加"启用BVH加速"复选框，并绑定变更事件
				rayFolder.add(params, 'useBVH').onChange(v => {
					// 当复选框状态改变时，更新网格的BVH设置
					if (mesh) {
						mesh.geometry.boundsTree = v ? bvh : null;
					}
				});
				
				// 创建"BVH辅助线"参数文件夹
				const helperFolder = gui.addFolder('BVH可视化');
				// 添加"显示辅助线"复选框
				helperFolder.add(params, 'displayHelper');
				// 添加"辅助线深度"滑块，并绑定变更事件
				helperFolder.add(params, 'helperDepth', 1, 20, 1).onChange(v => {
					// 当深度值改变时，更新辅助线显示深度
					if (helper) {
						helper.depth = v;  // 设置显示的BVH深度级别
						helper.update();   // 更新辅助线几何体
					}
				});

				// ========== 第八部分：窗口事件监听 ==========
				
				// 监听浏览器窗口大小变化事件
				window.addEventListener('resize', onWindowResize);
				// 初始调用一次，确保正确设置相机和渲染器
				onWindowResize();

				// ========== 第九部分：初始化射线位置 ==========
				
				// 随机初始化所有射线起点的位置
				initRays();
			}

			// ========== 初始化射线起点位置函数 ==========
			function initRays() {
				// 创建局部临时变量（避免使用全局可重用变量，防止冲突）
				const position = new THREE.Vector3();
				const quaternion = new THREE.Quaternion();
				const scale = new THREE.Vector3(1, 1, 1);
				const matrix = new THREE.Matrix4();
				
				// 为每个实例化球体设置初始位置
				for (let i = 0; i < MAX_RAYS * 2; i++) {
					// 在半径为3.75的球面上生成随机方向向量
					position.randomDirection().multiplyScalar(3.75);
					// 组合变换矩阵：位置 + 旋转 + 缩放
					matrix.compose(position, quaternion, scale);
					// 为第i个实例设置变换矩阵
					sphereInstance.setMatrixAt(i, matrix);
				}
			}

			// ========== 更新射线位置和检测结果函数 ==========
			// 此函数在每帧渲染前调用，更新射线状态和可视化
			function updateRays() {
				// 如果模型尚未加载完成，直接返回
				if (!mesh) return;
				
				// 根据用户设置配置射线投射器
				_raycaster.firstHitOnly = params.firstHitOnly;
				// 获取当前需要显示和检测的射线数量
				const rayCount = params.count;
				
				// 线段计数器：记录实际需要绘制的线段数量
				let lineNum = 0;
				
				// 遍历每条射线
				for (let i = 0; i < rayCount; i++) {
					// ===== 步骤1：获取并更新射线起点位置 =====
					
					// 从实例化网格获取第i条射线的起点球体变换矩阵
					// 注意：i*2是因为每条射线占用2个实例（起点+交点）
					sphereInstance.getMatrixAt(i * 2, _matrix);
					// 分解矩阵，获取位置、旋转和缩放分量
					_matrix.decompose(_position, _quaternion, _scale);
					
					// 为起点位置添加旋转动画效果：
					// 基于当前时间计算一个偏移量，使动画随时间变化
					const offset = 1e-4 * window.performance.now();
					// 创建旋转轴向量，使用正弦余弦函数产生平滑变化
					_axis.set(
						Math.sin(i * 100 + offset),    // 高频变化分量
						Math.cos(-i * 10 + offset),    // 中频变化分量
						Math.sin(i * 1 + offset),      // 低频变化分量
					).normalize();  // 归一化，确保是单位向量
					// 将起点位置围绕计算出的轴旋转一个微小角度（0.001弧度）
					_position.applyAxisAngle(_axis, 0.001);
					
					// 更新起点球体的显示：
					// 设置起点球体的缩放（大小）
					_scale.setScalar(0.02);
					// 重新组合变换矩阵
					_matrix.compose(_position, _quaternion, _scale);
					// 更新实例化网格中的对应实例
					sphereInstance.setMatrixAt(i * 2, _matrix);
					
					// ===== 步骤2：执行射线检测 =====
					
					// 设置射线起点为球体位置
					_raycaster.ray.origin.copy(_position);
					// 设置射线方向：从当前位置指向原点(0,0,0)
					// multiplyScalar(-1)：反转向量方向（指向原点）
					// normalize()：归一化为单位向量
					_raycaster.ray.direction.copy(_position).multiplyScalar(-1).normalize();
					
					// 执行射线与兔子模型的相交检测
					// intersectObject方法返回交点数组，根据firstHitOnly设置可能包含1个或多个交点
					const hits = _raycaster.intersectObject(mesh);
					
					// ===== 步骤3：更新检测结果可视化 =====
					if (hits.length !== 0) {
						// 情况A：射线击中了模型
						const hit = hits[0];  // 获取第一个交点（即使检测所有交点，也只可视化第一个）
						const point = hit.point;  // 交点的三维坐标
						
						// 在交点位置显示球体（比起点球体小）
						_scale.setScalar(0.01);  // 交点球体大小为0.01
						_matrix.compose(point, _quaternion, _scale);
						sphereInstance.setMatrixAt(i * 2 + 1, _matrix);  // 注意：i*2+1是交点实例
						
						// 添加线段可视化：从起点到交点
						// setXYZ(索引, x, y, z)：设置线段几何体的顶点位置
						lineSegments.geometry.attributes.position.setXYZ(lineNum++, _position.x, _position.y, _position.z);
						lineSegments.geometry.attributes.position.setXYZ(lineNum++, point.x, point.y, point.z);
					} else {
						// 情况B：射线未击中模型
						// 将交点球体放在起点位置（实际上不显示，因为与起点重叠）
						sphereInstance.setMatrixAt(i * 2 + 1, _matrix);
						// 添加线段可视化：从起点到原点（表示射线继续飞行但未命中）
						lineSegments.geometry.attributes.position.setXYZ(lineNum++, _position.x, _position.y, _position.z);
						lineSegments.geometry.attributes.position.setXYZ(lineNum++, 0, 0, 0);
					}
				}
				
				// ===== 步骤4：更新实例化网格和线段几何体 =====
				
				// 更新实例化网格的可见实例数量
				sphereInstance.count = rayCount * 2;  // 每条射线2个球体
				sphereInstance.instanceMatrix.needsUpdate = true;  // 标记实例矩阵需要更新
				
				// 更新线段几何体的绘制范围
				// setDrawRange(起始索引, 顶点数量)：只绘制实际有数据的部分
				lineSegments.geometry.setDrawRange(0, lineNum);
				lineSegments.geometry.attributes.position.needsUpdate = true;  // 标记顶点数据需要更新
			}

			// ========== 窗口大小调整处理函数 ==========
			function onWindowResize() {
				// 更新相机的宽高比，匹配新的窗口尺寸
				camera.aspect = window.innerWidth / window.innerHeight;
				// 必须调用updateProjectionMatrix()使新的宽高比生效
				camera.updateProjectionMatrix();
				
				// 更新渲染器尺寸，使其填满整个窗口
				renderer.setSize(window.innerWidth, window.innerHeight);
			}

			// ========== 动画循环函数 ==========
			// 此函数被设置为渲染器的动画循环回调，每帧自动调用
			function animate() {
				render();      // 渲染当前帧
				stats.update(); // 更新性能统计器显示
			}

			// ========== 渲染函数 ==========
			function render() {
				// 根据用户设置控制BVH辅助线的显示/隐藏
				if (helper) {
					helper.visible = params.displayHelper;
				}

				// 为兔子模型添加旋转动画
				if (mesh) {
					mesh.rotation.y += 0.002;  // 每帧绕Y轴旋转0.002弧度
					mesh.updateMatrixWorld();  // 更新模型的世界变换矩阵
				}

				// 更新射线位置并执行新的检测
				updateRays();

				// 执行渲染：将3D场景从相机视角绘制到2D画布上
				renderer.render(scene, camera);
			}
		</script>
	</body>
</html>