<!-- Three.js CSS3D 元素周期表 - 功能与技术详解
一、核心功能概述
1. 3D交互式元素周期表可视化
这是一个使用Three.js创建的交互式3D元素周期表，将传统的二维化学元素周期表转换为动态的三维可视化体验。用户可以通过多种方式探索118个化学元素的分布和排列。

2. 四种布局模式切换
项目实现了四种不同的3D布局模式：

📋 表格布局：传统的二维周期表布局，按周期和族排列

⚪ 球体布局：元素均匀分布在一个球体表面上

🌀 螺旋布局：元素沿着一条螺旋线排列

🔳 网格布局：元素在三维网格中整齐排列

3. 交互式控制
相机控制：鼠标拖拽旋转、滚轮缩放、右键平移

平滑过渡：布局切换时有平滑的动画效果

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

视觉反馈：元素悬停时的高亮效果

二、主要技术点详解
1. Three.js 3D图形库
CSS3DRenderer：核心创新点，将HTML/CSS元素渲染为3D对象

使用真实的DOM元素而非WebGL纹理

可以应用CSS所有样式和动画

渲染文本清晰度高，不受分辨率限制

场景图架构：Three.js的标准场景-相机-渲染器架构

坐标系系统：使用右手坐标系，Y轴向上

2. CSS3D技术栈
javascript
// CSS3D核心组件
import { CSS3DRenderer, CSS3DObject } from 'three/addons/renderers/CSS3DRenderer.js';

// 将HTML元素转换为3D对象
const element = document.createElement('div');
const objectCSS = new CSS3DObject(element); // 关键转换
技术特点：

混合渲染：将3D变换(transform)应用到HTML元素

保留CSS能力：元素保持所有CSS样式能力

DOM元素渲染：渲染的是真实的DOM而非纹理

3. 数学计算与坐标系统
球面坐标系统（用于球体布局）
javascript
// 球面坐标转换
const phi = Math.acos(-1 + (2 * i) / l);    // 极角 φ
const theta = Math.sqrt(l * Math.PI) * phi; // 方位角 θ
object.position.setFromSphericalCoords(800, phi, theta);
参数计算：使用黄金角度近似确保元素均匀分布

朝向计算：每个元素朝向球心，保持文字可读

柱面坐标系统（用于螺旋布局）
javascript
// 柱面坐标转换
object.position.setFromCylindricalCoords(900, theta, y);
3D网格布局算法
javascript
// 三维网格位置计算
object.position.x = ((i % 5) * 400) - 800;                    // X轴：5列网格
object.position.y = (-(Math.floor(i / 5) % 5) * 400) + 800;  // Y轴：5行网格
object.position.z = (Math.floor(i / 25)) * 1000 - 2000;      // Z轴：每25个元素一层
4. 动画系统
TWEEN.js补间动画库：实现平滑的位置和旋转过渡

缓动函数：使用Exponential.InOut实现自然的加速减速效果

随机化持续时间：避免所有元素同时移动的机械感

javascript
// 动画实现代码
new TWEEN.Tween(object.position)
  .to(target.position, Math.random() * duration + duration)
  .easing(TWEEN.Easing.Exponential.InOut)
  .start();
5. 交互控制
TrackballControls轨道控制器：提供自然的3D导航体验

事件监听系统：按钮点击、窗口调整、控制器变化等

响应式处理：窗口大小变化时自动调整相机和渲染器

6. 数据组织与渲染
javascript
// 数据扁平化存储结构
// [符号, 名称, 原子量, 列位置, 行位置]
const table = ['H', 'Hydrogen', '1.00794', 1, 1, ...];
7. CSS3D样式与渲染优化
分层渲染：使用box-shadow和border创建3D层次感

发光效果：text-shadow实现元素符号的光晕

透明度控制：rgba颜色实现半透明效果

绝对定位：CSS绝对定位实现卡片内部元素布局

三、架构设计亮点
1. 模块化设计
javascript
// ES6模块化导入
import * as THREE from 'three';
import { CSS3DRenderer, CSS3DObject } from 'three/addons/...';
import TWEEN from 'three/addons/libs/tween.module.js';
2. 状态管理
对象数组：存储所有CSS3D对象实例

目标位置字典：四种布局的预计算目标位置

相机控制器：管理用户交互状态

3. 渲染流程
初始化阶段：创建场景、相机、渲染器、控制器

数据准备阶段：创建HTML元素并转换为CSS3D对象

布局计算阶段：预先计算四种布局的目标位置

动画循环阶段：持续更新动画和渲染

交互响应阶段：处理用户输入和布局切换

4. 性能优化
预计算布局：所有目标位置预先计算，运行时无需重复计算

高效DOM操作：使用CSS3D而非频繁的DOM操作

智能渲染：仅在需要时调用渲染函数

四、技术挑战与解决方案
1. 挑战：HTML元素在3D空间中的渲染
解决方案：使用CSS3DRenderer将CSS 3D变换应用到DOM元素

2. 挑战：元素均匀分布算法
解决方案：

球体布局：使用Fibonacci球面采样算法

螺旋布局：使用等角度递增的柱面坐标

3. 挑战：平滑动画过渡
解决方案：结合TWEEN.js的补间动画和指数缓动函数

