<!-- Three.js 体积渲染系统 - 详细功能与技术分析
🎯 核心功能概述
这是一个基于WebGL的医学影像三维可视化系统，能够将二维医学扫描数据（如CT、MRI）重建为三维立体模型，支持实时交互和参数调节。

主要功能模块：
体积数据加载 - 加载NRRD格式的医学扫描数据

三维重建渲染 - 将体素数据转换为可视化模型

交互控制 - 支持旋转、缩放等视图操作

参数调节 - 实时调整渲染效果

多模式显示 - 提供不同渲染风格

🏗️ 系统架构与工作流程
text
用户交互 → 参数更新 → 着色器渲染 → 三维显示
    ↑           ↓           ↓          ↓
   GUI ←  uniform更新 ←  GPU计算 ← 相机控制
🔬 关键技术点详解
1. WebGL 2.0与Three.js框架
javascript
// 使用WebGL 2.0的3D纹理特性
const texture = new THREE.Data3DTexture(volume.data, xLen, yLen, zLen);
核心优势：利用硬件加速实现高性能体积渲染

Three.js作用：简化WebGL复杂API，提供高级抽象

渲染管线：完整的顶点→片段着色器处理流程

2. 体积渲染算法
两种核心算法实现：
a) MIP（Maximum Intensity Projection）最大密度投影

glsl
// 伪代码：沿射线取最大值
float maxVal = 0.0;
for (float t = 0.0; t < maxSteps; t += stepSize) {
    vec3 pos = startPos + rayDir * t;
    float val = texture(u_data, pos).r;
    maxVal = max(maxVal, val);
}
原理：沿着视线方向取体素强度的最大值

应用：血管造影、高密度结构显示

特点：突出显示最亮结构，忽略透明度

b) ISO（Isosurface）等值面渲染

glsl
// 伪代码：寻找特定阈值的表面
if (sampleValue > threshold) {
    // 计算表面法线、光照等
    vec3 normal = computeNormal(samplePos);
    color = applyLighting(baseColor, normal);
}
原理：显示特定强度阈值的三维表面

应用：器官表面重建、组织分割显示

特点：提供真实的三维表面感

3. 医学数据格式处理
javascript
// NRRD格式特点
{
    "encoding": "raw",      // 原始二进制数据
    "type": "float",        // 32位浮点数
    "dimension": 3,         // 三维数据
    "sizes": [256,256,128]  // 各维度大小
}
NRRD格式：专门用于医学影像的格式标准

数据组织：连续存储的体素阵列

元数据：包含空间方向、间距、原点等信息

4. 3D纹理与采样技术
javascript
// WebGL 2.0 3D纹理配置
texture.format = THREE.RedFormat;    // 单通道存储
texture.type = THREE.FloatType;      // 浮点精度
texture.minFilter = THREE.LinearFilter; // 三线性插值
三线性插值：在三维空间中进行平滑插值

浮点纹理：保持医学数据的高精度

存储优化：单通道存储节省显存

5. 光线投射算法实现
glsl
// 体积渲染核心算法
void main() {
    // 1. 计算进入和退出体积的交点
    vec3 entryPoint = computeEntryPoint();
    vec3 exitPoint = computeExitPoint();
    
    // 2. 沿射线步进采样
    float rayLength = distance(exitPoint, entryPoint);
    int numSteps = int(rayLength / stepSize);
    
    // 3. 根据渲染模式合成颜色
    vec4 finalColor = vec4(0.0);
    for (int i = 0; i < numSteps; i++) {
        vec3 samplePos = entryPoint + rayDir * (i * stepSize);
        float density = texture(u_data, samplePos).r;
        
        if (u_renderstyle == 0) {
            // MIP模式：取最大值
            finalColor.rgb = max(finalColor.rgb, vec3(density));
        } else {
            // ISO模式：等值面检测
            if (density > u_renderthreshold) {
                vec3 normal = computeGradient(samplePos);
                finalColor = applyPhongLighting(density, normal);
                break; // 等值面渲染通常找到表面就停止
            }
        }
    }
}
6. 颜色映射与后处理
javascript
// 颜色映射系统
uniforms['u_cmdata'].value = cmtextures[volconfig.colormap];
Viridis色图：感知均匀的渐变色，适合科学可视化

灰度映射：传统医学显示方式

