<!-- Three.js 医学CT切片查看器 - 功能描述与技术分析
一、项目功能概述
1.1 核心功能
这是一个基于Web的医学影像可视化工具，专门用于展示和处理头部CT扫描数据。主要功能包括：

📊 数据可视化
切片浏览：自动循环播放109张头部CT扫描切片（轴向视图）

实时渲染：在WebGL画布中高质量渲染医学影像

自适应显示：根据窗口大小自动调整渲染尺寸

🎮 用户交互
自动播放：切片自动切换，模拟"翻阅"CT图像的过程

边界反弹：到达第一张或最后一张切片时自动反向播放

响应式设计：适应不同屏幕尺寸的设备

⚙️ 数据处理
压缩数据加载：从ZIP文件中加载原始CT数据

数据解析：将二进制数据转换为纹理数组

格式转换：单通道灰度数据转换为RGB显示

1.2 医学数据规格
分辨率：256像素 × 256像素 × 109切片

数据格式：8位无符号整数（0-255灰度值）

数据来源：真实头部CT扫描数据

文件大小：原始约7MB（256×256×109字节），压缩后更小

二、主要技术架构
2.1 前端技术栈
text
Three.js (WebGL 2.0) + GLSL着色器 + ES6模块 + 现代浏览器API
2.2 核心组件详解
🔧 1. Three.js 渲染引擎
javascript
// 三大核心对象
const renderer = new THREE.WebGLRenderer();  // 渲染器
const camera = new THREE.PerspectiveCamera(); // 透视相机
const scene = new THREE.Scene();             // 场景容器

// 数据加载器
const loader = new THREE.FileLoader();
🎨 2. WebGL 2.0 关键技术
2D纹理数组：核心特性，WebGL 1.0不支持

顶点着色器：处理几何变换和UV坐标

片段着色器：处理像素颜色和纹理采样

统一变量：CPU到GPU的数据传递通道

📦 3. 数据处理流水线
text
ZIP压缩文件 → ArrayBuffer解压 → Uint8Array数据 → 
DataArrayTexture纹理 → GPU显存 → 着色器处理 → 屏幕显示
三、核心技术点详解
3.1 2D纹理数组技术
💡 技术原理
javascript
// 传统方法：109个独立纹理
const textures = [];
for(let i=0; i<109; i++) {
    textures.push(new THREE.Texture());
}

// 2D纹理数组方法：单个纹理包含所有切片
const textureArray = new THREE.DataArrayTexture(data, 256, 256, 109);
🚀 性能优势
减少Draw Calls：从109次减少到1次

降低状态切换：无需在切片间切换纹理绑定

内存访问优化：连续内存布局，提高缓存命中率

着色器简化：通过索引直接访问任意切片

🔍 实现细节
glsl
// GLSL中访问纹理数组
uniform sampler2DArray diffuse;  // 声明纹理数组采样器
uniform int depth;                // 切片索引

// 采样特定切片
vec4 color = texture(diffuse, vec3(vUv, depth));
3.2 着色器编程技术
📐 顶点着色器功能
glsl
// 1. 坐标变换流水线
局部坐标 → 世界坐标 → 视图坐标 → 裁剪坐标 → 屏幕坐标

// 2. UV坐标计算
position.xy / size + 0.5          // 归一化到[0,1]范围
1.0 - vUv.y                       // Y轴翻转（坐标系转换）
🎨 片段着色器功能
glsl
// 1. 纹理采样
texture(sampler2DArray, vec3(uv, layer))

// 2. 颜色处理
color.rrr                        // 单通道转RGB
* 1.5                            // 亮度增强
3.3 数据加载与处理
🔄 异步加载流程
javascript
// 1. 二进制数据加载
FileLoader.setResponseType('arraybuffer')

// 2. ZIP解压（客户端解压减少服务器压力）
const zip = unzipSync(new Uint8Array(data))

// 3. 纹理创建（GPU上传）
const texture = new THREE.DataArrayTexture(array, 256, 256, 109)
💾 内存管理策略
惰性加载：数据加载完成前不创建网格

资源复用：单个纹理对象存储所有数据

自动清理：Three.js内置垃圾回收

3.4 动画与渲染系统
🎬 动画循环机制
javascript
// 现代API：setAnimationLoop（替代requestAnimationFrame）
renderer.setAnimationLoop(animate)

// 动画逻辑：切片索引更新
depth += depthStep