4. 挑战：3D交互控制
解决方案：使用TrackballControls提供直观的相机控制 -->


<!DOCTYPE html>
<html>
	<head>
		<!-- 页面标题：显示为"Three.js CSS3D 元素周期表" -->
		<title>Three.js CSS3D 元素周期表</title>
		<!-- 字符编码：设置为UTF-8以支持中文显示 -->
		<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>
			/* 全局链接样式：设置为浅青色(#8ff)，与主题色保持一致 */
			a {
				color: #8ff;
			}

			/* 
			 * 菜单容器样式
			 * 作用：将布局切换按钮固定在页面底部中央
			 * position: absolute; 绝对定位，相对于最近的已定位祖先元素
			 * bottom: 20px; 距离底部20像素
			 * width: 100%; 宽度占满整个视口宽度
			 * text-align: center; 内部文本（按钮）居中对齐
			 */
			#menu {
				position: absolute;
				bottom: 20px;
				width: 100%;
				text-align: center;
			}

			/* 
			 * 元素卡片容器样式
			 * 每个化学元素都显示在一个这样的卡片容器中
			 * width: 120px; 卡片宽度为120像素
			 * height: 160px; 卡片高度为160像素，长宽比约3:4
			 * box-shadow: 添加青色发光阴影效果，rgba(0,255,255,0.5)表示半透明的青色
			 * border: 1px实线边框，半透明青色，与阴影形成层次感
			 * font-family: 使用Helvetica字体，无衬线字体更现代
			 * text-align: center; 内部文本居中对齐
			 * line-height: normal; 使用正常的行高
			 * cursor: default; 鼠标悬停时显示默认箭头光标
			 */
			.element {
				width: 120px;
				height: 160px;
				box-shadow: 0px 0px 12px rgba(0,255,255,0.5);
				border: 1px solid rgba(127,255,255,0.25);
				font-family: Helvetica, sans-serif;
				text-align: center;
				line-height: normal;
				cursor: default;
			}

			/* 
			 * 元素卡片悬停效果
			 * 当鼠标悬停在元素卡片上时，增强阴影和边框的视觉效果
			 * box-shadow: 阴影变得更亮，透明度从0.5增加到0.75
			 * border: 边框变得更亮，透明度从0.25增加到0.75
			 * 这些变化创建了交互反馈，让用户知道卡片是可交互的
			 */
			.element:hover {
				box-shadow: 0px 0px 12px rgba(0,255,255,0.75);
				border: 1px solid rgba(127,255,255,0.75);
			}

			/* 
			 * 原子序数样式
			 * 原子序数显示在卡片的右上角
			 * position: absolute; 绝对定位，相对于.element容器
			 * top: 20px; 距离顶部20像素
			 * right: 20px; 距离右侧20像素
			 * font-size: 12px; 较小的字体大小
			 * color: 使用半透明的青色(rgba中的0.75表示75%不透明度)
			 */
			.element .number {
				position: absolute;
				top: 20px;
				right: 20px;
				font-size: 12px;
				color: rgba(127,255,255,0.75);
			}

			/* 
			 * 元素符号样式
			 * 元素符号（如"H"、"He"）显示在卡片中央
			 * position: absolute; 绝对定位
			 * top: 40px; 距离顶部40像素（留出原子序数的空间）
			 * left: 0px; right: 0px; 左右都为0，使元素水平居中
			 * font-size: 60px; 非常大的字体大小，突出显示
			 * font-weight: bold; 粗体字，更加醒目
			 * color: 半透明白色，与青色背景形成对比
			 * text-shadow: 文字阴影，创建发光效果，增强3D感
			 */
			.element .symbol {
				position: absolute;
				top: 40px;
				left: 0px;
				right: 0px;
				font-size: 60px;
				font-weight: bold;
				color: rgba(255,255,255,0.75);
				text-shadow: 0 0 10px rgba(0,255,255,0.95);
			}

			/* 
			 * 详细信息样式
			 * 元素名称和原子量显示在卡片底部
			 * position: absolute; 绝对定位
			 * bottom: 15px; 距离底部15像素
			 * left: 0px; right: 0px; 左右都为0，使内容水平居中
			 * font-size: 12px; 较小的字体大小
			 * color: 半透明青色，与原子序数颜色一致
			 */
			.element .details {
				position: absolute;
				bottom: 15px;
				left: 0px;
				right: 0px;
				font-size: 12px;
				color: rgba(127,255,255,0.75);
			}

			/* 
			 * 按钮基本样式
			 * 用于布局切换按钮
			 * color: 按钮文字颜色为半透明青色
			 * background: transparent; 透明背景，与页面整体设计协调
			 * outline: 1px实线边框作为按钮轮廓
			 * border: 0px; 移除默认按钮边框
			 * padding: 5px 10px; 内边距，上下5px，左右10px，增加按钮大小
			 * cursor: pointer; 鼠标悬停时显示手型光标，表明可点击
			 */
			button {
				color: rgba(127,255,255,0.75);
				background: transparent;
				outline: 1px solid rgba(127,255,255,0.75);
				border: 0px;
				padding: 5px 10px;
				cursor: pointer;
			}

			/* 
			 * 按钮悬停效果
			 * 当鼠标悬停在按钮上时，添加半透明青色背景
			 * 提供视觉反馈，表明按钮可以被点击
			 */
			button:hover {
				background-color: rgba(0,255,255,0.5);
			}

			/* 
			 * 按钮激活（按下）效果
			 * 当按钮被点击时，改变文字颜色和背景色
			 * color: #000000; 文字变为黑色，与背景形成高对比度
			 * background-color: 背景变为更深的青色，表示按钮被激活
			 */
			button:active {
				color: #000000;
				background-color: rgba(0,255,255,0.75);
			}
		</style>
	</head>
	<body>

		<!-- 
		 * 页面信息显示区域
		 * 显示项目信息和技术来源
		 * 内容修改为中文："基于three.js的CSS3D元素周期表演示"
		 * 包含指向three.js官网的链接
		 -->
		<div id="info">基于<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a>的CSS3D元素周期表演示</div>
		
		<!-- 
		 * 3D渲染容器
		 * CSS3DRenderer会将3D场景渲染到这个div中
		 * 这是一个空的容器，JavaScript代码会动态添加canvas元素
		 -->
		<div id="container"></div>
		
		<!-- 
		 * 布局切换菜单
		 * 包含四个按钮，用于在不同布局之间切换
		 * 每个按钮都有对应的id，用于JavaScript事件绑定
		 -->
		<div id="menu">
			<button id="table">表格布局</button>
			<button id="sphere">球体布局</button>
			<button id="helix">螺旋布局</button>
			<button id="grid">网格布局</button>
		</div>

		<!-- 
		 * ES6模块导入映射配置
		 * 告诉浏览器在哪里找到导入的模块
		 * 当JavaScript中使用import语句时，浏览器会根据这个映射找到对应的文件
		 * "three": "../build/three.module.js" - Three.js主库路径
		 * "three/addons/": "./jsm/" - Three.js附加组件路径
		 */
		-->
		<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.js的所有导出作为一个名为THREE的对象导入
			import * as THREE from 'three';

			// 导入动画补间库TWEEN
			// 用于创建平滑的动画过渡效果
			import TWEEN from 'three/addons/libs/tween.module.js';
			
			// 导入轨道控制器TrackballControls
			// 允许用户通过鼠标拖拽、滚轮缩放来交互式地控制3D场景
			import { TrackballControls } from 'three/addons/controls/TrackballControls.js';
			
			// 导入CSS3D渲染器和CSS3D对象
			// CSS3DRenderer: 将HTML/CSS元素渲染为3D对象的特殊渲染器
			// CSS3DObject: 将普通的HTML元素包装为可以在3D空间中操作的对象
			import { CSS3DRenderer, CSS3DObject } from 'three/addons/renderers/CSS3DRenderer.js';

			/* 
			 * 元素周期表数据数组
			 * 这是一个扁平化的数组，每5个元素为一组，表示一个化学元素的信息
			 * 数据格式：[元素符号, 元素名称, 原子量, 列位置, 行位置]
			 * 例如：第一组 ['H', 'Hydrogen', '1.00794', 1, 1] 表示：
			 *   - 元素符号: H
			 *   - 元素名称: Hydrogen
			 *   - 原子量: 1.00794
			 *   - 在周期表中的列位置: 第1列
			 *   - 在周期表中的行位置: 第1行
			 * 数组总共有118个元素（现代周期表的全部元素）
			 */
			const table = [
				'H', 'Hydrogen', '1.00794', 1, 1,      // 氢，第1列第1行
				'He', 'Helium', '4.002602', 18, 1,
				'Li', 'Lithium', '6.941', 1, 2,
				'Be', 'Beryllium', '9.012182', 2, 2,
				'B', 'Boron', '10.811', 13, 2,
				'C', 'Carbon', '12.0107', 14, 2,
				'N', 'Nitrogen', '14.0067', 15, 2,
				'O', 'Oxygen', '15.9994', 16, 2,
				'F', 'Fluorine', '18.9984032', 17, 2,
				'Ne', 'Neon', '20.1797', 18, 2,
				'Na', 'Sodium', '22.98976...', 1, 3,
				'Mg', 'Magnesium', '24.305', 2, 3,
				'Al', 'Aluminium', '26.9815386', 13, 3,
				'Si', 'Silicon', '28.0855', 14, 3,
				'P', 'Phosphorus', '30.973762', 15, 3,
				'S', 'Sulfur', '32.065', 16, 3,
				'Cl', 'Chlorine', '35.453', 17, 3,
				'Ar', 'Argon', '39.948', 18, 3,
				'K', 'Potassium', '39.948', 1, 4,
				'Ca', 'Calcium', '40.078', 2, 4,
				'Sc', 'Scandium', '44.955912', 3, 4,
				'Ti', 'Titanium', '47.867', 4, 4,
				'V', 'Vanadium', '50.9415', 5, 4,
				'Cr', 'Chromium', '51.9961', 6, 4,
				'Mn', 'Manganese', '54.938045', 7, 4,
				'Fe', 'Iron', '55.845', 8, 4,
				'Co', 'Cobalt', '58.933195', 9, 4,
				'Ni', 'Nickel', '58.6934', 10, 4,
				'Cu', 'Copper', '63.546', 11, 4,
				'Zn', 'Zinc', '65.38', 12, 4,
				'Ga', 'Gallium', '69.723', 13, 4,
				'Ge', 'Germanium', '72.63', 14, 4,
				'As', 'Arsenic', '74.9216', 15, 4,
				'Se', 'Selenium', '78.96', 16, 4,
				'Br', 'Bromine', '79.904', 17, 4,
				'Kr', 'Krypton', '83.798', 18, 4,
				'Rb', 'Rubidium', '85.4678', 1, 5,
				'Sr', 'Strontium', '87.62', 2, 5,
				'Y', 'Yttrium', '88.90585', 3, 5,
				'Zr', 'Zirconium', '91.224', 4, 5,
				'Nb', 'Niobium', '92.90628', 5, 5,
				'Mo', 'Molybdenum', '95.96', 6, 5,
				'Tc', 'Technetium', '(98)', 7, 5,
				'Ru', 'Ruthenium', '101.07', 8, 5,
				'Rh', 'Rhodium', '102.9055', 9, 5,
				'Pd', 'Palladium', '106.42', 10, 5,
				'Ag', 'Silver', '107.8682', 11, 5,
				'Cd', 'Cadmium', '112.411', 12, 5,
				'In', 'Indium', '114.818', 13, 5,
				'Sn', 'Tin', '118.71', 14, 5,
				'Sb', 'Antimony', '121.76', 15, 5,
				'Te', 'Tellurium', '127.6', 16, 5,
				'I', 'Iodine', '126.90447', 17, 5,
				'Xe', 'Xenon', '131.293', 18, 5,
				'Cs', 'Caesium', '132.9054', 1, 6,
				'Ba', 'Barium', '132.9054', 2, 6,
				'La', 'Lanthanum', '138.90547', 4, 9,
				'Ce', 'Cerium', '140.116', 5, 9,
				'Pr', 'Praseodymium', '140.90765', 6, 9,
				'Nd', 'Neodymium', '144.242', 7, 9,
				'Pm', 'Promethium', '(145)', 8, 9,
				'Sm', 'Samarium', '150.36', 9, 9,
				'Eu', 'Europium', '151.964', 10, 9,
				'Gd', 'Gadolinium', '157.25', 11, 9,
				'Tb', 'Terbium', '158.92535', 12, 9,
				'Dy', 'Dysprosium', '162.5', 13, 9,
				'Ho', 'Holmium', '164.93032', 14, 9,
				'Er', 'Erbium', '167.259', 15, 9,
				'Tm', 'Thulium', '168.93421', 16, 9,
				'Yb', 'Ytterbium', '173.054', 17, 9,
				'Lu', 'Lutetium', '174.9668', 18, 9,
				'Hf', 'Hafnium', '178.49', 4, 6,
				'Ta', 'Tantalum', '180.94788', 5, 6,
				'W', 'Tungsten', '183.84', 6, 6,
				'Re', 'Rhenium', '186.207', 7, 6,
				'Os', 'Osmium', '190.23', 8, 6,
				'Ir', 'Iridium', '192.217', 9, 6,
				'Pt', 'Platinum', '195.084', 10, 6,
				'Au', 'Gold', '196.966569', 11, 6,
				'Hg', 'Mercury', '200.59', 12, 6,
				'Tl', 'Thallium', '204.3833', 13, 6,
				'Pb', 'Lead', '207.2', 14, 6,
				'Bi', 'Bismuth', '208.9804', 15, 6,
				'Po', 'Polonium', '(209)', 16, 6,
				'At', 'Astatine', '(210)', 17, 6,
				'Rn', 'Radon', '(222)', 18, 6,
				'Fr', 'Francium', '(223)', 1, 7,
				'Ra', 'Radium', '(226)', 2, 7,
				'Ac', 'Actinium', '(227)', 4, 10,
				'Th', 'Thorium', '232.03806', 5, 10,
				'Pa', 'Protactinium', '231.0588', 6, 10,
				'U', 'Uranium', '238.02891', 7, 10,
				'Np', 'Neptunium', '(237)', 8, 10,
				'Pu', 'Plutonium', '(244)', 9, 10,
				'Am', 'Americium', '(243)', 10, 10,
				'Cm', 'Curium', '(247)', 11, 10,
				'Bk', 'Berkelium', '(247)', 12, 10,
				'Cf', 'Californium', '(251)', 13, 10,
				'Es', 'Einstenium', '(252)', 14, 10,
				'Fm', 'Fermium', '(257)', 15, 10,
				'Md', 'Mendelevium', '(258)', 16, 10,
				'No', 'Nobelium', '(259)', 17, 10,
				'Lr', 'Lawrencium', '(262)', 18, 10,
				'Rf', 'Rutherfordium', '(267)', 4, 7,
				'Db', 'Dubnium', '(268)', 5, 7,
				'Sg', 'Seaborgium', '(271)', 6, 7,
				'Bh', 'Bohrium', '(272)', 7, 7,
				'Hs', 'Hassium', '(270)', 8, 7,
				'Mt', 'Meitnerium', '(276)', 9, 7,
				'Ds', 'Darmstadium', '(281)', 10, 7,
				'Rg', 'Roentgenium', '(280)', 11, 7,
				'Cn', 'Copernicium', '(285)', 12, 7,
				'Nh', 'Nihonium', '(286)', 13, 7,
				'Fl', 'Flerovium', '(289)', 14, 7,
				'Mc', 'Moscovium', '(290)', 15, 7,
				'Lv', 'Livermorium', '(293)', 16, 7,
				'Ts', 'Tennessine', '(294)', 17, 7,
				'Og', 'Oganesson', '(294)', 18, 7
			];

			// 全局变量声明
			let camera, scene, renderer;     // Three.js三大核心对象：相机、场景、渲染器
			let controls;                    // 相机控制器，用于用户交互控制视角
			
			// 存储所有CSS3D对象的数组，每个对象对应一个化学元素卡片
			const objects = [];
			
			// 存储不同布局的目标位置
			// 这是一个对象，包含四个数组，分别对应四种布局的目标位置
			const targets = {
				table: [],   // 传统周期表布局的目标位置
				sphere: [],  // 球体布局的目标位置
				helix: [],   // 螺旋布局的目标位置
				grid: []     // 网格布局的目标位置
			};

			/* 
			 * 应用初始化入口
			 * 首先调用init()函数初始化所有资源
			 * 然后调用animate()函数启动动画循环
			 */
			init();
			animate();

			/**
			 * 初始化函数 - 设置Three.js场景的核心组件
			 * 作用：创建相机、场景、渲染器，初始化所有化学元素，设置事件监听器
			 * 这是整个应用最复杂的函数，包含了大部分的设置代码
			 */
			function init() {

				/* 
				 * 创建透视相机
				 * 参数说明：
				 *   - 40: 视野角度(FOV)，单位是度，较小的值产生类似望远镜的效果，较大的值产生广角效果
				 *   - window.innerWidth / window.innerHeight: 宽高比，设置为窗口的宽高比
				 *   - 1: 近裁剪面，距离相机小于1单位的物体不会被渲染
				 *   - 10000: 远裁剪面，距离相机大于10000单位的物体不会被渲染
				 * 透视相机模拟人眼的视觉效果，远处的物体看起来更小
				 */
				camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 10000);
				camera.position.z = 3000;  // 将相机沿着Z轴向后移动3000单位，以便看到整个场景

				// 创建场景对象，所有3D对象（网格、灯光、相机等）都会被添加到场景中
				scene = new THREE.Scene();

				// ================== 创建传统周期表布局(TABLE) ==================
				// 遍历元素周期表数据，为每个元素创建HTML元素和3D对象
				for (let i = 0; i < table.length; i += 5) {

					/* 
					 * 创建HTML元素容器
					 * 这个div将显示为化学元素卡片
					 * 它包含原子序数、元素符号和详细信息
					 */
					const element = document.createElement('div');
					element.className = 'element';  // 应用CSS类名
					
					/* 
					 * 设置随机背景色
					 * 使用rgba颜色模式：红色0，绿色127，蓝色127，构成青色系
					 * 透明度：Math.random() * 0.5 + 0.25 生成0.25到0.75之间的随机值
					 * 这样每个元素卡片都有略微不同的透明度，增加视觉丰富度
					 */
					element.style.backgroundColor = 'rgba(0,127,127,' + (Math.random() * 0.5 + 0.25) + ')';

					// 创建原子序数显示元素
					const number = document.createElement('div');
					number.className = 'number';  // 应用CSS类名
					number.textContent = (i / 5) + 1;  // 计算原子序数：(索引/5)+1
					element.appendChild(number);  // 将原子序数元素添加到卡片容器

					// 创建元素符号显示元素
					const symbol = document.createElement('div');
					symbol.className = 'symbol';  // 应用CSS类名
					symbol.textContent = table[i];  // 从数组中获取元素符号
					element.appendChild(symbol);  // 将符号元素添加到卡片容器

					// 创建详细信息显示元素（包含元素名称和原子量）
					const details = document.createElement('div');
					details.className = 'details';  // 应用CSS类名
					// 使用innerHTML设置内容，包含换行<br>标签
					details.innerHTML = table[i + 1] + '<br>' + table[i + 2];
					element.appendChild(details);  // 将详细信息元素添加到卡片容器

					/* 
					 * 将HTML元素包装为CSS3DObject
					 * CSS3DObject是一个特殊的Three.js对象，它允许将HTML元素放置在3D空间中
					 * 参数element是刚刚创建的div元素
					 */
					const objectCSS = new CSS3DObject(element);
					
					/* 
					 * 设置元素的随机初始位置
					 * 这样在动画开始时，所有元素都随机分布在3D空间中
					 * Math.random() * 4000 - 2000 生成-2000到2000之间的随机数
					 * 这个范围足够大，让元素分散在场景中
					 */
					objectCSS.position.x = Math.random() * 4000 - 2000;  // X轴位置
					objectCSS.position.y = Math.random() * 4000 - 2000;  // Y轴位置
					objectCSS.position.z = Math.random() * 4000 - 2000;  // Z轴位置
					
					scene.add(objectCSS);  // 将CSS3D对象添加到场景中
					objects.push(objectCSS);  // 将对象存储到全局数组中，便于后续访问

					/* 
					 * 为TABLE布局创建目标位置
					 * 这是元素在传统周期表布局中应该到达的最终位置
					 */
					const object = new THREE.Object3D();  // 创建一个空的3D对象，仅用于存储位置信息
					
					/* 
					 * 计算TABLE布局中的位置：
					 *  - X坐标：(列位置 * 140) - 1330
					 *    140是列间距，-1330是偏移量，使整个表格水平居中
					 *  - Y坐标：-(行位置 * 180) + 990
					 *    负号是因为屏幕坐标系Y轴向下为正，我们需要Y轴向上为正
					 *    180是行间距，+990是偏移量，使整个表格垂直居中
					 * 这些常数是通过实验调整得到的，以便周期表在屏幕上居中显示
					 */
					object.position.x = (table[i + 3] * 140) - 1330;  // 计算X位置
					object.position.y = -(table[i + 4] * 180) + 990;  // 计算Y位置
					
					targets.table.push(object);  // 将目标位置存储到table目标数组中
				}

				// ================== 创建球体布局(SPHERE)的目标位置 ==================
				const vector = new THREE.Vector3();  // 创建一个临时向量，用于计算朝向

				/* 
				 * 球体布局：将所有元素均匀分布在一个球体表面上
				 * 这是通过球面坐标系统实现的
				 */
				for (let i = 0, l = objects.length; i < l; i++) {

					/* 
					 * 计算球面坐标：
					 * 球面坐标用三个参数表示一个点：半径r、极角φ(phi)、方位角θ(theta)
					 * 
					 * 极角φ：Math.acos(-1 + (2 * i) / l)
					 *  - acos是反余弦函数
					 *  - -1 + (2 * i) / l 生成从-1到1均匀分布的值
					 *  - 这样φ会从π（顶部）到0（底部）变化，使元素均匀分布在球面上
					 * 
					 * 方位角θ：Math.sqrt(l * Math.PI) * φ
					 *  - 使用黄金角度近似值，确保元素在球面上均匀分布，没有明显的聚集
					 *  - Math.sqrt(l * Math.PI)是一个缩放因子
					 */
					const phi = Math.acos(-1 + (2 * i) / l);    // 极角
					const theta = Math.sqrt(l * Math.PI) * phi; // 方位角

					const object = new THREE.Object3D();  // 创建目标位置对象

					/* 
					 * 将球面坐标转换为笛卡尔坐标（直角坐标）
					 * setFromSphericalCoords参数：半径、φ、θ
					 * 半径设置为800，这决定了球体的大小
					 */
					object.position.setFromSphericalCoords(800, phi, theta);

					/* 
					 * 计算元素的朝向
					 * 让每个元素都朝向球心，这样文字都是面向相机的
					 * 1. 复制当前位置到vector：vector.copy(object.position)
					 * 2. 乘以2：vector.multiplyScalar(2)，得到球心相反方向的一个点
					 * 3. object.lookAt(vector)：让元素朝向这个点，即朝向球心
					 */
					vector.copy(object.position).multiplyScalar(2);
					object.lookAt(vector);

					targets.sphere.push(object);  // 将目标位置存储到sphere目标数组中
				}

				// ================== 创建螺旋布局(HELIX)的目标位置 ==================
				/* 
				 * 螺旋布局：元素沿着一条螺旋线排列
				 * 类似于DNA的双螺旋结构，但这里是单螺旋
				 */
				for (let i = 0, l = objects.length; i < l; i++) {

					/* 
					 * 螺旋参数计算：
					 *  - theta: 角度参数，i * 0.175 + Math.PI
					 *     0.175是角度增量，控制螺旋的紧密程度
					 *     Math.PI是初始角度偏移
					 *  - y: 垂直位置，-(i * 8) + 450
					 *     -8是每个元素下降的高度，控制螺旋的高度
					 *     +450是初始高度偏移
					 */
					const theta = i * 0.175 + Math.PI;  // 角度（弧度制）
					const y = -(i * 8) + 450;           // 垂直位置

					const object = new THREE.Object3D();  // 创建目标位置对象

					/* 
					 * 将柱面坐标转换为笛卡尔坐标
					 * 柱面坐标：用半径、角度和高度表示一个点
					 * setFromCylindricalCoords参数：半径、角度、高度
					 * 半径设置为900，这决定了螺旋的宽度
					 */
					object.position.setFromCylindricalCoords(900, theta, y);

					/* 
					 * 计算元素的朝向
					 * 让元素朝向螺旋的中心轴
					 * 通过将X和Z坐标乘以2来创建一个指向螺旋中心的向量
					 */
					vector.x = object.position.x * 2;  // X坐标加倍
					vector.y = object.position.y;      // Y坐标不变
					vector.z = object.position.z * 2;  // Z坐标加倍
					object.lookAt(vector);  // 让元素朝向这个点

					targets.helix.push(object);  // 将目标位置存储到helix目标数组中
				}

				// ================== 创建网格布局(GRID)的目标位置 ==================
				/* 
				 * 网格布局：将元素排列在一个三维网格中
				 * 类似于魔方那样的整齐排列
				 */
				for (let i = 0; i < objects.length; i++) {

					const object = new THREE.Object3D();  // 创建目标位置对象

					/* 
					 * 计算三维网格中的位置：
					 * 这是一个5×5×N的网格（因为118个元素不能形成完美的立方体）
					 * 
					 * X坐标：(i % 5) * 400 - 800
					 *   - i % 5: 取余运算，结果在0-4之间，表示在当前层中的列索引
					 *   - * 400: 列间距为400
					 *   - - 800: 偏移量，使网格水平居中
					 * 
					 * Y坐标：-(Math.floor(i / 5) % 5) * 400 + 800
					 *   - Math.floor(i / 5) % 5: 先除以5取整，再对5取余，表示在当前层中的行索引
					 *   - 负号：因为屏幕坐标系Y轴向下为正，我们需要Y轴向上为正
					 *   - * 400: 行间距为400
					 *   - + 800: 偏移量，使网格垂直居中
					 * 
					 * Z坐标：Math.floor(i / 25) * 1000 - 2000
					 *   - Math.floor(i / 25): 每25个元素为一层（5×5）
					 *   - * 1000: 层间距为1000
					 *   - - 2000: 偏移量，使网格在深度方向居中
					 */
					object.position.x = ((i % 5) * 400) - 800;                    // X轴位置
					object.position.y = (-(Math.floor(i / 5) % 5) * 400) + 800;  // Y轴位置
					object.position.z = (Math.floor(i / 25)) * 1000 - 2000;      // Z轴位置
					
					targets.grid.push(object);  // 将目标位置存储到grid目标数组中
				}

				// ================== 创建渲染器 ==================
				/* 
				 * 创建CSS3DRenderer渲染器
				 * 这是Three.js的一个特殊渲染器，用于将HTML/CSS元素渲染到3D场景中
				 * 与WebGLRenderer不同，CSS3DRenderer渲染的是真实的DOM元素
				 */
				renderer = new CSS3DRenderer();
				
				/* 
				 * 设置渲染器尺寸为窗口尺寸
				 * 这样渲染器会填满整个浏览器窗口
				 */
				renderer.setSize(window.innerWidth, window.innerHeight);
				
				/* 
				 * 将渲染器的DOM元素添加到页面容器中
				 * renderer.domElement是渲染器创建的canvas或div元素
				 */
				document.getElementById('container').appendChild(renderer.domElement);

				// ================== 创建控制器 ==================
				/* 
				 * 创建TrackballControls轨道控制器
				 * 允许用户通过以下方式控制相机：
				 *   - 鼠标左键拖拽：旋转场景
				 *   - 鼠标滚轮：缩放场景
				 *   - 鼠标右键拖拽：平移场景
				 * 参数：相机对象、渲染器的DOM元素
				 */
				controls = new TrackballControls(camera, renderer.domElement);
				
				/* 
				 * 设置控制器的最小和最大缩放距离
				 * minDistance: 500 - 相机可以接近物体的最小距离
				 * maxDistance: 6000 - 相机可以远离物体的最大距离
				 * 这些限制防止用户缩放到不合适的位置
				 */
				controls.minDistance = 500;
				controls.maxDistance = 6000;
				
				/* 
				 * 添加change事件监听器
				 * 当用户通过控制器改变视角时，调用render函数重新渲染
				 */
				controls.addEventListener('change', render);

				// ================== 设置按钮事件监听器 ==================
				/* 
				 * "表格布局"按钮事件监听
				 * 当点击此按钮时，调用transform函数将元素动画移动到表格布局位置
				 * transform函数参数：目标位置数组、动画持续时间(毫秒)
				 */
				const buttonTable = document.getElementById('table');
				buttonTable.addEventListener('click', function() {
					transform(targets.table, 2000);  // 切换到表格布局，动画时间2000毫秒(2秒)
				});

				// "球体布局"按钮事件监听
				const buttonSphere = document.getElementById('sphere');
				buttonSphere.addEventListener('click', function() {
					transform(targets.sphere, 2000);  // 切换到球体布局
				});

				// "螺旋布局"按钮事件监听
				const buttonHelix = document.getElementById('helix');
				buttonHelix.addEventListener('click', function() {
					transform(targets.helix, 2000);  // 切换到螺旋布局
				});

				// "网格布局"按钮事件监听
				const buttonGrid = document.getElementById('grid');
				buttonGrid.addEventListener('click', function() {
					transform(targets.grid, 2000);  // 切换到网格布局
				});

				// ================== 初始状态设置 ==================
				/* 
				 * 初始化为表格布局
				 * 页面加载后，元素会从随机位置动画移动到周期表布局位置
				 */
				transform(targets.table, 2000);

				// ================== 窗口大小变化事件监听 ==================
				/* 
				 * 监听窗口大小变化事件
				 * 当用户调整浏览器窗口大小时，需要重新调整相机和渲染器
				 */
				window.addEventListener('resize', onWindowResize);
			}

			/**
			 * 变换函数 - 执行布局切换动画
			 * 作用：将所有元素从当前位置平滑过渡到目标布局位置
			 * 使用TWEEN.js库创建补间动画，实现平滑的过渡效果
			 * 
			 * @param {Array} targets - 目标位置数组，包含每个元素在目标布局中的位置和旋转
			 * @param {number} duration - 动画持续时间，单位是毫秒
			 */
			function transform(targets, duration) {

				// 移除所有正在进行的补间动画
				// 防止多个动画同时进行导致冲突
				TWEEN.removeAll();

				/* 
				 * 为每个元素创建位置和旋转动画
				 * 遍历所有CSS3D对象，为每个对象创建两个补间动画：
				 *   1. 位置动画：从当前位置移动到目标位置
				 *   2. 旋转动画：从当前旋转状态过渡到目标旋转状态
				 */
				for (let i = 0; i < objects.length; i++) {

					const object = objects[i];    // 获取当前CSS3D对象
					const target = targets[i];    // 获取对应的目标位置对象

					/* 
					 * 创建位置补间动画
					 * TWEEN.Tween创建一个新的补间动画
					 * .to()指定目标值：目标位置的x、y、z坐标
					 * 第二个参数是动画持续时间：基础时间+随机时间，增加动画的多样性和自然感
					 * .easing()指定缓动函数：指数缓动，动画开始和结束时较慢，中间较快
					 * .start()启动动画
					 */
					new TWEEN.Tween(object.position)
						.to({
							x: target.position.x,  // 目标X坐标
							y: target.position.y,  // 目标Y坐标
							z: target.position.z   // 目标Z坐标
						}, Math.random() * duration + duration)  // 持续时间：基础时间+随机时间(0-1倍)
						.easing(TWEEN.Easing.Exponential.InOut)  // 指数缓动函数
						.start();  // 启动动画

					/* 
					 * 创建旋转补间动画
					 * 与位置动画类似，但是作用于旋转属性
					 * 旋转使用欧拉角表示(x, y, z)
					 */
					new TWEEN.Tween(object.rotation)
						.to({
							x: target.rotation.x,  // 目标X轴旋转
							y: target.rotation.y,  // 目标Y轴旋转
							z: target.rotation.z   // 目标Z轴旋转
						}, Math.random() * duration + duration)  // 持续时间
						.easing(TWEEN.Easing.Exponential.InOut)  // 指数缓动函数
						.start();  // 启动动画
				}

				/* 
				 * 创建一个全局补间动画来持续更新渲染
				 * 这个补间不改变任何属性，只用来触发onUpdate回调
				 * 持续时间是动画时间的两倍，确保所有动画都能完成
				 * .onUpdate(render) 在每帧更新时调用render函数重新渲染
				 */
				new TWEEN.Tween(this)
					.to({}, duration * 2)    // 目标为空对象，持续时间加倍
					.onUpdate(render)        // 每帧更新时调用渲染函数
					.start();                // 启动动画
			}

			/**
			 * 窗口大小变化处理函数
			 * 作用：当浏览器窗口大小改变时，调整相机和渲染器以适应新尺寸
			 * 这是响应式设计的重要部分，确保3D场景在不同屏幕尺寸下都能正确显示
			 */
			function onWindowResize() {

				/* 
				 * 更新相机的宽高比
				 * 相机需要知道新的窗口宽高比，以避免图像被拉伸
				 */
				camera.aspect = window.innerWidth / window.innerHeight;
				
				/* 
				 * 更新相机的投影矩阵
				 * 在Three.js中，改变相机参数后需要调用此方法来应用更改
				 * 投影矩阵定义了3D空间如何映射到2D屏幕
				 */
				camera.updateProjectionMatrix();

				/* 
				 * 更新渲染器的大小
				 * 使渲染器的canvas尺寸与窗口新尺寸一致
				 * 如果不这样做，渲染的内容可能会被拉伸或压缩
				 */
				renderer.setSize(window.innerWidth, window.innerHeight);

				// 重新渲染场景，应用所有更改
				render();
			}

			/**
			 * 动画循环函数
			 * 这是Three.js应用的核心循环，每秒调用60次（如果性能允许）
			 * 作用：更新动画、控制器，并持续渲染场景
			 * requestAnimationFrame是浏览器提供的API，用于高效地执行动画
			 */
			function animate() {

				/* 
				 * 请求下一帧动画
				 * requestAnimationFrame会在浏览器下一次重绘前调用指定的函数
				 * 这样形成了连续的动画循环
				 */
				requestAnimationFrame(animate);

				// 更新所有补间动画
				// TWEEN.update()会更新所有正在进行的动画的状态
				TWEEN.update();

				// 更新轨道控制器
				// controls.update()会根据用户的输入更新相机位置
				controls.update();

				/* 
				 * 注意：这里没有调用render()
				 * 因为控制器和补间动画的更新都会触发change事件
				 * change事件监听器会调用render()函数
				 * 这样可以避免不必要的重复渲染
				 */
			}

			/**
			 * 渲染函数
			 * 作用：将3D场景渲染到屏幕上
			 * 这是Three.js渲染管道的最后一步，将虚拟3D场景转换为2D图像显示
			 */
			function render() {

				/* 
				 * 渲染场景和相机
				 * renderer.render()是Three.js的核心渲染方法
				 * 参数：
				 *   - scene: 要渲染的场景对象，包含所有3D元素
				 *   - camera: 相机对象，定义了观察视角
				 * 这个方法会将相机视角下的场景渲染到渲染器的canvas元素中
				 */
				renderer.render(scene, camera);
			}

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