可扩展性：支持添加任意颜色映射纹理

7. 交互与性能优化
javascript
// 响应式设计
function onWindowResize() {
    renderer.setSize(window.innerWidth, window.innerHeight);
    camera.updateProjectionMatrix();
}
按需渲染：只在参数变化或交互时更新

正交投影：避免透视变形，适合医学查看

自适应分辨率：根据设备像素比调整

🚀 性能优化策略
1. GPU加速策略
着色器计算：所有体素处理在GPU并行执行

纹理采样优化：使用硬件三线性过滤

提前终止：ISO模式找到表面后停止采样

2. 内存管理
javascript
// 高效数据存储
volume.data = new Float32Array(xLen * yLen * zLen);
// 使用Float32Array而非普通数组
3. 渲染优化
背面剔除：只渲染背面，优化采样起点计算

步长控制：平衡质量与性能

视锥体裁剪：只渲染可见部分

🔧 扩展能力设计
1. 算法扩展点
javascript
// 可添加的渲染模式
const additionalModes = {
    'average': '平均强度投影',
    'xray': 'X光模拟',
    'volume': '半透明体渲染'
};
2. 数据源扩展
DICOM支持：标准医学影像格式

RAW数据：原始体数据文件

实时流：手术导航等实时应用

3. 分析功能
测量工具：距离、角度、体积测量

剖面查看：任意平面切割

数据统计：直方图分析

🏥 临床应用价值
1. 诊断应用
肿瘤检测与测量

血管病变分析

骨骼结构评估

2. 手术规划
三维解剖结构预览

手术路径规划

植入物尺寸选择

3. 医学教育
交互式解剖学习

病理示例展示

手术模拟训练

📊 技术栈总结
技术层级	具体技术	作用
底层API	WebGL 2.0	硬件加速图形渲染
框架	Three.js r128+	3D图形抽象和管理
数据格式	NRRD	医学体积数据存储
渲染算法	光线投射	体积数据到图像转换
交互	OrbitControls	相机控制
UI	lil-gui	参数调节界面
数据处理	Float32Array	高性能数值计算
⚡ 性能指标
渲染速度：30-60 FPS（取决于数据大小）

支持数据尺寸：最高512×512×512体素

内存占用：约数据大小的4倍（RGBA浮点纹理）

加载时间：取决于网络速度和数据大小

🎨 可视化效果对比
text
MIP模式 (血管显示)           ISO模式 (器官表面)
    ┌─────────────┐            ┌─────────────┐
    │ 突出最亮结构  │            │ 三维表面细节 │
    │ 血管网络清晰 │            │ 解剖结构明确 │
    │ 无深度信息   │            │ 有立体感    │
    └─────────────┘            └─────────────┘ -->


<!DOCTYPE html>
<!-- 声明HTML5文档类型 -->
<html lang="zh-CN">
<!-- 设置文档语言为中文 -->
<head>
    <!-- 文档头部开始 -->
    <!-- 设置页面标题为中文 -->
    <title>Three.js WebGL 体积渲染示例 - 医学影像三维可视化</title>
    <!-- 设置文档字符编码为UTF-8，支持中文显示 -->
    <meta charset="utf-8">
    <!-- 视口元标签：用于移动端响应式设计 -->
    <!-- width=device-width: 宽度等于设备宽度 -->
    <!-- user-scalable=no: 禁止用户手动缩放页面 -->
    <!-- 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>
<!-- 文档头部结束 -->

