<!-- Three.js CSS3D 分子结构可视化系统 - 功能描述与技术详解
一、项目概述
这是一个基于Three.js CSS3DRenderer技术构建的交互式3D分子结构可视化系统。该系统能够在浏览器中以三维形式展示各种化学分子结构，支持用户交互式探索和多种可视化模式切换。

二、核心功能详解
1. 三维分子可视化
原子表示：使用彩色球体（CSS3DSprite）表示不同化学元素

每种元素有特定的颜色编码（碳-灰色、氧-红色、氢-白色等）

球体始终面向相机（公告牌效果），保证可见性

化学键表示：使用圆柱形连接表示原子间的化学键

通过两个交叉的CSS div元素模拟圆柱体效果

动态计算键长和方向，准确连接原子中心

2. 交互控制系统
轨道球控制器（TrackballControls）：

左键拖动：自由旋转分子模型

中键/滚轮拖动：平移视角

滚轮滚动：缩放视图

支持触摸设备手势操作

可视化模式切换：

仅显示原子：突出显示原子位置和元素类型

仅显示化学键：显示分子骨架结构

原子+化学键：完整分子结构视图

3. 分子模型库
内置多种常见分子模型：

有机分子：咖啡因、阿司匹林、葡萄糖等

药物分子：LSD、可卡因、尼古丁等

无机物：食盐、铜晶体、石墨等

特殊结构：巴基球（C60）、立方烷等

支持动态切换，无需页面刷新

4. 动态效果
自动旋转：分子模型缓慢自转，便于多角度观察

平滑过渡：模式切换时平滑显示/隐藏元素

响应式布局：自适应不同屏幕尺寸

三、核心技术要点
1. CSS3D渲染技术
核心优势：
javascript
// 使用CSS3DRenderer而非WebGLRenderer
const renderer = new CSS3DRenderer();
// 优势：
// 1. 使用DOM元素，可以应用CSS样式和动画
// 2. 文本和UI元素渲染质量更高
// 3. 更轻量级，兼容性更好
实现原理：
CSS3DObject：普通3D对象，保持自身方向

CSS3DSprite：公告牌对象，始终面向相机

通过CSS transform 属性实现3D变换：

css
transform: matrix3d(...); /* 3D变换矩阵 */
2. PDB文件解析与处理
PDB文件结构处理：
javascript
const geometryAtoms = pdb.geometryAtoms;  // 原子几何数据
const geometryBonds = pdb.geometryBonds;  // 化学键几何数据
const json = pdb.json;                   // 解析后的JSON数据

// 原子数据包含：
// - 位置坐标 (x, y, z)
// - 颜色信息 (根据元素类型)
// - 元素符号 (C, H, O, N等)

// 化学键数据：
// - 成对出现的原子索引
// - 键类型（单键、双键等）
模型居中算法：
javascript
// 计算包围盒并居中
geometryAtoms.computeBoundingBox();
geometryAtoms.boundingBox.getCenter(offset).negate();
geometryAtoms.translate(offset.x, offset.y, offset.z);
// 确保分子中心位于(0,0,0)，便于旋转和观察
3. 原子精灵图着色系统
动态着色机制：
javascript
// 1. 加载基础白色精灵图
baseSprite.src = 'textures/sprites/ball.png';

// 2. 转换为Canvas进行像素级操作
const canvas = imageToCanvas(baseSprite);
const context = canvas.getContext('2d');

// 3. 应用颜色乘法着色
// 原理：白色图片 * 目标颜色 = 目标颜色图片
data[i + 0] *= color.r;  // R通道
data[i + 1] *= color.g;  // G通道
data[i + 2] *= color.b;  // B通道

// 4. 缓存结果，避免重复计算
colorSpriteMap[element] = dataUrl;
性能优化：
按元素类型缓存：相同元素重用已着色图片

DataURL存储：避免重复的Canvas操作

内存管理：及时清理不再使用的纹理

4. 化学键创建算法
键的几何计算：
javascript
// 1. 计算键向量和长度
tmpVec1.subVectors(end, start);  // 方向向量
const bondLength = tmpVec1.length() - 50;  // 减去重叠部分