// 边界检测与反弹
if (depth > 109.0) depth = 109.0 * 2.0 - depth
⚡ 性能优化策略
静态几何体：平面创建后不再修改

最少Uniform更新：每帧只更新depth值

设备像素比适配：高DPI屏幕清晰渲染

GPU并行计算：所有像素独立处理

四、技术难点与解决方案
4.1 技术挑战
挑战1：大数据量处理
问题：109张256×256图像 ≈ 7MB原始数据

方案：ZIP压缩 + 流式加载 + GPU纹理压缩

挑战2：跨浏览器兼容
问题：WebGL 2.0支持度差异

方案：功能检测 + 优雅降级（可扩展）

挑战3：医学数据准确性
问题：保持原始数据精度

方案：8位无损存储 + 线性插值采样

4.2 创新实现
✨ 坐标系统转换
glsl
// 医学影像坐标系（左上角原点）↔ WebGL坐标系（左下角原点）
vUv.y = 1.0 - vUv.y
✨ 平滑切片过渡
glsl
// 浮点数索引支持亚像素过渡
// GLSL自动处理浮点到整数的纹理采样
texture(diffuse, vec3(vUv, 54.3))
✨ 响应式显示系统
javascript
// 窗口大小变化时的完整更新链
window resize → camera aspect update → 
projection matrix update → renderer resize
五、应用场景与扩展性
5.1 医学应用领域
医学教育：解剖结构教学

临床辅助：病例讨论与展示

科研分析：影像数据处理

5.2 技术扩展方向
🔄 功能扩展
javascript
// 1. 交互控制
键盘控制、鼠标滚轮、触摸滑动

// 2. 图像处理
窗宽窗位调整、对比度增强、边缘检测

// 3. 多视图显示
三视图（轴向、冠状、矢状）同步
🚀 性能扩展
javascript
// 1. 体绘制支持
光线投射算法、等值面提取

// 2. WebGPU迁移
下一代图形API，更高性能

// 3. 服务端渲染
大数据预处理，减少客户端负担
5.3 教育意义
WebGL教学：纹理数组的实践案例

医学可视化：DICOM数据的Web展示

性能优化：大数据量Web应用优化策略

六、总结：项目技术亮点
🌟 核心创新点
Web端完整医学影像解决方案

2D纹理数组的高效应用

零插件纯Web技术实现

响应式跨平台支持

🏆 技术成就
数据压缩比：ZIP压缩显著减少传输大小

渲染性能：60Fps稳定播放109张切片

代码简洁性：<300行代码实现完整功能

可扩展性：模块化设计便于功能扩展

🔮 未来展望
这个项目展示了现代Web技术在专业领域的强大能力，为以下方向奠定基础：

远程医疗：浏览器直接查看医学影像

AI辅助诊断：集成机器学习模型

VR/AR医疗：三维医学可视化

医学协作平台：多用户同时查看和标注

七、快速上手指南
7.1 环境要求
bash
# 浏览器要求
- Chrome 56+ / Firefox 51+ / Safari 15+
- WebGL 2.0 支持
- JavaScript ES6 支持

# 开发环境
- 本地Web服务器（避免CORS问题）
- Three.js r128+ 版本
7.2 运行步骤
放置数据文件：textures/3d/head256x256x109.zip

启动本地服务器

打开浏览器访问

观察自动播放的CT切片

7.3 调试建议
javascript
// 1. 添加性能监控
console.time('textureLoad')
// ... 加载代码 ...
console.timeEnd('textureLoad')

// 2. WebGL上下文调试
const gl = renderer.getContext()
gl.getParameter(gl.MAX_TEXTURE_SIZE) // 检查纹理大小限制 -->


