<!-- 代码功能概述
这是一个基于Three.js的科学数据可视化Web应用，专门用于展示压力数据的三维可视化效果。通过颜色查找表（LUT）技术，将压力数值映射为可视化的颜色，在3D模型表面呈现数据分布。

核心功能：
3D压力数据可视化：加载包含压力数据的3D模型，根据每个顶点的压力值显示不同颜色

实时颜色映射切换：用户可以选择不同的颜色方案（彩虹色、冷暖色、黑体辐射色、灰度）

交互式3D查看：支持鼠标拖拽、缩放、旋转查看模型

颜色条图例显示：实时显示当前颜色方案对应的数值-颜色映射关系

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

主要技术点详解
1. Three.js核心架构
双场景系统
javascript
scene = new THREE.Scene();      // 3D主场景
uiScene = new THREE.Scene();    // 2D UI场景
分离渲染：3D模型和2D界面元素使用不同场景，避免渲染冲突

性能优化：可以根据需要分别控制渲染

双相机系统
javascript
// 透视相机 - 3D渲染
perpCamera = new THREE.PerspectiveCamera(60, width/height, 1, 100);

// 正交相机 - 2D UI渲染
orthoCamera = new THREE.OrthographicCamera(-1, 1, 1, -1, 1, 2);
透视相机：模拟人眼视角，有近大远小效果，适合3D场景

正交相机：无透视变形，保持物体大小不变，适合UI元素

2. 颜色查找表（LUT）技术
原理
将连续的数值范围映射到离散的颜色梯度：

text
压力值：0   →   500   →   1000   →   1500   →   2000
颜色： 蓝   →   青     →   绿     →   黄     →   红
实现关键
javascript
// 设置颜色映射方案
lut.setColorMap('rainbow');
// 设置数值范围
lut.setMax(2000);
lut.setMin(0);
// 获取颜色
color.copy(lut.getColor(pressureValue));
支持的映射方案
rainbow：彩虹色（红橙黄绿青蓝紫）

cooltowarm：冷暖色（蓝→红）

blackbody：黑体辐射色（模拟加热物体的颜色变化）

grayscale：灰度（黑白渐变）

3. 数据可视化流程
数据加载
javascript
// 从JSON文件加载几何体数据
loader.load('models/json/pressure.json', function(geometry) {
    geometry.attributes.pressure  // 压力数据属性
    geometry.attributes.position  // 顶点位置
    geometry.attributes.color     // 顶点颜色（待计算）
});
颜色计算与设置
javascript
// 遍历所有顶点
for (let i = 0; i < pressures.array.length; i++) {
    // 根据压力值获取颜色
    const colorValue = pressures.array[i];
    color.copy(lut.getColor(colorValue)).convertSRGBToLinear();
    
    // 设置顶点颜色
    colors.setXYZ(i, color.r, color.g, color.b);
}
GPU优化：使用BufferAttribute存储顶点数据

颜色空间转换：sRGB ↔ 线性颜色空间转换

4. 渲染优化技术
手动渲染控制
javascript
renderer.autoClear = false;  // 关闭自动清空

function render() {
    renderer.clear();                    // 手动清空缓冲区
    renderer.render(scene, perpCamera);   // 渲染3D场景
    renderer.render(uiScene, orthoCamera); // 渲染UI场景
}
精确控制：避免不必要的清空操作

性能优化：减少GPU状态切换

响应式设计
javascript
window.addEventListener('resize', onWindowResize);
自动调整相机宽高比

更新渲染器尺寸

保持可视化效果一致性

5. 交互功能实现
轨道控制器
javascript
const controls = new OrbitControls(perpCamera, renderer.domElement);
controls.addEventListener('change', render);
鼠标交互：左键旋转、右键平移、滚轮缩放

事件驱动渲染：只在用户交互时重新渲染

GUI控制面板
javascript
const gui = new GUI();
gui.add(params, 'colorMap', ['rainbow', 'cooltowarm', 'blackbody', 'grayscale'])
   .onChange(function() {
       updateColors();
       render();
   });
实时参数调整：无需刷新页面

直观的用户界面：下拉选择颜色方案

6. 性能优化策略
顶点属性优化
javascript
// 使用Float32BufferAttribute存储颜色数据
geometry.setAttribute('color', new THREE.Float32BufferAttribute(colors, 3));
内存高效：使用Float32数组存储

GPU友好：直接传输到显存

纹理更新优化
javascript
// 仅更新变化的纹理
map.needsUpdate = true;
colors.needsUpdate = true;
脏标记机制：只更新需要变化的数据