<body>
    <!-- 页面信息显示区域，用于展示项目信息和操作说明 -->
    <div id="info">
        <!-- Three.js官方链接 -->
        <a href="https://threejs.org" target="_blank" rel="noopener">Three.js</a> 
        - 医学体数据三维可视化示例<br>
        <!-- 功能说明 -->
        <strong>功能说明：</strong><br>
        1. 左键拖动：旋转视角<br>
        2. 滚轮滑动：缩放视图<br>
        3. 右侧控制面板：调节渲染参数<br>
        <!-- 渲染模式说明 -->
        <strong>渲染模式：</strong><br>
        - MIP模式：最大密度投影，显示最亮体素<br>
        - ISO模式：等值面渲染，显示特定阈值表面
    </div>
    
    <!-- 可选的嵌入显示区域，可用于显示辅助信息或缩略图 -->
    <!-- 当前代码中未实际使用，但保留了扩展可能性 -->
    <div id="inset"></div>

    <!-- Import Map：现代浏览器模块导入映射配置 -->
    <!-- 允许浏览器识别和解析ES6模块导入路径 -->
    <script type="importmap">
        {
            "imports": {
                "three": "../build/three.module.js",
                
                "three/addons/": "./jsm/"
            }
        }
    </script>

    <!-- 主JavaScript模块 -->
    <script type="module">
        // 导入Three.js核心库的所有功能
        // Three.js是一个基于WebGL的3D图形库
        import * as THREE from 'three';
        
        // 导入lil-gui库，用于创建用户界面控制面板
        // lil-gui是一个轻量级的GUI库，特别适合Three.js项目
        import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
        
        // 导入轨道控制器，用于实现鼠标拖拽旋转、滚轮缩放等交互功能
        import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
        
        // 导入NRRD加载器，专门用于加载医学影像NRRD格式数据
        // NRRD（Nearly Raw Raster Data）是医学影像常用的格式
        import { NRRDLoader } from 'three/addons/loaders/NRRDLoader.js';
        
        // 导入体积渲染着色器，这是本示例的核心着色器程序
        // VolumeRenderShader1实现了体积渲染算法
        import { VolumeRenderShader1 } from 'three/addons/shaders/VolumeShader.js';

        // ========== 全局变量声明 ==========
        // 这些变量在整个脚本中共享使用
        
        let renderer,   // Three.js WebGL渲染器实例，负责将3D场景绘制到canvas上
            scene,      // Three.js场景对象，包含所有要渲染的3D对象、灯光、相机等
            camera,     // Three.js相机对象，定义观察3D场景的视角
            controls,   // 轨道控制器实例，处理用户交互（旋转、缩放等）
            material,   // Three.js材质对象，定义物体表面的外观特性
            volconfig,  // 体积渲染配置对象，存储所有可调节的参数
            cmtextures; // 颜色映射纹理集合，存储不同颜色方案的纹理

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

        /**
         * 主初始化函数
         * 这是整个应用程序的入口点，负责创建和设置所有必要的Three.js组件
         * 包括场景、渲染器、相机、控制器、GUI和加载体积数据
         */
        function init() {
            // ========== 场景创建 ==========
            // 创建Three.js场景，所有3D对象都将添加到这个场景中
            // 场景是Three.js中所有可渲染对象的容器
            scene = new THREE.Scene();
            // 可以设置场景背景色：scene.background = new THREE.Color(0x000000);

            // ========== 渲染器创建和配置 ==========
            // 创建WebGL渲染器实例
            renderer = new THREE.WebGLRenderer();
            // 设置设备像素比，确保在高DPI显示器上清晰显示
            // window.devicePixelRatio返回物理像素与CSS像素的比率
            renderer.setPixelRatio(window.devicePixelRatio);
            // 设置渲染器尺寸为整个浏览器窗口大小
            renderer.setSize(window.innerWidth, window.innerHeight);
            // 将渲染器的canvas元素添加到页面body中
            // renderer.domElement是<canvas>元素的引用
            document.body.appendChild(renderer.domElement);
            
            // 可选：启用阴影渲染（如果场景需要阴影）
            // renderer.shadowMap.enabled = true;
            // renderer.shadowMap.type = THREE.PCFSoftShadowMap;

            // ========== 相机创建和配置 ==========
            // 体积渲染通常使用正交相机而不是透视相机，原因如下：
            // 1. 正交相机没有透视变形，更适合医学影像查看
            // 2. 体积渲染的深度效果由算法自身处理，不需要相机透视
            // 3. 正交相机下物体大小不会随距离变化，便于测量
            
            const h = 512; // 定义视锥体高度（单位：世界坐标单位）
            const aspect = window.innerWidth / window.innerHeight; // 计算窗口宽高比
            
            // 创建正交相机
            // 参数说明：左边界，右边界，上边界，下边界，近裁剪面，远裁剪面
            camera = new THREE.OrthographicCamera(
                -h * aspect / 2,  // 左边界：根据宽高比计算
                h * aspect / 2,   // 右边界：与左边界对称
                h / 2,            // 上边界
                -h / 2,           // 下边界：与上边界对称
                1,                // 近裁剪面：相机能看到的最近距离
                1000              // 远裁剪面：相机能看到的最远距离
            );
            
            // 设置相机初始位置
            // 参数说明：X坐标，Y坐标，Z坐标
            // 这个位置使相机能够很好地观察整个体积数据
            camera.position.set(-64, -64, 128);
            
            // 设置相机的"上"方向
            // 在Three.js中，默认Y轴向上，但医学影像数据通常Z轴向上
            // 这里设置Z轴向上以匹配数据坐标系
            camera.up.set(0, 0, 1);
            
            // 可选：设置相机看向的目标点
            // camera.lookAt(0, 0, 0);

            // ========== 轨道控制器创建和配置 ==========
            // 轨道控制器允许用户通过鼠标交互控制相机
            
            // 创建控制器实例，传入相机和DOM元素（用户交互的目标）
            controls = new OrbitControls(camera, renderer.domElement);
            
            // 添加change事件监听器，当用户交互改变控制器状态时触发渲染
            controls.addEventListener('change', render);
            
            // 设置控制器的目标点（相机围绕这个点旋转）
            controls.target.set(64, 64, 128);
            
            // 设置缩放限制
            controls.minZoom = 0.5;  // 最小缩放比例
            controls.maxZoom = 4;    // 最大缩放比例
            
            // 禁用平移功能（pan），只允许旋转和缩放
            controls.enablePan = false;
            
            // 更新控制器内部状态
            controls.update();
            
            // 可选：启用阻尼效果（惯性），使交互更自然
            // controls.enableDamping = true;
            // controls.dampingFactor = 0.05;

            // ========== 辅助工具（可选，当前注释掉） ==========
            // 可以添加坐标轴辅助工具，帮助理解三维空间方向
            // 参数128表示坐标轴长度
            // const axesHelper = new THREE.AxesHelper(128);
            // scene.add(axesHelper);

            // ========== GUI控制面板配置 ==========
            // 创建配置对象，存储所有可以通过GUI调节的参数
            volconfig = {
                clim1: 0,            // 颜色映射范围下限（最小强度值）
                clim2: 1,            // 颜色映射范围上限（最大强度值）
                renderstyle: 'iso',  // 渲染风格：'iso'等值面或'mip'最大密度投影
                isothreshold: 0.15,  // 等值面阈值（仅ISO模式有效）
                colormap: 'viridis'  // 颜色映射方案：'viridis'彩色或'gray'灰度
            };
            
            // 创建GUI实例
            const gui = new GUI();
            
            // 添加颜色范围下限控制器
            // 参数：目标对象，属性名，最小值，最大值，步长
            gui.add(volconfig, 'clim1', 0, 1, 0.01)
               .name('强度下限')  // 设置中文显示名称
               .onChange(updateUniforms);  // 值改变时回调函数
            
            // 添加颜色范围上限控制器
            gui.add(volconfig, 'clim2', 0, 1, 0.01)
               .name('强度上限')
               .onChange(updateUniforms);
            
            // 添加颜色映射方案选择器
            // 第三个参数是选项对象，显示名称: 实际值
            gui.add(volconfig, 'colormap', { 
                '灰度图': 'gray', 
                '彩虹色': 'viridis' 
            })
               .name('颜色方案')
               .onChange(updateUniforms);
            
            // 添加渲染风格选择器
            gui.add(volconfig, 'renderstyle', { 
                'MIP模式': 'mip', 
                'ISO模式': 'iso' 
            })
               .name('渲染模式')
               .onChange(updateUniforms);
            
            // 添加等值面阈值控制器（仅ISO模式有效）
            gui.add(volconfig, 'isothreshold', 0, 1, 0.01)
               .name('等值面阈值')
               .onChange(updateUniforms);
            
            // 可选：添加文件夹分组
            // const folder = gui.addFolder('高级设置');
            // folder.add(...);
            // folder.open();

            // ========== 加载体积数据 ==========
            // 使用NRRDLoader加载医学影像数据
            
            // 创建NRRDLoader实例并加载数据
            // 参数：数据文件路径，加载完成后的回调函数
            new NRRDLoader().load('models/nrrd/stent.nrrd', function(volume) {
                // 回调函数参数volume包含加载的体积数据
                // volume.data: 原始体素数据数组（一维Float32Array）
                // volume.xLength, volume.yLength, volume.zLength: 三个维度的尺寸
                
                // console.log('体积数据加载成功');
                // console.log('数据尺寸:', volume.xLength, '×', volume.yLength, '×', volume.zLength);
                // console.log('数据范围:', 
                //     Math.min(...volume.data), '到', 
                //     Math.max(...volume.data)
                // );

                // ========== 创建3D纹理存储体积数据 ==========
                // Three.js的Data3DTexture用于存储3D纹理数据
                // 对于医学体积数据，每个体素是一个标量值（如CT值、MRI强度）
                
                const texture = new THREE.Data3DTexture(
                    volume.data,        // 原始体素数据（一维数组）
                    volume.xLength,     // X轴维度大小（体素数量）
                    volume.yLength,     // Y轴维度大小
                    volume.zLength      // Z轴维度大小
                );
                
                // ========== 配置纹理参数 ==========
                
                // 设置纹理格式：RedFormat表示只使用红色通道存储数据
                // 因为我们的数据是标量，只需要一个通道
                texture.format = THREE.RedFormat;
                
                // 设置数据类型：FloatType表示使用32位浮点数
                // 医学影像数据通常需要高精度，所以使用浮点数
                texture.type = THREE.FloatType;
                
                // 设置纹理过滤方式：LinearFilter使用线性插值
                // 这使得在放大缩小时体素之间过渡平滑
                texture.minFilter = THREE.LinearFilter;  // 缩小时的过滤
                texture.magFilter = THREE.LinearFilter;  // 放大时的过滤
                
                // 设置内存对齐：1表示不对齐
                // WebGL要求纹理数据按特定字节对齐，1表示不限制
                texture.unpackAlignment = 1;
                
                // 标记纹理需要更新到GPU
                texture.needsUpdate = true;
                
                // 可选：设置纹理包裹方式（重复方式）
                // texture.wrapS = texture.wrapT = texture.wrapR = THREE.ClampToEdgeWrapping;

                // ========== 加载颜色映射纹理 ==========
                // 颜色映射纹理将体素强度值映射到颜色
                // 纹理是一个1D纹理，横轴表示强度值（0-1），纵轴表示颜色
                
                cmtextures = {
                    // viridis纹理：从紫色到黄色的渐变色，适合科学可视化
                    viridis: new THREE.TextureLoader().load(
                        'textures/cm_viridis.png',  // 纹理文件路径
                        render  // 加载完成后的回调函数（重新渲染）
                    ),
                    // gray纹理：黑白渐变色
                    gray: new THREE.TextureLoader().load(
                        'textures/cm_gray.png',
                        render
                    )
                };
                
                // 配置颜色映射纹理参数
                for (let key in cmtextures) {
                    cmtextures[key].minFilter = THREE.LinearFilter;
                    cmtextures[key].magFilter = THREE.LinearFilter;
                    cmtextures[key].wrapS = THREE.ClampToEdgeWrapping;
                }

                // ========== 准备体积渲染着色器 ==========
                
                // 获取体积渲染着色器对象
                const shader = VolumeRenderShader1;
                
                // 克隆着色器的uniform变量定义
                // Uniforms是着色器的全局变量，可以从JavaScript设置
                const uniforms = THREE.UniformsUtils.clone(shader.uniforms);
                
                // ========== 设置着色器uniform变量 ==========
                
                // u_data: 体积数据纹理
                uniforms['u_data'].value = texture;
                
                // u_size: 体积数据的尺寸（体素数）
                uniforms['u_size'].value.set(
                    volume.xLength,
                    volume.yLength,
                    volume.zLength
                );
                
                // u_clim: 颜色映射范围（强度值范围）
                // 小于clim1的值映射到颜色纹理最左端
                // 大于clim2的值映射到颜色纹理最右端
                uniforms['u_clim'].value.set(
                    volconfig.clim1,
                    volconfig.clim2
                );
                
                // u_renderstyle: 渲染风格
                // 0 = MIP（最大密度投影）：沿着视线方向取最大强度值
                // 1 = ISO（等值面）：显示特定强度的表面
                uniforms['u_renderstyle'].value = volconfig.renderstyle == 'mip' ? 0 : 1;
                
                // u_renderthreshold: 等值面阈值（仅ISO模式有效）
                // 定义要显示的表面的强度阈值
                uniforms['u_renderthreshold'].value = volconfig.isothreshold;
                
                // u_cmdata: 颜色映射纹理
                // 根据选择的颜色方案使用对应的纹理
                uniforms['u_cmdata'].value = cmtextures[volconfig.colormap];
                
                // 可选：设置步长（影响渲染质量和性能）
                // uniforms['u_stepsize'].value = 0.01;

                // ========== 创建着色器材质 ==========
                
                material = new THREE.ShaderMaterial({
                    uniforms: uniforms,           // 上面设置的uniform变量
                    vertexShader: shader.vertexShader,     // 顶点着色器代码
                    fragmentShader: shader.fragmentShader, // 片段着色器代码
                    side: THREE.BackSide,        // 渲染背面
                    // 注意：体积渲染使用BackSide是因为算法需要从背面开始采样
                    
                    // 可选：启用透明度
                    // transparent: true,
                    // depthWrite: false,  // 禁用深度写入，避免透明度问题
                });

                // ========== 创建几何体作为体积容器 ==========
                // 体积渲染需要一个几何体来定义采样空间
                // 这里使用一个立方体，大小与体积数据相同
                
                const geometry = new THREE.BoxGeometry(
                    volume.xLength,  // 宽度 = X维度
                    volume.yLength,  // 高度 = Y维度
                    volume.zLength   // 深度 = Z维度
                );
                
                // 平移几何体，使其中心位于原点
                // Three.js的BoxGeometry默认中心在原点
                // 但是体积渲染算法期望几何体从某个角开始
                // 所以平移半个尺寸减去0.5（体素中心对齐）
                geometry.translate(
                    volume.xLength / 2 - 0.5,  // X方向平移
                    volume.yLength / 2 - 0.5,  // Y方向平移
                    volume.zLength / 2 - 0.5   // Z方向平移
                );

                // ========== 创建网格对象 ==========
                // 网格 = 几何体 + 材质
                
                const mesh = new THREE.Mesh(geometry, material);
                
                // 将网格添加到场景中
                scene.add(mesh);
                
                // 可选：添加线框辅助，显示体积边界
                // const wireframe = new THREE.WireframeGeometry(geometry);
                // const line = new THREE.LineSegments(wireframe);
                // line.material.color.set(0xffffff);
                // line.material.opacity = 0.25;
                // line.material.transparent = true;
                // scene.add(line);

                console.log('体积渲染场景设置完成');
                
                // 执行初始渲染
                render();
                
            }, 
            // 可选：加载进度回调
            function(xhr) {
                console.log('加载进度: ' + (xhr.loaded / xhr.total * 100) + '%');
            },
            // 可选：加载错误回调
            function(error) {
                console.error('体积数据加载失败:', error);
                // 这里可以添加错误处理，比如显示错误信息
            });

            // ========== 窗口大小改变事件监听 ==========
            // 当浏览器窗口大小改变时，调整渲染器和相机
            
            window.addEventListener('resize', onWindowResize);
            
            // 可选：添加键盘事件监听
            // window.addEventListener('keydown', onKeyDown);
            
            // 可选：添加性能监视器
            // const stats = new Stats();
            // document.body.appendChild(stats.dom);
            // 在渲染函数中调用 stats.update();
        }

        /**
         * 更新着色器uniform变量函数
         * 当GUI控件值改变时调用此函数
         * 将JavaScript中的参数值同步到GPU着色器
         */
        function updateUniforms() {
            // 检查material是否已创建（避免在数据加载完成前调用）
            if (!material) return;
            
            // 更新颜色映射范围
            // set()方法一次性设置x和y值
            material.uniforms['u_clim'].value.set(
                volconfig.clim1,
                volconfig.clim2
            );
            
            // 更新渲染风格
            // 使用三元运算符：条件 ? 值1 : 值2
            material.uniforms['u_renderstyle'].value = 
                volconfig.renderstyle == 'mip' ? 0 : 1;
            
            // 更新等值面阈值
            material.uniforms['u_renderthreshold'].value = volconfig.isothreshold;
            
            // 更新颜色映射纹理
            // 从cmtextures对象中获取选中的纹理
            material.uniforms['u_cmdata'].value = cmtextures[volconfig.colormap];
            
            // 标记uniforms需要更新到GPU
            // Three.js会自动检测value的变化，但显式标记更可靠
            material.uniformsNeedUpdate = true;
            
            // 触发重新渲染
            render();
            
            // 可选：控制台输出当前参数值，用于调试
            // console.log('参数更新:', {
            //     clim: [volconfig.clim1, volconfig.clim2],
            //     renderstyle: volconfig.renderstyle,
            //     isothreshold: volconfig.isothreshold,
            //     colormap: volconfig.colormap
            // });
        }

        /**
         * 窗口大小改变处理函数
         * 响应浏览器窗口大小变化，确保渲染正确适配
         */
        function onWindowResize() {
            // 更新渲染器尺寸为新的窗口尺寸
            renderer.setSize(window.innerWidth, window.innerHeight);
            
            // 重新计算宽高比
            const aspect = window.innerWidth / window.innerHeight;
            
            // 计算当前视锥体高度
            // 正交相机的top和bottom定义了视锥体高度
            const frustumHeight = camera.top - camera.bottom;
            
            // 根据新的宽高比更新相机左右边界
            // 保持视锥体高度不变，调整宽度以保持宽高比正确
            camera.left = -frustumHeight * aspect / 2;
            camera.right = frustumHeight * aspect / 2;
            
            // 更新相机投影矩阵
            // 当相机参数改变后，必须调用此方法重新计算投影矩阵
            camera.updateProjectionMatrix();
            
            // 可选：更新控制器（如果需要）
            // controls.handleResize();
            
            // 触发重新渲染
            render();
            
            // 可选：控制台输出新尺寸
            // console.log('窗口尺寸更新:', window.innerWidth, '×', window.innerHeight);
        }

        /**
         * 渲染函数
         * 执行场景渲染到canvas
         * 这是Three.js最核心的函数之一
         */
        function render() {
            // 使用渲染器将场景从相机视角渲染到canvas
            renderer.render(scene, camera);
            
            // 可选：如果启用了控制器的阻尼效果，需要更新控制器
            // if (controls.enableDamping) {
            //     controls.update();
            // }
            
            // 可选：更新性能监视器
            // if (stats) stats.update();
            
            // 可选：触发动画循环
            // 如果场景中有动画，可以这样设置：
            // requestAnimationFrame(render);
            // 但本示例使用按需渲染（只在需要时渲染），更节能
        }

        // ========== 可选扩展功能 ==========
        
        /**
         * 屏幕截图功能
         * 可以将当前渲染结果保存为图片
         */
        function takeScreenshot() {
            // 创建一个临时的canvas元素
            const canvas = renderer.domElement;
            
            // 创建一个链接元素
            const link = document.createElement('a');
            
            // 设置链接属性
            link.download = '体积渲染截图.png';  // 下载文件名
            link.href = canvas.toDataURL('image/png');  // 将canvas转为Data URL
            
            // 模拟点击链接进行下载
            link.click();
            
            console.log('截图已保存');
        }
        
        // 可以添加键盘快捷键触发截图
        // window.addEventListener('keydown', function(event) {
        //     if (event.key === 's' && event.ctrlKey) {
        //         takeScreenshot();
        //         event.preventDefault(); // 阻止浏览器默认保存行为
        //     }
        // });
        
        /**
         * 全屏切换功能
         */
        function toggleFullscreen() {
            if (!document.fullscreenElement) {
                // 进入全屏
                document.documentElement.requestFullscreen()
                    .catch(err => {
                        console.error('全屏请求失败:', err);
                    });
            } else {
                // 退出全屏
                document.exitFullscreen();
            }
        }
        
        // 可以添加全屏按钮或快捷键
        // document.getElementById('fullscreen-btn').addEventListener('click', toggleFullscreen);

        // ========== 性能优化建议 ==========
        // 1. 对于大数据集，可以降低采样步长提高性能
        // 2. 使用离屏渲染预计算复杂效果
        // 3. 实现细节层次（LOD）系统，根据距离调整渲染质量
        // 4. 使用WebGL扩展如OES_texture_float_linear提高浮点纹理过滤性能

    </script>
    <!-- JavaScript模块结束 -->
</body>
<!-- 文档体结束 -->
</html>
<!-- HTML文档结束 -->