// 2. 计算旋转（使div从垂直方向对齐到键方向）
// 旋转轴：Y轴与键向量的叉积
const axis = tmpVec2.set(0, 1, 0).cross(tmpVec1);
// 旋转角度：Y轴与键向量的夹角
const radians = Math.acos(Y轴.dot(键向量.normalize()));

// 3. 创建旋转矩阵
const objMatrix = new THREE.Matrix4().makeRotationAxis(axis.normalize(), radians);
圆柱效果实现：
javascript
// 创建两个交叉的div
// 第一个div：默认方向
let bond1 = new CSS3DObject(div1);
// 第二个div：绕Y轴旋转90度
let bond2 = new CSS3DObject(div2);
bond2.rotation.y = Math.PI / 2;

// 结果：两个矩形交叉形成近似圆柱的视觉效果
5. 性能优化技术
矩阵更新优化：
javascript
// 禁用自动矩阵更新，手动控制更新时机
object.matrixAutoUpdate = false;
object.updateMatrix();  // 只在需要时更新

// 优势：
// 1. 减少不必要的矩阵计算
// 2. 批量更新提高性能
// 3. 避免帧率波动
对象复用：
javascript
// 重用临时向量，避免频繁创建对象
const tmpVec1 = new THREE.Vector3();  // 创建一次，多次使用
// 而不是在循环内：new THREE.Vector3() 每次创建新对象
智能显示控制：
javascript
// 根据显示模式动态调整
if (仅显示原子模式) {
    bond.style.display = 'none';      // 隐藏键
    atom.style.display = '';          // 显示原子
} else if (仅显示键模式) {
    bond.style.height = fullLength;   // 完整键长
    atom.style.display = 'none';      // 隐藏原子
} else {
    bond.style.height = shortLength;  // 缩短键长，避免与原子重叠
}
6. 用户界面与控制
GUI控制系统：
javascript
const gui = new GUI();
// 下拉菜单：可视化模式选择
gui.add(params, 'vizType', VIZ_TYPE).onChange(changeVizType);
// 下拉菜单：分子选择
gui.add(params, 'molecule', MOLECULES).onChange(loadMolecule);

// 优势：
// 1. 直观的参数调整
// 2. 实时反馈
// 3. 无需代码修改即可切换功能
响应式设计：
javascript
// 窗口大小变化响应
window.addEventListener('resize', onWindowResize);

function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();  // 更新相机投影
    renderer.setSize(window.innerWidth, window.innerHeight);  // 调整渲染器大小
}
7. 动画与渲染循环
主循环结构：
javascript
function animate() {
    requestAnimationFrame(animate);  // 循环调用自身
    
    // 1. 更新控制器（处理用户输入）
    controls.update();
    
    // 2. 应用自动旋转
    const time = Date.now() * 0.0004;
    root.rotation.x = time;      // X轴旋转
    root.rotation.y = time * 0.7; // Y轴旋转（稍慢）
    
    // 3. 渲染场景
    renderer.render(scene, camera);
} -->