减少GPU上传：避免每帧都上传所有数据

7. 模块化开发
ES6模块导入
javascript
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { Lut } from 'three/addons/math/Lut.js';
按需导入：减少打包体积

清晰的依赖关系

Import Maps配置
html
<script type="importmap">
{
    "imports": {
        "three": "../build/three.module.js",
        "three/addons/": "./jsm/"
    }
}
</script>
路径映射：简化导入语句

版本管理：方便升级

应用场景
工程仿真：CFD（计算流体力学）压力分布可视化

医学成像：MRI/CT扫描数据三维可视化

气象科学：大气压力场可视化

地质勘探：地层压力分布展示

教育演示：物理现象的可视化教学

技术亮点
专业级科学可视化：基于LUT的专业颜色映射

高性能渲染：充分利用WebGL硬件加速

良好交互体验：流畅的3D交互和实时参数调整

代码结构清晰：模块化、可维护的代码架构

跨平台兼容：纯Web技术，无需安装插件 -->


<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<!-- 页面标题：Three.js WebGL颜色查找表示例 -->
		<title>Three.js WebGL - 颜色查找表示例</title>
		<!-- 字符编码设置 -->
		<meta charset="utf-8">
		<!-- 视口设置：适配移动设备，禁止缩放 -->
		<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>
			/* 页面主体样式 */
			body {
				background-color: #fff;  /* 白色背景 */
				color: #444;             /* 深灰色文字 */
			}
			/* 超链接样式 */
			a {
				color: red;              /* 红色链接 */
			}
		</style>
	</head>
	<body>

		<!-- 信息显示区域 -->
		<div id="info">
			<!-- Three.js官网链接 -->
			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> WebGL - 颜色查找表<br/>
			<!-- 功能说明：使用颜色查找表将数据范围映射为顶点颜色 -->
			功能：将压力数据值范围映射为顶点颜色（可视化）
		</div>

		<!-- Three.js渲染容器：WebGL将在此div中绘制3D图形 -->
		<div id="container"></div>

		<!-- 导入映射配置：定义模块路径，用于ES6模块导入 -->
		<script type="importmap">
			{
				"imports": {
					"three": "../build/three.module.js",
					"three/addons/": "./jsm/"
				}
			}
		</script>

		<!-- 主JavaScript模块 -->
		<script type="module">

			// ==================== 模块导入区域 ====================
			// 导入Three.js核心库的所有功能
			import * as THREE from 'three';

			// 导入轻量级GUI库，用于创建控制面板
			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';

			// 导入轨道控制器：允许用户用鼠标拖拽旋转相机
			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
			// 导入颜色查找表(LUT)：用于将数值映射到颜色
			import { Lut } from 'three/addons/math/Lut.js';

			// ==================== 全局变量声明 ====================
			let container;          // DOM容器元素引用，Three.js将在此元素中渲染

			let perpCamera;         // 透视相机：模拟人眼视角，有近大远小的透视效果
			let orthoCamera;        // 正交相机：无透视效果，用于渲染2D UI元素
			let renderer;           // WebGL渲染器：负责将3D场景绘制到canvas中
			let lut;                // 颜色查找表实例：存储颜色映射方案和数据范围

			let mesh;               // 3D网格对象：包含几何体和材质的可渲染对象
			let sprite;             // 精灵对象：2D图像，用于显示颜色条图例
			let scene;              // 主场景：包含所有3D对象（模型、灯光、相机等）
			let uiScene;            // UI场景：专门用于渲染2D界面元素（颜色条）

			let params;             // 参数对象：存储GUI控制的所有参数

			// ==================== 初始化函数调用 ====================
			// 程序入口：初始化所有Three.js组件
			init();

			// ==================== 函数定义区域 ====================
			/**
			 * 初始化函数：设置Three.js环境的基础配置
			 * 1. 创建场景、相机、渲染器
			 * 2. 加载3D模型
			 * 3. 设置灯光和交互控件
			 * 4. 配置GUI控制面板
			 */
			function init() {

				// 获取HTML中的容器元素
				container = document.getElementById( 'container' );

				// 创建主场景并设置背景色为白色
				// 场景是Three.js中所有3D对象的容器
				scene = new THREE.Scene();
				scene.background = new THREE.Color( 0xffffff );

				// 创建UI场景：专门用于渲染2D界面元素
				// 使用独立的场景可以避免2D和3D渲染冲突
				uiScene = new THREE.Scene();

				// 初始化颜色查找表(LUT)
				// LUT可以将数值范围（如0-2000）映射到颜色渐变
				lut = new Lut();

				// 获取浏览器窗口的宽度和高度
				const width = window.innerWidth;
				const height = window.innerHeight;

				// 创建透视相机（用于3D场景）
				// 参数说明：视野角度60度、宽高比、近裁剪面1、远裁剪面100
				perpCamera = new THREE.PerspectiveCamera( 60, width / height, 1, 100 );
				// 设置相机位置：在Z轴正方向10个单位处
				perpCamera.position.set( 0, 0, 10 );
				// 将相机添加到场景中（有些Three.js版本需要）
				scene.add( perpCamera );

				// 创建正交相机（用于UI场景，2D渲染）
				// 参数说明：左-1、右1、上1、下1、近裁剪面1、远裁剪面2
				// 这种相机没有透视效果，适合渲染UI
				orthoCamera = new THREE.OrthographicCamera( -1, 1, 1, -1, 1, 2 );
				orthoCamera.position.set( 0.5, 0, 1 );

				// 创建精灵对象：用于显示颜色查找表的颜色条图例
				// Sprite是始终面向相机的2D平面
				sprite = new THREE.Sprite( new THREE.SpriteMaterial( {
					// 使用LUT创建的画布作为纹理
					map: new THREE.CanvasTexture( lut.createCanvas() )
				} ) );
				// 设置颜色空间为sRGB（标准RGB颜色空间）
				sprite.material.map.colorSpace = THREE.SRGBColorSpace;
				// 设置精灵的缩放：宽度为0.125，高度自动保持纹理比例
				sprite.scale.x = 0.125;
				// 将精灵添加到UI场景
				uiScene.add( sprite );

				// 创建网格对象：几何体将在loadModel函数中加载
				mesh = new THREE.Mesh( 
					undefined, // 几何体暂时为空
					new THREE.MeshLambertMaterial( { // 兰伯特材质：模拟漫反射表面
						side: THREE.DoubleSide,      // 双面渲染：正反面都可见
						color: 0xF5F5F5,             // 基础颜色：浅灰色
						vertexColors: true           // 启用顶点颜色：每个顶点可以有独立的颜色
					} ) 
				);
				// 将网格添加到主场景
				scene.add( mesh );

				// 初始化GUI控制参数
				// colorMap：当前选择的颜色映射方案
				params = {
					colorMap: 'rainbow',  // 默认使用彩虹色方案
				};
				
				// 加载3D模型数据
				loadModel();

				// 创建点光源并添加到相机
				// 点光源：从一点向所有方向发射光线
				const pointLight = new THREE.PointLight( 0xffffff, 3, 0, 0 );
				// 将光源添加到相机，这样光源会随相机移动
				perpCamera.add( pointLight );

				// 创建WebGL渲染器
				renderer = new THREE.WebGLRenderer( { 
					antialias: true  // 开启抗锯齿，使边缘更平滑
				} );
				// 关闭自动清空：因为我们要渲染两个场景
				renderer.autoClear = false;
				// 设置设备像素比：适配高分辨率屏幕
				renderer.setPixelRatio( window.devicePixelRatio );
				// 设置渲染器尺寸为窗口大小
				renderer.setSize( width, height );
				// 将渲染器的canvas元素添加到DOM容器中
				container.appendChild( renderer.domElement );

				// 添加窗口大小变化事件监听器
				// 当用户调整浏览器窗口大小时触发
				window.addEventListener( 'resize', onWindowResize );

				// 创建轨道控制器：允许用户用鼠标交互控制相机
				// 参数：要控制的相机、事件监听的DOM元素
				const controls = new OrbitControls( perpCamera, renderer.domElement );
				// 添加变化事件监听：当用户交互时重新渲染
				controls.addEventListener( 'change', render );

				// 创建GUI控制面板
				const gui = new GUI();

				// 添加颜色映射方案下拉选择器
				gui.add( params, 'colorMap', [ 
					'rainbow',      // 彩虹色：红橙黄绿青蓝紫
					'cooltowarm',   // 冷暖色：蓝到红
					'blackbody',    // 黑体辐射色：模拟加热物体的颜色变化
					'grayscale'     // 灰度：黑白渐变
				] )
				// 添加变化监听器：当用户选择不同颜色方案时
				.onChange( function () {
					updateColors();  // 更新模型的顶点颜色
					render();        // 重新渲染场景
				} );

			}

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

				// 获取新的窗口尺寸
				const width = window.innerWidth;
				const height = window.innerHeight;

				// 更新透视相机的宽高比
				perpCamera.aspect = width / height;
				// 必须调用此函数使相机参数生效
				perpCamera.updateProjectionMatrix();

				// 更新渲染器尺寸
				renderer.setSize( width, height );
				
				// 重新渲染场景
				render();

			}

			/**
			 * 渲染函数：将场景绘制到canvas中
			 * 因为有两个场景（3D场景和UI场景），需要分别渲染
			 */
			function render() {

				// 手动清空颜色缓冲区、深度缓冲区和模板缓冲区
				renderer.clear();
				
				// 第一步：渲染主场景（3D模型）
				// 参数：要渲染的场景、使用的相机
				renderer.render( scene, perpCamera );
				
				// 第二步：渲染UI场景（颜色条图例）
				// 使用正交相机进行2D渲染
				renderer.render( uiScene, orthoCamera );

			}

			/**
			 * 加载模型函数：从JSON文件加载3D几何体数据
			 * 该模型包含压力数据属性，用于颜色映射
			 */
			function loadModel() {

				// 创建BufferGeometry加载器
				// BufferGeometry是Three.js的高性能几何体格式
				const loader = new THREE.BufferGeometryLoader();
				
				// 异步加载JSON格式的模型数据
				loader.load( 'models/json/pressure.json', function ( geometry ) {

					// 加载完成后的回调函数
					// geometry参数包含加载的几何体数据

					// 将几何体居中：使其原点位于包围盒中心
					geometry.center();
					
					// 计算顶点法线：用于光照计算
					// 法线决定了每个顶点面对的方向
					geometry.computeVertexNormals();

					// 创建默认颜色属性数组
					// 每个顶点需要3个值（R, G, B），初始为白色
					const colors = [];
					// 遍历所有顶点
					for ( let i = 0, n = geometry.attributes.position.count; i < n; ++ i ) {
						// 为每个顶点添加白色（1, 1, 1）
						colors.push( 1, 1, 1 );
					}

					// 将颜色数组设置为几何体的颜色属性
					// Float32BufferAttribute是高性能的浮点型缓冲区属性
					geometry.setAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );

					// 将加载的几何体分配给网格对象
					mesh.geometry = geometry;
					
					// 根据压力数据更新顶点颜色
					updateColors();
					
					// 执行初始渲染
					render();

				} );

			}

			/**
			 * 更新颜色函数：根据压力数据和当前颜色映射方案更新顶点颜色
			 * 这是本示例的核心功能：数据可视化
			 */
			function updateColors() {

				// 设置颜色查找表的颜色映射方案
				// 从params对象获取用户选择的方案
				lut.setColorMap( params.colorMap );

				// 设置颜色查找表的值范围
				// 压力数据将在0-2000范围内映射到颜色
				lut.setMax( 2000 );  // 最大值对应颜色条最上方的颜色
				lut.setMin( 0 );     // 最小值对应颜色条最下方的颜色

				// 获取网格的几何体
				const geometry = mesh.geometry;
				// 获取压力属性：包含每个顶点的压力值
				const pressures = geometry.attributes.pressure;
				// 获取颜色属性：将在此更新每个顶点的颜色
				const colors = geometry.attributes.color;
				// 创建临时颜色对象，用于颜色计算和转换
				const color = new THREE.Color();

				// 遍历所有顶点的压力数据
				for ( let i = 0; i < pressures.array.length; i ++ ) {

					// 获取当前顶点的压力值
					const colorValue = pressures.array[ i ];

					// 从LUT获取对应的颜色
					// 1. lut.getColor(colorValue)：根据压力值获取颜色
					// 2. color.copy()：复制颜色到临时对象
					// 3. .convertSRGBToLinear()：将sRGB颜色转换为线性颜色空间
					//    Three.js使用线性颜色进行计算，但显示器使用sRGB显示
					color.copy( lut.getColor( colorValue ) ).convertSRGBToLinear();

					// 将计算得到的颜色设置到顶点的颜色属性中
					// setXYZ方法设置第i个顶点的RGB值
					colors.setXYZ( i, color.r, color.g, color.b );

				}

				// 标记颜色属性需要更新到GPU
				// 这是必要的，因为我们在CPU端修改了颜色数据
				colors.needsUpdate = true;

				// 更新精灵纹理（颜色条图例）
				const map = sprite.material.map;
				// 使用更新后的LUT重新绘制颜色条画布
				lut.updateCanvas( map.image );
				// 标记纹理需要更新到GPU
				map.needsUpdate = true;

			}

		</script>

	</body>
</html>