<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<!-- 页面元信息 -->
		<title>Three.js WebGL - 2D纹理数组医学影像可视化</title>
		<!-- 字符编码设置为UTF-8以支持中文 -->
		<meta charset="UTF-8">
		<!-- 
			视口设置：
			- width=device-width: 宽度等于设备宽度
			- user-scalable=no: 禁止用户缩放（为保持3D渲染稳定性）
			- minimum-scale=1.0, maximum-scale=1.0: 固定缩放比例为1.0
		-->
		<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">
	</head>
	
	<!-- 
		顶点着色器 (Vertex Shader)：
		作用：处理每个顶点的位置和属性，计算最终在屏幕上的位置
		类型：x-shader/x-vertex 是GLSL着色器的MIME类型标识
	-->
	<script id="vs" type="x-shader/x-vertex">
	// 统一变量：从JavaScript传递到着色器的常量值
	uniform vec2 size;        // 平面网格的物理尺寸（单位：Three.js单位）
	
	// 输出变量：从顶点着色器传递到片段着色器的数据
	out vec2 vUv;             // 输出的纹理坐标，用于片段着色器采样纹理

	void main() {
		// 模型-视图-投影矩阵变换链：
		// 1. position: 模型的局部坐标（来自几何体顶点数据）
		// 2. modelViewMatrix: 将局部坐标转换为相机视角坐标
		// 3. projectionMatrix: 将3D相机坐标投影到2D屏幕坐标
		// 4. gl_Position: 内置变量，存储最终的裁剪空间坐标
		gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );

		// ========== 纹理坐标计算流程 ==========
		// 目标：将平面网格的顶点位置转换为0.0到1.0范围的UV坐标
		
		// 第一步：将顶点坐标从[-size/2, +size/2]范围转换到[-0.5, +0.5]范围
		// 因为PlaneGeometry默认创建的是中心在原点的平面
		// position.xy / size 得到的是相对于平面中心的归一化坐标
		
		// 第二步：将[-0.5, +0.5]范围转换到[0.0, 1.0]范围
		// +0.5 操作将坐标平移到正数范围
		vUv.xy = position.xy / size + 0.5;
		
		// 第三步：翻转Y轴坐标
		// 原因：图像数据的坐标系（左上角为原点）与WebGL坐标系（左下角为原点）不同
		// 原始CT数据通常是左上角为(0,0)，而WebGL纹理采样期望左下角为(0,0)
		vUv.y = 1.0 - vUv.y; // 将Y坐标上下翻转
	}
	</script>

	<!-- 
		片段着色器 (Fragment Shader)：
		作用：处理每个像素的颜色，计算最终输出到屏幕的颜色
		类型：x-shader/x-fragment 是GLSL着色器的MIME类型标识
	-->
	<script id="fs" type="x-shader/x-fragment">
	// ========== 精度限定符 ==========
	// 指定计算中使用的精度，影响性能和数值范围
	precision highp float;    // 高精度浮点数（32位），用于颜色计算
	precision highp int;      // 高精度整数，用于纹理数组索引
	precision highp sampler2DArray; // 高精度2D纹理数组采样器
	
	// ========== 统一变量声明 ==========
	uniform sampler2DArray diffuse;  // 2D纹理数组采样器，存储所有CT切片
	in vec2 vUv;                     // 从顶点着色器传入的插值后的纹理坐标
	uniform int depth;               // 当前要显示的切片深度索引（0-108）
	
	// ========== 输出变量 ==========
	out vec4 outColor;               // 输出到帧缓冲区的最终颜色值

	void main() {
		// ========== 纹理采样 ==========
		// texture() 函数：从纹理中采样颜色
		// 参数1：sampler2DArray - 2D纹理数组采样器
		// 参数2：vec3(vUv, depth) - 采样坐标
		//   - vUv.xy: 在单个切片内的2D纹理坐标（0.0-1.0）
		//   - depth: 浮点数表示的切片索引，但实际使用时会转换为整数层
		// 返回值：vec4(r, g, b, a)，但这里数据是单通道的，所以只有r通道有效
		vec4 color = texture( diffuse, vec3( vUv, depth ) );

		// ========== 颜色处理与输出 ==========
		// 医学CT数据通常是单通道灰度数据（存储在r通道）
		// color.rrr 创建vec3(color.r, color.r, color.r)，将灰度复制到RGB三通道
		// * 1.5：亮度增强，使图像更清晰可见（CT数据通常较暗）
		// vec4(..., 1.0)：alpha通道设为1.0（完全不透明）
		outColor = vec4( color.rrr * 1.5, 1.0 );
		
		// 注意：这里使用的是color.rrr而不是color.rgb，因为：
		// 1. 原始数据是单通道（format = THREE.RedFormat）
		// 2. 纹理的r通道存储了CT密度值
		// 3. 复制到RGB三通道产生灰度图像
	}
	</script>
	
	<body>
		<!-- 
			信息显示区域 
			id="info" 用于CSS样式定位和JavaScript操作
		-->
		<div id="info">
			<!-- 项目标题和链接 -->
			<a href="https://threejs.org" target="_blank" rel="noopener">Three.js</a> - 2D纹理数组医学影像可视化<br />
			
			<!-- 数据来源信息 -->
			头部CT扫描数据来源：
			<a href="https://www.codeproject.com/Articles/352270/Getting-started-with-Volume-Rendering" target="_blank" rel="noopener">
				Divine Augustine的医学影像研究项目
			</a><br />
			
			<!-- 许可证信息 -->
			数据使用许可证：
			<a href="https://www.codeproject.com/info/cpol10.aspx" target="_blank" rel="noopener">
				Code Project Open License (CPOL)
			</a><br /><br />
			
		</div>

		<!-- 
			模块导入映射表 (Import Map)
			作用：定义JavaScript模块的导入别名，简化导入路径
			注意：这是现代浏览器支持的ES模块特性
		-->
		<script type="importmap">
			{
				"imports": {
					"three": "../build/three.module.js",
					
					"three/addons/": "./jsm/"
				}
			}
		</script>

		<!-- 
			主JavaScript模块
			type="module" 表示这是一个ES6模块，支持import/export语法
		-->
		<script type="module">
			// ========== 模块导入部分 ==========
			
			// 导入Three.js核心库的所有功能
			// * as THREE 表示将所有导出内容打包到THREE对象中
			import * as THREE from 'three';
			
			// 导入性能监视器（FPS帧率显示）
			// Stats是一个小型库，用于显示WebGL渲染性能
			import Stats from 'three/addons/libs/stats.module.js';
			
			// 导入解压缩工具
			// fflate是一个快速的ZIP解压库，用于解压CT数据
			import { unzipSync } from 'three/addons/libs/fflate.module.js';

			// ========== 全局变量声明 ==========
			
			// Three.js核心对象
			let camera;     // 相机：决定观察3D场景的视角
			let scene;      // 场景：所有3D对象的容器
			let mesh;       // 网格：几何体+材质的组合，这里显示CT切片
			let renderer;   // 渲染器：负责将3D场景绘制到2D画布
			let stats;      // 性能统计对象
			
			// 平面几何体尺寸（Three.js单位，不是像素）
			// 这些值决定了平面在3D空间中的大小
			const planeWidth = 50;      // 平面宽度
			const planeHeight = 50;     // 平面高度
			
			// 深度变化步长（控制切片切换速度）
			// 正值：从头部向脚部切换切片
			// 负值：从脚部向头部切换切片
			let depthStep = 0.4;        // 每帧深度变化量

			// ========== 初始化函数调用 ==========
			// 页面加载完成后开始初始化
			init();

			// ========== 初始化函数定义 ==========
			function init() {
				// 第一步：创建页面容器
				// 创建div元素作为Three.js渲染的容器
				const container = document.createElement( 'div' );
				// 将容器添加到body中
				document.body.appendChild( container );

				// 第二步：创建透视相机
				// PerspectiveCamera参数说明：
				// 1. 45: 视野角度(FOV)，单位度，越大看到的场景越广
				// 2. window.innerWidth/window.innerHeight: 宽高比，匹配窗口
				// 3. 0.1: 近裁剪面，比这个距离近的物体不显示
				// 4. 2000: 远裁剪面，比这个距离远的物体不显示
				camera = new THREE.PerspectiveCamera( 
					45, 
					window.innerWidth / window.innerHeight, 
					0.1, 
					2000 
				);
				// 设置相机位置：沿Z轴正方向移动70个单位
				// 这使相机在场景前方，看向原点(0,0,0)
				camera.position.z = 70;

				// 第三步：创建场景
				// 场景是所有3D对象（网格、灯光、相机等）的容器
				scene = new THREE.Scene();

				// 第四步：加载和显示CT数据
				// 使用Three.js的FileLoader加载ZIP压缩的CT数据
				new THREE.FileLoader()
					// 设置响应类型为arraybuffer（二进制数据）
					.setResponseType( 'arraybuffer' )
					// 加载ZIP文件，加载完成后执行回调函数
					.load( 
						'textures/3d/head256x256x109.zip',  // 数据文件路径
						function ( data ) {  // 成功回调函数，data是加载的二进制数据
							// 解压缩ZIP文件
							// 1. new Uint8Array(data): 将ArrayBuffer转换为Uint8Array
							// 2. unzipSync(): 同步解压缩，返回包含文件的字典
							const zip = unzipSync( new Uint8Array( data ) );
							
							// 获取特定文件的数据
							// zip['head256x256x109']: 根据文件名获取解压后的文件
							// .buffer: 获取文件的ArrayBuffer
							const array = new Uint8Array( zip[ 'head256x256x109' ].buffer );

							// 创建2D纹理数组 (DataArrayTexture)
							// 参数说明：
							// 1. array: 原始字节数据（109张256×256的图像）
							// 2. 256: 每张图像的宽度（像素）
							// 3. 256: 每张图像的高度（像素）
							// 4. 109: 图像数量（深度层数）
							const texture = new THREE.DataArrayTexture( array, 256, 256, 109 );
							// 设置纹理格式为单通道红色（医学CT数据通常是单通道灰度）
							texture.format = THREE.RedFormat;
							// 标记纹理需要更新到GPU
							texture.needsUpdate = true;

							// 创建自定义着色器材质
							// 使用ShaderMaterial而不是标准材质，以便完全控制渲染
							const material = new THREE.ShaderMaterial( {
								// 统一变量：从JavaScript传递到GLSL着色器的参数
								uniforms: {
									// 纹理数组
									diffuse: { value: texture },
									// 当前显示哪个切片（0-108之间的整数）
									depth: { value: 55 }, // 从中间切片开始
									// 平面尺寸，用于顶点着色器计算UV坐标
									size: { value: new THREE.Vector2( planeWidth, planeHeight ) }
								},
								// 顶点着色器源代码
								// 从HTML中的<script id="vs">元素获取
								vertexShader: document.getElementById( 'vs' ).textContent.trim(),
								// 片段着色器源代码
								// 从HTML中的<script id="fs">元素获取
								fragmentShader: document.getElementById( 'fs' ).textContent.trim(),
								// 指定GLSL版本为3.0
								// WebGL 2.0对应GLSL 3.0
								glslVersion: THREE.GLSL3
							} );

							// 创建平面几何体
							// 这个平面将显示选定的CT切片
							const geometry = new THREE.PlaneGeometry( planeWidth, planeHeight );

							// 创建网格对象（几何体 + 材质）
							mesh = new THREE.Mesh( geometry, material );
							
							// 将网格添加到场景中
							scene.add( mesh );
						},
						// 可选的：加载进度回调
						function ( xhr ) {
							console.log( (xhr.loaded / xhr.total * 100) + '% 已加载' );
						},
						// 可选的：加载错误回调
						function ( error ) {
							console.error( '加载CT数据时出错:', error );
						}
					);

				// 第五步：创建WebGL渲染器
				// 注意：2D纹理数组功能需要WebGL 2.0支持
				renderer = new THREE.WebGLRenderer( {
					// 可以在这里添加渲染器选项，例如：
					// antialias: true, // 开启抗锯齿（性能消耗较大）
					// alpha: true      // 开启透明背景
				} );
				
				// 设置设备像素比
				// 在高DPI屏幕（如Retina显示屏）上提供更清晰的渲染
				renderer.setPixelRatio( window.devicePixelRatio );
				
				// 设置渲染器尺寸为整个窗口大小
				renderer.setSize( window.innerWidth, window.innerHeight );
				
				// 设置动画循环
				// requestAnimationFrame的替代方案，Three.js推荐方式
				renderer.setAnimationLoop( animate );
				
				// 将渲染器的canvas元素（画布）添加到容器
				container.appendChild( renderer.domElement );

				// 第六步：初始化性能监视器
				// Stats用于显示帧率（FPS）和渲染时间
				stats = new Stats();
				// 默认显示FPS（每秒帧数）
				stats.showPanel( 0 ); // 0: FPS, 1: MS, 2: MB, 3+: 自定义
				container.appendChild( stats.dom );
				
				// 可以调整性能监视器的位置
				stats.dom.style.position = 'absolute';
				stats.dom.style.top = '0px';
				stats.dom.style.left = '0px';

				// 第七步：添加窗口大小变化事件监听
				// 当用户调整浏览器窗口大小时，更新相机和渲染器
				window.addEventListener( 'resize', onWindowResize );
				
				// 初始化完成提示
				console.log('Three.js CT切片查看器初始化完成');
				console.log('数据规格：256×256×109 8位单通道CT扫描数据');
			}

			// ========== 窗口大小变化处理函数 ==========
			function onWindowResize() {
				// 更新相机宽高比以匹配新窗口尺寸
				camera.aspect = window.innerWidth / window.innerHeight;
				
				// 必须调用此方法更新相机的投影矩阵
				// 如果不调用，渲染会使用旧的宽高比，导致图像拉伸
				camera.updateProjectionMatrix();
				
				// 更新渲染器尺寸
				renderer.setSize( window.innerWidth, window.innerHeight );
				
				// 可选：如果使用后期处理或自定义渲染目标，这里也需要更新
			}

			// ========== 动画循环函数 ==========
			// 这个函数每帧都会被调用（通常60次/秒）
			function animate() {
				// 如果网格已经加载（数据加载完成）
				if ( mesh ) {
					// 获取当前深度值（哪个CT切片正在显示）
					let value = mesh.material.uniforms[ 'depth' ].value;
					
					// 增加深度值，切换到下一个切片
					// value是浮点数，所以可以平滑过渡（虽然纹理数组需要整数索引）
					// GLSL的texture()函数会自动将浮点索引转换为最接近的整数
					value += depthStep;

					// ========== 边界检测和反弹逻辑 ==========
					// 防止切片索引超出有效范围（0-109）
					if ( value > 109.0 || value < 0.0 ) {
						// 情况1：超过最大值109（最后一层）
						if ( value > 1.0 ) {
							// 反弹公式：新值 = 2*最大值 - 当前值
							// 例如：如果value=110，则新值=218-110=108
							// 这会产生反弹效果，而不是直接跳回
							value = 109.0 * 2.0 - value;
						}
						
						// 情况2：低于最小值0（第一层）
						if ( value < 0.0 ) {
							// 取绝对值，产生反弹
							// 例如：如果value=-1，则新值=1
							value = - value;
						}
						
						// 反转步长方向
						// 当到达边界时，改变切片切换方向
						depthStep = - depthStep;
					}

					// 更新着色器中的深度值
					// 这会触发GPU重新渲染，显示新的CT切片
					mesh.material.uniforms[ 'depth' ].value = value;
					
					// 可选：可以在这里添加交互控制
					// 例如：根据鼠标位置控制depthStep
					// 或添加键盘控制（上下键切换切片）
				}

				// 渲染场景
				// 这是实际将3D场景绘制到2D画布的函数
				render();
				
				// 更新性能监视器
				// 更新FPS计数器和渲染时间显示
				stats.update();
				
				// 可选：可以在这里添加其他每帧需要更新的逻辑
				// 例如：相机动画、对象旋转、物理模拟等
			}

			// ========== 渲染函数 ==========
			// 实际执行渲染操作的函数
			function render() {
				// 使用指定的相机渲染整个场景
				// 参数1：scene - 要渲染的场景
				// 参数2：camera - 用于渲染的相机
				renderer.render( scene, camera );
				
				// 注意：这里没有使用requestAnimationFrame
				// 因为使用了renderer.setAnimationLoop(animate)
				// 这会自动处理动画循环
			}
			
			// ========== 可选：添加键盘控制 ==========
			// 可以添加键盘事件监听，让用户手动控制切片切换
			window.addEventListener('keydown', function(event) {
				if (mesh) {
					switch(event.key) {
						case 'ArrowUp':
							// 向上箭头：向头部方向切换（减小depth）
							mesh.material.uniforms['depth'].value -= 1;
							break;
						case 'ArrowDown':
							// 向下箭头：向脚部方向切换（增加depth）
							mesh.material.uniforms['depth'].value += 1;
							break;
						case ' ':
							// 空格键：暂停/继续自动播放
							depthStep = (depthStep === 0) ? 0.4 : 0;
							break;
						case 'r':
							// R键：重置到中间切片
							mesh.material.uniforms['depth'].value = 55;
							break;
					}
					// 确保深度值在有效范围内
					mesh.material.uniforms['depth'].value = Math.max(0, Math.min(108, 
						mesh.material.uniforms['depth'].value));
				}
			});
			
			// ========== 可选：添加鼠标滚轮控制 ==========
			// 允许用户使用鼠标滚轮切换切片
			window.addEventListener('wheel', function(event) {
				if (mesh && event.deltaY) {
					// 根据滚轮方向调整深度值
					// deltaY > 0：向下滚动，向脚部方向
					// deltaY < 0：向上滚动，向头部方向
					const delta = event.deltaY > 0 ? 1 : -1;
					let newDepth = mesh.material.uniforms['depth'].value + delta;
					
					// 限制在有效范围内
					newDepth = Math.max(0, Math.min(108, newDepth));
					mesh.material.uniforms['depth'].value = newDepth;
					
					// 阻止默认滚动行为
					event.preventDefault();
				}
			}, { passive: false });
		</script>
	</body>
</html>