<!DOCTYPE html>
<html>
	<head>
		<!-- 页面标题：显示为浏览器标签页上的文字 -->
		<title>Three.js CSS3D 分子结构可视化</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">
		<!-- 内联样式：直接写在HTML中的样式 -->
		<style>
			/* 页面主体样式 */
			body {
				/* 背景颜色：深灰色 */
				background-color: #050505;
				/* 径向渐变背景：从中心向外渐变，营造3D空间的深度感 */
				background: radial-gradient(
					ellipse at center,  /* 椭圆形渐变，从中心开始 */
					rgba(43,45,48,1) 0%, /* 中心颜色：深灰色 */
					rgba(0,0,0,1) 100%   /* 边缘颜色：纯黑色 */
				);
			}
			
			/* 化学键样式：使用div元素模拟化学键 */
			.bond {
				width: 5px;           /* 键的宽度：5像素 */
				height: 10px;          /* 键的初始高度：10像素（会动态调整） */
				background: #eee;      /* 键的颜色：浅灰色 */
				display: block;        /* 显示为块级元素 */
			}
		</style>
	</head>
	<body>
		<!-- 容器div：用于承载Three.js渲染的3D场景 -->
		<div id="container"></div>
		<!-- 信息显示区域：显示项目信息和链接 -->
		<div id="info">
			基于 <a href="https://threejs.org" target="_blank" rel="noopener">Three.js</a> 的CSS3D分子结构可视化
			<br>
			<span style="font-size: 12px;">支持多种分子模型的3D展示与交互</span>
		</div>

		<!-- 导入映射（Import Map）：现代JavaScript模块系统的路径映射配置 -->
		<script type="importmap">
			{
				"imports": {
					"three": "../build/three.module.js",
					"three/addons/": "./jsm/"
				}
			}
		</script>

		<!-- 主JavaScript代码：type="module"表示这是一个ES6模块 -->
		<script type="module">

			/**************************************************************
			 * 模块导入部分：导入所需的所有Three.js库和插件
			 **************************************************************/
			
			// 导入Three.js核心库的所有功能
			import * as THREE from 'three';
			
			// 导入轨迹球控制器：提供鼠标/触摸控制3D视图的能力
			import { TrackballControls } from 'three/addons/controls/TrackballControls.js';
			
			// 导入PDB加载器：专门用于加载蛋白质数据库格式的分子文件
			import { PDBLoader } from 'three/addons/loaders/PDBLoader.js';
			
			// 导入CSS3D渲染器相关类：
			// CSS3DRenderer - 使用CSS3D技术渲染3D场景的渲染器
			// CSS3DObject   - 可以放置在3D空间中的普通CSS对象
			// CSS3DSprite   - 始终面向相机的CSS对象（类似公告牌）
			import { CSS3DRenderer, CSS3DObject, CSS3DSprite } from 'three/addons/renderers/CSS3DRenderer.js';
			
			// 导入GUI库：创建用户交互控制面板
			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';

			/**************************************************************
			 * 全局变量声明部分
			 **************************************************************/
			
			// Three.js核心对象
			let camera;      // 相机：定义观察者的视角
			let scene;       // 场景：所有3D对象的容器
			let renderer;    // 渲染器：负责将3D场景渲染到2D屏幕上
			
			let controls;    // 控制器：处理用户交互（旋转、缩放、平移）
			let root;        // 根对象：所有分子对象（原子和键）的父容器
			
			// 存储所有创建的CSS3D对象的数组
			// 包括：原子（CSS3DSprite）和化学键（CSS3DObject）
			const objects = [];
			
			// 临时向量变量：重用这些变量以避免频繁创建新对象，提高性能
			const tmpVec1 = new THREE.Vector3();
			const tmpVec2 = new THREE.Vector3();
			const tmpVec3 = new THREE.Vector3();
			const tmpVec4 = new THREE.Vector3();
			
			// 偏移向量：用于将分子模型居中到场景原点
			const offset = new THREE.Vector3();

			/**************************************************************
			 * 配置常量部分
			 **************************************************************/
			
			// 可视化类型枚举：定义三种不同的显示模式
			const VIZ_TYPE = {
				'仅显示原子': 0,           // 模式0：只显示原子（球体）
				'仅显示化学键': 1,         // 模式1：只显示化学键（圆柱）
				'显示原子和化学键': 2      // 模式2：同时显示原子和化学键
			};

			// 可用分子列表：键为显示名称，值为对应的PDB文件名
			const MOLECULES = {
				'乙醇': 'ethanol.pdb',
				'阿司匹林': 'aspirin.pdb',
				'咖啡因': 'caffeine.pdb',
				'尼古丁': 'nicotine.pdb',
				'LSD': 'lsd.pdb',
				'可卡因': 'cocaine.pdb',
				'胆固醇': 'cholesterol.pdb',
				'番茄红素': 'lycopene.pdb',
				'葡萄糖': 'glucose.pdb',
				'氧化铝': 'Al2O3.pdb',
				'立方烷': 'cubane.pdb',
				'铜': 'cu.pdb',
				'萤石': 'caf2.pdb',
				'食盐': 'nacl.pdb',
				'YBCO超导体': 'ybco.pdb',
				'巴基球': 'buckyball.pdb',
				'石墨': 'graphite.pdb'
			};

			// GUI参数配置对象：存储当前选中的可视化选项
			const params = {
				vizType: 2,                     // 默认可视化类型：显示原子和化学键
				molecule: 'caffeine.pdb'        // 默认分子：咖啡因
			};

			// 创建PDB加载器实例
			const loader = new PDBLoader();
			
			// 颜色精灵图映射表：缓存已着色的原子图片
			// 键：元素符号（如'H', 'O', 'C'等）
			// 值：着色后的图片DataURL
			const colorSpriteMap = {};
			
			// 基础精灵图：未着色的原子图片，将基于此图片为不同元素着色
			const baseSprite = document.createElement('img');

			/**************************************************************
			 * 初始化并启动动画
			 **************************************************************/
			
			// 调用初始化函数，设置场景、相机、渲染器等
			init();
			
			// 启动动画循环
			animate();

			/**
			 * 初始化函数 - 设置整个Three.js应用的基础架构
			 * 1. 创建相机、场景、渲染器
			 * 2. 设置控制器
			 * 3. 创建GUI
			 * 4. 绑定事件监听器
			 */
			function init() {
				
				/**********************************************************
				 * 第一部分：创建Three.js核心对象
				 **********************************************************/
				
				// 创建透视相机
				// 参数说明：
				// 70 - 视野角度（FOV），单位度，越大看到的内容越多
				// window.innerWidth / window.innerHeight - 纵横比
				// 1 - 近裁剪平面，距离相机小于1的对象不可见
				// 5000 - 远裁剪平面，距离相机大于5000的对象不可见
				camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 5000);
				
				// 设置相机初始位置：沿Z轴正方向1000个单位
				// 这意味着相机在(0,0,1000)，看向原点(0,0,0)
				camera.position.z = 1000;

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

				// 创建根对象，作为所有分子对象的父级
				// 这样可以方便地整体旋转、移动分子模型
				root = new THREE.Object3D();
				scene.add(root);

				/**********************************************************
				 * 第二部分：创建渲染器
				 **********************************************************/
				
				// 创建CSS3D渲染器
				// 注意：这是CSS3DRenderer，不是WebGLRenderer
				// 它使用CSS 3D变换来渲染对象，而不是WebGL
				renderer = new CSS3DRenderer();
				
				// 设置渲染器大小为整个窗口
				renderer.setSize(window.innerWidth, window.innerHeight);
				
				// 将渲染器的DOM元素（canvas）添加到页面的容器div中
				document.getElementById('container').appendChild(renderer.domElement);

				/**********************************************************
				 * 第三部分：创建控制器
				 **********************************************************/
				
				// 创建轨迹球控制器
				// 轨迹球控制器允许用户：
				// 1. 左键拖动：旋转场景
				// 2. 中键/滚轮拖动：平移场景
				// 3. 滚轮滚动：缩放场景
				controls = new TrackballControls(camera, renderer.domElement);
				
				// 设置旋转速度
				controls.rotateSpeed = 0.5;

				/**********************************************************
				 * 第四部分：加载基础资源并初始化分子
				 **********************************************************/
				
				// 基础精灵图加载完成后的回调函数
				baseSprite.onload = function () {
					// 基础图片加载完成后，加载默认分子
					loadMolecule(params.molecule);
				};
				
				// 设置基础精灵图的源文件路径
				// 这是一个白色的球体图片，将根据元素类型着色
				baseSprite.src = 'textures/sprites/ball.png';

				/**********************************************************
				 * 第五部分：事件监听器
				 **********************************************************/
				
				// 监听窗口大小变化事件
				// 当用户调整浏览器窗口大小时，调整相机和渲染器
				window.addEventListener('resize', onWindowResize);

				/**********************************************************
				 * 第六部分：创建GUI控制面板
				 **********************************************************/
				
				// 创建GUI实例
				const gui = new GUI();
				
				// 添加可视化类型下拉菜单
				// 参数说明：
				// params - 目标对象
				// 'vizType' - 要控制的属性名
				// VIZ_TYPE - 可选值对象
				// onChange - 值变化时的回调函数
				gui.add(params, 'vizType', VIZ_TYPE).onChange(changeVizType);
				
				// 添加分子选择下拉菜单
				gui.add(params, 'molecule', MOLECULES).onChange(loadMolecule);
				
				// 默认打开GUI面板
				gui.open();
			}

			/**
			 * 更改可视化类型的回调函数
			 * @param {number} value - 选中的可视化类型值（0, 1, 或 2）
			 */
			function changeVizType(value) {
				// 根据选择的值调用不同的显示函数
				if (value === 0) {
					// 模式0：仅显示原子
					showAtoms();
				} else if (value === 1) {
					// 模式1：仅显示化学键
					showBonds();
				} else {
					// 模式2：显示原子和化学键
					showAtomsBonds();
				}
			}

			/**
			 * 仅显示原子（隐藏所有化学键）
			 * 遍历所有objects数组，显示CSS3DSprite（原子），隐藏CSS3DObject（键）
			 */
			function showAtoms() {
				// 遍历所有创建的对象
				for (let i = 0; i < objects.length; i++) {
					const object = objects[i];
					
					// 检查对象是否为CSS3DSprite（原子）
					if (object instanceof CSS3DSprite) {
						// 显示原子
						object.element.style.display = '';  // 恢复显示
						object.visible = true;              // 设置Three.js可见性
					} else {
						// 隐藏化学键
						object.element.style.display = 'none';  // 隐藏元素
						object.visible = false;                 // 设置Three.js不可见
					}
				}
			}

			/**
			 * 仅显示化学键（隐藏所有原子）
			 * 遍历所有objects数组，隐藏CSS3DSprite（原子），显示CSS3DObject（键）
			 */
			function showBonds() {
				for (let i = 0; i < objects.length; i++) {
					const object = objects[i];
					
					if (object instanceof CSS3DSprite) {
						// 隐藏原子
						object.element.style.display = 'none';
						object.visible = false;
					} else {
						// 显示化学键，并使用完整长度（不缩短）
						object.element.style.display = '';
						object.element.style.height = object.userData.bondLengthFull;
						object.visible = true;
					}
				}
			}

			/**
			 * 同时显示原子和化学键
			 * 显示所有对象，但缩短化学键的长度以避免与原子重叠
			 */
			function showAtomsBonds() {
				for (let i = 0; i < objects.length; i++) {
					const object = objects[i];
					
					// 显示所有对象
					object.element.style.display = '';
					object.visible = true;
					
					// 如果是化学键（不是CSS3DSprite），则使用缩短的长度
					// 这样可以避免化学键与原子球体重叠
					if (!(object instanceof CSS3DSprite)) {
						object.element.style.height = object.userData.bondLengthShort;
					}
				}
			}

			/**
			 * 对Canvas图像进行着色处理
			 * 将基础白色精灵图根据指定的颜色进行着色
			 * 
			 * @param {CanvasRenderingContext2D} ctx - Canvas绘图上下文
			 * @param {number} width - 图像宽度
			 * @param {number} height - 图像高度
			 * @param {THREE.Color} color - 目标颜色（Three.js颜色对象）
			 */
			function colorify(ctx, width, height, color) {
				// 从Three.js颜色对象中提取RGB分量
				// color.r, color.g, color.b 是0到1之间的浮点数
				const r = color.r, g = color.g, b = color.b;
				
				// 获取Canvas上的图像数据
				// getImageData返回一个ImageData对象，包含像素的RGBA值
				const imageData = ctx.getImageData(0, 0, width, height);
				const data = imageData.data;  // Uint8ClampedArray，包含所有像素数据
				
				// 遍历所有像素，每个像素有4个值：R, G, B, A
				for (let i = 0, l = data.length; i < l; i += 4) {
					// 对每个颜色通道应用乘法着色
					// 原始图像是白色的（RGB值较高），乘以颜色分量后得到目标颜色
					data[i + 0] *= r;  // 红色通道
					data[i + 1] *= g;  // 绿色通道
					data[i + 2] *= b;  // 蓝色通道
					// 注意：不修改alpha通道（data[i+3]），保持透明度不变
				}
				
				// 将修改后的图像数据放回Canvas
				ctx.putImageData(imageData, 0, 0);
			}

			/**
			 * 将Image对象转换为Canvas元素
			 * 这样做是为了可以在Canvas上对图像进行像素级操作（如着色）
			 * 
			 * @param {HTMLImageElement} image - 要转换的图片元素
			 * @returns {HTMLCanvasElement} 包含图像内容的Canvas元素
			 */
			function imageToCanvas(image) {
				// 获取原始图像的尺寸
				const width = image.width;
				const height = image.height;
				
				// 创建新的Canvas元素
				const canvas = document.createElement('canvas');
				canvas.width = width;
				canvas.height = height;
				
				// 获取Canvas的2D绘图上下文
				const context = canvas.getContext('2d');
				
				// 将原始图像绘制到Canvas上
				context.drawImage(image, 0, 0, width, height);
				
				return canvas;
			}

			/**
			 * 加载并显示指定的分子模型
			 * 这是应用的核心功能，负责：
			 * 1. 加载PDB文件
			 * 2. 解析原子和键数据
			 * 3. 创建CSS3D对象表示原子和键
			 * 4. 将对象添加到场景中
			 * 
			 * @param {string} model - PDB模型文件名（如'caffeine.pdb'）
			 */
			function loadMolecule(model) {
				// 构建完整的文件URL
				const url = 'models/pdb/' + model;

				/**********************************************************
				 * 第一步：清理现有分子对象
				 **********************************************************/
				
				// 从场景中移除所有现有的分子对象
				for (let i = 0; i < objects.length; i++) {
					const object = objects[i];
					object.parent.remove(object);  // 从父对象中移除
				}
				
				// 清空对象数组，准备加载新分子
				objects.length = 0;

				/**********************************************************
				 * 第二步：加载PDB文件
				 **********************************************************/
				
				// 使用PDBLoader加载模型文件
				// loader.load(url, onLoadCallback, onProgressCallback, onErrorCallback)
				loader.load(url, function (pdb) {
					// 成功加载后的回调函数，pdb包含解析后的数据
					
					// 从PDB数据中提取几何信息
					const geometryAtoms = pdb.geometryAtoms;  // 原子位置和颜色数据
					const geometryBonds = pdb.geometryBonds;  // 化学键位置数据
					const json = pdb.json;                   // 原始解析的JSON数据
					
					/******************************************************
					 * 第三步：居中分子模型
					 ******************************************************/
					
					// 计算原子几何的包围盒（包含所有原子的最小矩形区域）
					geometryAtoms.computeBoundingBox();
					
					// 获取包围盒中心点，并取反得到偏移量
					// 这样做的目的是将分子中心移动到场景原点(0,0,0)
					geometryAtoms.boundingBox.getCenter(offset).negate();
					
					// 应用偏移量，将原子几何居中
					geometryAtoms.translate(offset.x, offset.y, offset.z);
					
					// 同样偏移化学键几何，使其与原子对齐
					geometryBonds.translate(offset.x, offset.y, offset.z);

					/******************************************************
					 * 第四步：创建原子对象（CSS3DSprite）
					 ******************************************************/
					
					// 获取原子位置和颜色缓冲区数据
					const positionAtoms = geometryAtoms.getAttribute('position');
					const colorAtoms = geometryAtoms.getAttribute('color');
					
					// 创建临时变量用于读取缓冲区数据
					const position = new THREE.Vector3();
					const color = new THREE.Color();
					
					// 遍历所有原子
					for (let i = 0; i < positionAtoms.count; i++) {
						// 从缓冲区读取第i个原子的位置和颜色
						position.fromBufferAttribute(positionAtoms, i);
						color.fromBufferAttribute(colorAtoms, i);
						
						// 获取原子的JSON数据
						const atomJSON = json.atoms[i];
						const element = atomJSON[4];  // 元素符号，如'H', 'C', 'O'等
						
						/**************************************************
						 * 原子精灵图着色和缓存
						 **************************************************/
						
						// 检查是否已为该元素创建着色精灵图
						if (!colorSpriteMap[element]) {
							// 如果尚未缓存，则创建并缓存
							
							// 将基础白色精灵图转换为Canvas
							const canvas = imageToCanvas(baseSprite);
							const context = canvas.getContext('2d');
							
							// 对Canvas图像进行着色
							colorify(context, canvas.width, canvas.height, color);
							
							// 将Canvas转换为DataURL（base64编码的图片数据）
							const dataUrl = canvas.toDataURL();
							
							// 缓存到映射表中
							colorSpriteMap[element] = dataUrl;
						}
						
						// 获取该元素的着色精灵图DataURL
						const colorSprite = colorSpriteMap[element];
						
						/**************************************************
						 * 创建原子DOM元素和CSS3DSprite
						 **************************************************/
						
						// 创建img元素作为原子的视觉表示
						const atom = document.createElement('img');
						atom.src = colorSprite;  // 设置着色后的图片
						
						// 创建CSS3DSprite对象
						// CSS3DSprite始终面向相机（类似公告牌效果）
						const object = new CSS3DSprite(atom);
						
						// 设置原子位置
						object.position.copy(position);
						object.position.multiplyScalar(75);  // 缩放因子，使分子可见
						
						// 禁用自动矩阵更新（提高性能）
						object.matrixAutoUpdate = false;
						object.updateMatrix();  // 手动更新矩阵
						
						// 将原子添加到根对象
						root.add(object);
						
						// 将对象添加到全局数组以便管理
						objects.push(object);
					}

					/******************************************************
					 * 第五步：创建化学键对象（CSS3DObject）
					 ******************************************************/
					
					// 获取化学键位置数据
					// 注意：化学键位置数据中，每两个点定义一个键（起点和终点）
					const positionBonds = geometryBonds.getAttribute('position');
					
					// 创建临时向量用于计算
					const start = new THREE.Vector3();
					const end = new THREE.Vector3();
					
					// 遍历所有化学键（每次循环处理一个键，i增加2）
					for (let i = 0; i < positionBonds.count; i += 2) {
						// 读取键的起点和终点
						start.fromBufferAttribute(positionBonds, i);
						end.fromBufferAttribute(positionBonds, i + 1);
						
						// 应用与原子相同的缩放
						start.multiplyScalar(75);
						end.multiplyScalar(75);
						
						// 计算向量差和键长
						tmpVec1.subVectors(end, start);  // 终点减去起点，得到方向向量
						const bondLength = tmpVec1.length() - 50;  // 减去50以缩短键长
						
						/**************************************************
						 * 创建第一个键对象（主要方向）
						 **************************************************/
						
						// 创建表示化学键的div元素
						let bond = document.createElement('div');
						bond.className = 'bond';  // 应用CSS样式
						bond.style.height = bondLength + 'px';  // 动态设置高度
						
						// 创建CSS3DObject（不是Sprite，因为它不需要始终面向相机）
						let object = new CSS3DObject(bond);
						
						// 设置键的位置：位于起点和终点的中点
						object.position.copy(start);
						object.position.lerp(end, 0.5);  // 线性插值：从start到end的50%处
						
						// 存储键长信息到userData中
						// bondLengthShort：缩短的键长（用于原子+键模式）
						// bondLengthFull：完整键长（用于仅显示键模式）
						object.userData.bondLengthShort = bondLength + 'px';
						object.userData.bondLengthFull = (bondLength + 55) + 'px';
						
						/**************************************************
						 * 计算键的旋转
						 **************************************************/
						
						// 计算旋转轴：Y轴(0,1,0)与键方向向量的叉积
						// 叉积结果是一个垂直于两个向量的向量
						const axis = tmpVec2.set(0, 1, 0).cross(tmpVec1);
						
						// 计算旋转角度：Y轴与键方向向量之间的夹角
						const radians = Math.acos(
							tmpVec3.set(0, 1, 0).dot(
								tmpVec4.copy(tmpVec1).normalize()  // 归一化的键方向向量
							)
						);
						
						// 创建旋转矩阵：绕轴axis旋转radians弧度
						const objMatrix = new THREE.Matrix4().makeRotationAxis(axis.normalize(), radians);
						
						// 应用旋转矩阵到对象
						object.matrix.copy(objMatrix);
						object.quaternion.setFromRotationMatrix(object.matrix);
						
						// 禁用自动矩阵更新
						object.matrixAutoUpdate = false;
						object.updateMatrix();
						
						// 将键添加到根对象
						root.add(object);
						
						// 添加到全局对象数组
						objects.push(object);
						
						/**************************************************
						 * 创建第二个键对象（交叉方向，形成圆柱效果）
						 **************************************************/
						
						// 创建一个"关节"对象作为第二个键的父级
						const joint = new THREE.Object3D();
						
						// 设置关节位置：同样位于键的中点
						joint.position.copy(start);
						joint.position.lerp(end, 0.5);
						
						// 应用相同的旋转
						joint.matrix.copy(objMatrix);
						joint.quaternion.setFromRotationMatrix(joint.matrix);
						
						// 禁用自动矩阵更新
						joint.matrixAutoUpdate = false;
						joint.updateMatrix();
						
						// 创建第二个键的div元素
						bond = document.createElement('div');
						bond.className = 'bond';
						bond.style.height = bondLength + 'px';
						
						// 创建第二个CSS3DObject
						object = new CSS3DObject(bond);
						
						// 将第二个键绕Y轴旋转90度
						// 这样两个交叉的div就形成了一个圆柱的视觉效果
						object.rotation.y = Math.PI / 2;
						
						// 禁用自动矩阵更新
						object.matrixAutoUpdate = false;
						object.updateMatrix();
						
						// 存储键长信息
						object.userData.bondLengthShort = bondLength + 'px';
						object.userData.bondLengthFull = (bondLength + 55) + 'px';
						
						// 将关节对象存储在userData中，以便后续引用
						object.userData.joint = joint;
						
						// 将第二个键添加为关节的子对象
						joint.add(object);
						
						// 将关节添加到根对象
						root.add(joint);
						
						// 将第二个键添加到全局对象数组
						objects.push(object);
					}

					/******************************************************
					 * 第六步：根据当前设置更新显示
					 ******************************************************/
					
					// 根据GUI中选择的可视化类型更新显示
					changeVizType(params.vizType);
				});
			}

			/**
			 * 窗口大小变化事件处理函数
			 * 当浏览器窗口大小改变时，调整相机和渲染器以适应新尺寸
			 */
			function onWindowResize() {
				// 更新相机的纵横比
				camera.aspect = window.innerWidth / window.innerHeight;
				
				// 必须调用updateProjectionMatrix()使纵横比更改生效
				camera.updateProjectionMatrix();
				
				// 更新渲染器大小
				renderer.setSize(window.innerWidth, window.innerHeight);
			}

			/**
			 * 动画循环函数
			 * 这是Three.js应用的核心循环，每秒调用约60次
			 * 负责：
			 * 1. 更新控制器
			 * 2. 更新场景中的对象
			 * 3. 渲染场景
			 */
			function animate() {
				// 请求下一帧动画，创建循环
				// requestAnimationFrame是浏览器提供的API，用于高效动画
				requestAnimationFrame(animate);
				
				// 更新控制器（处理用户输入）
				controls.update();
				
				// 计算基于时间的旋转角度
				// Date.now()返回当前时间戳（毫秒）
				// 乘以0.0004得到缓慢变化的时间值
				const time = Date.now() * 0.0004;
				
				// 设置根对象的旋转，使分子缓慢自转
				root.rotation.x = time;      // 绕X轴旋转
				root.rotation.y = time * 0.7; // 绕Y轴旋转，速度稍慢
				
				// 调用渲染函数
				render();
			}

			/**
			 * 渲染函数
			 * 调用渲染器将3D场景绘制到2D屏幕上
			 */
			function render() {
				renderer.render(scene, camera);
			}

		</script>
	</body>
</html>