<!-- Three.js 3D文本生成器 - 功能与技术分析
🎯 核心功能概述
这是一个基于WebGL的交互式3D文本生成器，允许用户：

1. 实时3D文本编辑
键盘输入即时生成3D文字

支持退格键删除文字

默认显示"three.js"，首次输入后清空重新开始

2. 动态视觉效果
镜像对称显示：主文本上方 + 镜像文本下方

可调灯光系统：可随机改变点光源颜色

雾效和背景：增强3D场景深度感

平滑旋转动画：拖拽旋转文本，带有惯性过渡效果

3. 参数化控制
字体切换：5种不同字体可选（helvetiker, optimer, gentilis, droid sans, droid serif）

粗细调整：normal/bold两种粗细切换

斜面控制：可开关3D文本边缘的斜面效果

几何参数：深度、大小、曲线精度等预设参数

4. 交互界面
拖拽旋转：鼠标/触摸拖拽控制文本旋转

GUI控制面板：图形化界面调整参数

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

🛠️ 主要技术点分析
1. Three.js核心架构
javascript
// 三个核心组件
- Scene（场景）：容纳所有3D对象的容器
- Camera（相机）：透视相机，决定观察视角
- Renderer（渲染器）：WebGL渲染器，将3D转为2D显示
2. 文本几何体生成
TextGeometry类：将2D字体路径挤出为3D几何体

参数化配置：

javascript
{
  font: font,            // 字体数据
  size: 70,              // 字体大小
  depth: 20,             // 挤出深度（厚度）
  curveSegments: 4,      // 曲线细分精度
  bevelEnabled: true,    // 斜面开关
  bevelThickness: 2,     // 斜面厚度
  bevelSize: 1.5         // 斜面大小
}
3. 字体系统
Typeface字体格式：JSON格式的Three.js专用字体

FontLoader类：异步加载字体文件

字体路径构建：fonts/字体名_粗细.typeface.json

字体缓存：通过THREE.Cache.enabled = true优化性能

4. 灯光与材质系统
javascript
// 双光源设计
1. 平行光（DirectionalLight）：模拟环境光，强度0.4
2. 点光源（PointLight）：主光源，可改变颜色，强度4.5

// 双材质配置
materials = [
  new THREE.MeshPhongMaterial({ flatShading: true }), // 正面：平面着色
  new THREE.MeshPhongMaterial({})                     // 侧面：平滑着色
];
5. 交互与动画系统
javascript
// 旋转控制逻辑
targetRotation = 原角度 + (鼠标移动距离) × 0.02

// 平滑动画插值
group.rotation.y += (目标角度 - 当前角度) × 0.05

// 指针事件处理
pointerdown → pointermove → pointerup 完整事件链
6. ES6模块化设计
Import Map配置：浏览器原生模块别名

按需导入：只导入需要的Three.js模块

模块作用域：变量不会污染全局命名空间

7. GUI控制面板
lil-gui库：轻量级参数控制界面

回调函数绑定：每个按钮对应一个功能函数

实时更新：参数修改立即反映到3D场景

8. 响应式设计
javascript
// 窗口大小变化处理
onWindowResize() {
  camera.aspect = window.innerWidth / window.innerHeight
  camera.updateProjectionMatrix()
  renderer.setSize(window.innerWidth, window.innerHeight)
}
9. 性能优化技术
几何体重用：更新文本时重用字体数据

边界框计算：computeBoundingBox()用于文本居中

设备像素比适配：支持Retina等高分辨率屏幕

动画循环：使用setAnimationLoop()替代传统RAF

📁 项目文件结构需求
text
项目根目录/
├── index.html              # 主HTML文件（本文件）
├── main.css               # 样式文件
├── fonts/                 # 字体文件目录
│   ├── optimer_bold.typeface.json
│   ├── optimer_regular.typeface.json
│   ├── helvetiker_bold.typeface.json
│   ├── helvetiker_regular.typeface.json
│   └── ...其他字体
├── jsm/                   # Three.js附加组件
│   ├── loaders/FontLoader.js
│   ├── geometries/TextGeometry.js
│   └── libs/lil-gui.module.min.js
└── build/                 # Three.js构建文件
    └── three.module.js
🔧 关键技术依赖
Three.js r155+：WebGL 3D引擎

ES6模块支持：现代浏览器原生支持

Pointer Events API：统一鼠标/触摸事件

Import Maps：模块路径映射（Chrome 89+, Edge 89+）

🎨 视觉特性亮点
1. 深度感营造
雾效梯度：近处清晰，远处逐渐模糊

层次布局：主文本、镜像文本、地面平面的空间关系

相机视角：俯角视角增强3D立体感

2. 材质效果
平面着色 vs 平滑着色：正面与侧面的视觉对比

镜面高光：Phong材质对点光源的反应

半透明地面：提供空间参考但不喧宾夺主

3. 动画细节
缓动插值：旋转动画的平滑过渡

实时响应：键盘输入立即更新几何体

交互反馈：拖拽时的流畅旋转

💡 扩展应用方向
这个代码框架可扩展为：

3D文字动画工具：添加更多动画效果（缩放、位移、颜色渐变）

实时数据可视化：连接API动态显示数据

教育演示工具：3D几何和字体渲染的教学示例

创意艺术装置：结合声音、视频的交互艺术

🚀 技术亮点总结
技术点	实现方式	效果
3D文本生成	TextGeometry + 字体挤出	矢量字转3D体
实时编辑	键盘事件 + 几何体重建	即时反馈
交互旋转	指针事件 + 角度插值	平滑拖拽
视觉效果	双光源 + 雾效 + 材质	专业级渲染
参数控制	GUI面板 + 回调函数	用户友好 -->


<!DOCTYPE html>
<html lang="en">
	<head>
		<!-- 
			HTML文档的根元素，lang属性设置为"en"表示文档内容为英文
			注意：虽然界面文字已改为中文，但文档语言标识仍为英文
		-->
		<title>Three.js 3D文本生成器 - 交互式WebGL文字效果</title>
		<!-- 
			页面标题，显示在浏览器标签页上
			更改为中文标题，更符合中文用户的使用习惯
		-->
		<meta charset="utf-8">
		<!-- 
			字符编码声明，使用UTF-8编码确保正确显示中文字符
			UTF-8支持全球大多数语言字符，包括中文、英文等
		-->
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<!-- 
			视口设置，用于移动端适配：
			- width=device-width: 视口宽度等于设备宽度
			- user-scalable=no: 禁止用户手动缩放页面
			- minimum-scale=1.0, maximum-scale=1.0: 固定缩放比例为1.0
			这些设置确保了WebGL场景在移动设备上显示稳定
		-->
		<link type="text/css" rel="stylesheet" href="main.css">
		<!-- 
			引入外部CSS样式表文件
			type="text/css": 指定链接资源类型为CSS样式表
			rel="stylesheet": 定义当前文档与链接资源的关系为样式表
			href="main.css": 样式表文件的相对路径
		-->
	</head>
	<body>
		<!-- 
			HTML文档的主体部分，所有可见内容都包含在body标签内
			这里将包含Three.js渲染的WebGL画布和相关信息显示
		-->

		<div id="info">
			<!-- 
				id="info": 为这个div元素设置唯一标识符"info"
				可以通过CSS选择器#info或JavaScript的document.getElementById('info')访问
				这个div用于显示页面信息和操作指南
			-->
			<a href="https://threejs.org" target="_blank" rel="noopener">Three.js</a> - 动态3D文本生成器<br/>
			<!-- 
				<a>标签：创建一个超链接，指向Three.js官方网站
				target="_blank": 在新标签页中打开链接
				rel="noopener": 安全属性，防止新打开的页面通过window.opener访问原页面
				<br/>：换行标签，使下一行内容从新行开始显示
			-->
			输入文字编辑内容，拖拽旋转3D文本
			<!-- 中文操作提示，指导用户如何使用该3D文本生成器 -->
		</div>

		<!-- 
			importmap：JavaScript模块导入映射表
			这是一个相对较新的浏览器功能，允许定义模块标识符的映射关系
			相当于为模块指定别名和路径，简化import语句
		-->
		<!-- 
			导入映射配置：
			- "three": 将"three"模块名映射到"../build/three.module.js"路径
			- "three/addons/": 将"three/addons/"开头的模块路径映射到"./jsm/"目录
			这样在代码中就可以使用import * as THREE from 'three'而不是完整路径
		-->
		<script type="importmap">
			{
				"imports": {
					"three": "../build/three.module.js",
					"three/addons/": "./jsm/"
				}
			}
			
		</script>


		<!-- 
			type="module": 声明这是一个ES6模块脚本
			模块脚本具有自己的作用域，支持import/export语法
			模块中的代码默认在严格模式下运行
			模块只会被执行一次，无论被引用多少次
		-->
		<script type="module">
			

			// 使用ES6模块语法导入Three.js核心库
			// * as THREE：将three模块的所有导出内容作为一个名为THREE的对象导入
			// 这样可以通过THREE.XXX的方式访问Three.js的所有功能
			import * as THREE from 'three';

			// 从three.js的addons目录导入字体加载器
			// FontLoader：专门用于加载JSON格式的Typeface字体文件
			// 这些字体文件通常是通过工具将TTF/OTF字体转换为Three.js可用的JSON格式
			import { FontLoader } from 'three/addons/loaders/FontLoader.js';

			// 导入文本几何体生成器
			// TextGeometry：基于字体生成3D文本几何体的专用类
			// 它可以将2D文字路径挤出成3D几何体，支持斜面、深度等参数
			import { TextGeometry } from 'three/addons/geometries/TextGeometry.js';

			// 导入GUI（图形用户界面）库
			// GUI：轻量级的控制面板库，可以创建交互式参数控制界面
			// lil-gui是一个流行的Three.js辅助工具，用于调试和交互控制
			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';

			// 启用Three.js的缓存系统
			// 当加载相同的资源（如纹理、字体）时，Three.js会从缓存中读取
			// 这可以显著提高性能，避免重复加载相同的资源
			THREE.Cache.enabled = true;

			// ========== 全局变量声明区域 ==========
			
			// Three.js核心对象变量
			let container;          // 用于容纳Three.js渲染器的DOM容器元素
			let camera;             // 3D场景的相机对象，决定观察视角
			let cameraTarget;       // 相机观察的目标点坐标（Vector3对象）
			let scene;              // 3D场景对象，包含所有需要渲染的3D元素
			let renderer;           // WebGL渲染器，负责将3D场景渲染到2D画布

			// 文本相关对象变量
			let group;              // THREE.Group对象，用于组织和控制所有文本网格
			let textMesh1;          // 主文本网格对象（上方显示的文本）
			let textMesh2;          // 镜像文本网格对象（下方显示的文本）
			let textGeo;            // 文本几何体对象，包含文本的顶点、面等几何数据
			let materials;          // 材质数组，包含文本正面和侧面的材质

			// 文本输入状态变量
			let firstLetter = true; // 布尔值，标记是否为第一次输入文字
			                        // 当第一次输入时，会清空默认的"three.js"文本

			// ========== 文本参数配置区域 ==========
			
			// 文本内容相关参数
			let text = 'three.js',      // 初始显示的文本内容，默认为"three.js"
				bevelEnabled = true,    // 布尔值，是否启用斜面/倒角效果
				                        // 斜面效果使3D文字的边缘更加平滑和专业
				font = undefined,       // 当前加载的字体对象，初始为undefined
				                        // 字体加载完成后，这里会存储字体数据
				fontName = 'optimer',   // 字体名称，当前使用"optimer"字体
				                        // 可用字体：helvetiker, optimer, gentilis, droid sans, droid serif
				fontWeight = 'bold';    // 字体粗细，当前为"bold"（粗体）
				                        // 可选值：'normal'（正常）或'bold'（粗体）

			// 3D文本的几何参数（使用const声明，这些参数在运行时不会改变）
			const depth = 20,           // 文本的挤出深度/厚度，单位是Three.js单位
				size = 70,              // 文本的字体大小，影响文字的整体尺寸
				hover = 30,             // 上下两个文本之间的垂直间距
				                        // 主文本在上方，镜像文本在下方
				curveSegments = 4,      // 曲线细分精度，值越高曲线越平滑但性能消耗越大
				                        // 用于处理字体中的曲线部分（如字母O、S等）
				bevelThickness = 2,     // 斜面厚度，控制斜面效果的深度
				bevelSize = 1.5;        // 斜面大小，控制斜面效果的宽度

			// 镜像显示开关
			const mirror = true;        // 布尔值，是否显示镜像文本
			                            // 当为true时，会显示上下对称的两个文本

			// ========== 字体映射表配置 ==========
			
			// 字体名称到索引的映射表
			// 将字体名称字符串映射为数字索引，便于循环切换字体
			const fontMap = {
				'helvetiker': 0,        // 类似于Helvetica的无衬线字体
				'optimer': 1,           // 优化的显示字体，当前使用的默认字体
				'gentilis': 2,          // 优雅的衬线字体
				'droid/droid_sans': 3,  // Android系统的无衬线字体
				'droid/droid_serif': 4  // Android系统的衬线字体
			};

			// 字体粗细到索引的映射表
			const weightMap = {
				'regular': 0,           // 正常粗细
				'bold': 1               // 粗体
			};

			// 反向映射表数组（索引到字体名称的映射）
			// 用于通过数字索引快速查找对应的字体名称
			const reverseFontMap = [];
			const reverseWeightMap = [];

			// 构建反向映射表
			// 遍历fontMap，将索引作为数组下标，字体名称作为值
			for ( const i in fontMap ) reverseFontMap[ fontMap[ i ] ] = i;
			for ( const i in weightMap ) reverseWeightMap[ weightMap[ i ] ] = i;

			// ========== 交互控制变量 ==========
			
			let targetRotation = 0;                     // 文本的目标旋转角度（弧度制）
			                                            // 文本会平滑过渡到这个旋转角度
			let targetRotationOnPointerDown = 0;       // 鼠标/触摸按下时的目标旋转角度
			                                            // 用于计算旋转变化量
			let pointerX = 0;                          // 当前指针（鼠标/触摸）的X坐标
			                                            // 相对于屏幕中心的偏移量
			let pointerXOnPointerDown = 0;             // 鼠标/触摸按下时的指针X坐标
			                                            // 用于计算拖动距离
			let windowHalfX = window.innerWidth / 2;   // 窗口宽度的一半
			                                            // 用于将屏幕坐标转换为以屏幕中心为原点的坐标
			let fontIndex = 1;                         // 当前字体索引，初始为1（对应'optimer'）
			                                            // 用于循环切换字体功能

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

			// ========== 初始化函数定义 ==========
			function init() {
				// 创建Three.js渲染器的容器元素
				container = document.createElement( 'div' );
				// 将创建的div元素添加到文档body中
				document.body.appendChild( container );

				// ========== 相机系统初始化 ==========
				// 创建透视投影相机（Perspective Camera）
				// 参数说明：
				// 1. fov (field of view): 视野角度，30度是适中的视角
				// 2. aspect: 宽高比，使用窗口宽高比确保画面不变形
				// 3. near: 近裁剪面，距离相机1单位以内的物体不显示
				// 4. far: 远裁剪面，距离相机1500单位以外的物体不显示
				camera = new THREE.PerspectiveCamera( 30, window.innerWidth / window.innerHeight, 1, 1500 );
				// 设置相机位置：(x, y, z)坐标
				// x=0（水平居中）, y=400（上方400单位）, z=700（向屏幕内700单位）
				camera.position.set( 0, 400, 700 );
				// 创建相机观察目标点
				cameraTarget = new THREE.Vector3( 0, 150, 0 );

				// ========== 场景系统初始化 ==========
				// 创建3D场景对象，所有需要渲染的3D对象都需要添加到场景中
				scene = new THREE.Scene();
				// 设置场景背景颜色为黑色（十六进制颜色值0x000000）
				scene.background = new THREE.Color( 0x000000 );
				// 添加雾效（Fog），创建深度感和距离感
				// 参数：雾的颜色，近雾距离，远雾距离
				scene.fog = new THREE.Fog( 0x000000, 250, 1400 );

				// ========== 灯光系统初始化 ==========
				// 创建平行光（Directional Light），模拟太阳光等远距离光源
				const dirLight = new THREE.DirectionalLight( 0xffffff, 0.4 );
				// 设置光线方向向量，然后归一化（转换为单位向量）
				dirLight.position.set( 0, 0, 1 ).normalize();
				// 将灯光添加到场景中
				scene.add( dirLight );

				// 创建点光源（Point Light），模拟灯泡等点状光源
				const pointLight = new THREE.PointLight( 0xffffff, 4.5, 0, 0 );
				// 使用HSL颜色模式随机设置点光源颜色
				// HSL参数：色相（0-1随机），饱和度1，亮度0.5
				pointLight.color.setHSL( Math.random(), 1, 0.5 );
				// 设置点光源位置
				pointLight.position.set( 0, 100, 90 );
				// 将点光源添加到场景中
				scene.add( pointLight );

				// ========== 材质系统初始化 ==========
				// 创建材质数组，文本正面和侧面使用不同的材质
				materials = [
					// 正面材质：Phong材质，白色，启用平面着色
					new THREE.MeshPhongMaterial( { 
						color: 0xffffff,        // 材质颜色：白色
						flatShading: true        // 平面着色：每个面都是单一颜色，没有平滑渐变
					} ),
					// 侧面材质：Phong材质，白色，默认平滑着色
					new THREE.MeshPhongMaterial( { 
						color: 0xffffff          // 材质颜色：白色
					} )
				];

				// ========== 文本组初始化 ==========
				// 创建组（Group）对象，用于将多个网格对象组合在一起
				// 组可以作为一个整体进行旋转、平移等变换
				group = new THREE.Group();
				// 将整个文本组向上移动100单位，使其离开地面
				group.position.y = 100;
				// 将组添加到场景中
				scene.add( group );

				// 加载初始字体（使用默认的optimer bold字体）
				loadFont();

				// ========== 地面平面创建 ==========
				// 创建一个巨大的平面作为地面参考
				const plane = new THREE.Mesh(
					// 平面几何体：宽度10000，高度10000
					new THREE.PlaneGeometry( 10000, 10000 ),
					// 基础材质：白色，半透明（透明度0.5）
					new THREE.MeshBasicMaterial( { 
						color: 0xffffff,        // 白色
						opacity: 0.5,           // 透明度0.5（50%透明）
						transparent: true       // 启用透明
					} )
				);
				// 设置地面位置：与文本组同一高度
				plane.position.y = 100;
				// 将平面绕X轴旋转-90度（使其水平）
				plane.rotation.x = - Math.PI / 2;
				// 将地面添加到场景中
				scene.add( plane );

				// ========== 渲染器系统初始化 ==========
				// 创建WebGL渲染器
				renderer = new THREE.WebGLRenderer( { 
					antialias: true  // 启用抗锯齿，使边缘更平滑
				} );
				// 设置设备像素比，适配高分辨率屏幕（如Retina显示屏）
				renderer.setPixelRatio( window.devicePixelRatio );
				// 设置渲染器尺寸为整个窗口大小
				renderer.setSize( window.innerWidth, window.innerHeight );
				// 设置动画循环回调函数（替代传统的requestAnimationFrame）
				// animate函数将在每一帧被调用
				renderer.setAnimationLoop( animate );
				// 将渲染器的canvas元素添加到容器中
				container.appendChild( renderer.domElement );

				// ========== 事件监听器设置 ==========
				// 禁止容器元素的默认触摸行为（如滚动、缩放）
				container.style.touchAction = 'none';
				// 为容器添加指针按下事件监听
				container.addEventListener( 'pointerdown', onPointerDown );

				// 为整个文档添加键盘事件监听
				document.addEventListener( 'keypress', onDocumentKeyPress );
				document.addEventListener( 'keydown', onDocumentKeyDown );

				// ========== GUI控制面板配置 ==========
				// 定义GUI控制面板的所有可调用函数
				const params = {
					// 函数：随机改变点光源颜色
					changeColor: function () {
						// 使用HSL颜色模式随机生成新颜色
						pointLight.color.setHSL( Math.random(), 1, 0.5 );
					},
					// 函数：切换字体
					changeFont: function () {
						// 字体索引递增
						fontIndex ++;
						// 通过索引获取字体名称（使用取模运算实现循环）
						fontName = reverseFontMap[ fontIndex % reverseFontMap.length ];
						// 加载新字体
						loadFont();
					},
					// 函数：切换字体粗细
					changeWeight: function () {
						// 如果当前是粗体，切换为正常
						if ( fontWeight === 'bold' ) {
							fontWeight = 'regular';
						} else {
							// 否则切换为粗体
							fontWeight = 'bold';
						}
						// 加载新粗细的字体
						loadFont();
					},
					// 函数：切换斜面效果开关
					changeBevel: function () {
						// 取反当前的斜面启用状态
						bevelEnabled = ! bevelEnabled;
						// 刷新文本显示
						refreshText();
					}
				};

				// 创建GUI实例
				const gui = new GUI();
				// 添加控制按钮到GUI面板
				gui.add( params, 'changeColor' ).name( '随机颜色' );      // 随机颜色按钮
				gui.add( params, 'changeFont' ).name( '切换字体' );       // 切换字体按钮
				gui.add( params, 'changeWeight' ).name( '切换粗细' );     // 切换粗细按钮
				gui.add( params, 'changeBevel' ).name( '斜面开关' );      // 斜面开关按钮
				gui.open();  // 默认打开GUI面板

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

			// ========== 窗口大小变化处理函数 ==========
			function onWindowResize() {
				// 重新计算窗口半宽
				windowHalfX = window.innerWidth / 2;

				// 更新相机的宽高比
				camera.aspect = window.innerWidth / window.innerHeight;
				// 更新相机的投影矩阵（必须调用此方法使宽高比生效）
				camera.updateProjectionMatrix();

				// 更新渲染器尺寸
				renderer.setSize( window.innerWidth, window.innerHeight );
			}

			// ========== 键盘按键按下事件处理函数 ==========
			function onDocumentKeyDown( event ) {
				// 检查是否为第一次输入文字
				if ( firstLetter ) {
					// 标记已不是第一次输入
					firstLetter = false;
					// 清空默认的"three.js"文本
					text = '';
				}

				// 获取按下的键的键码
				const keyCode = event.keyCode;

				// 处理退格键（键码8）
				if ( keyCode == 8 ) {
					// 阻止退格键的默认行为（浏览器后退）
					event.preventDefault();

					// 删除文本的最后一个字符
					// substring(0, text.length - 1) 取从开始到倒数第二个字符的子串
					text = text.substring( 0, text.length - 1 );
					// 刷新文本显示
					refreshText();

					// 返回false阻止事件进一步传播
					return false;
				}
			}

			// ========== 键盘字符输入事件处理函数 ==========
			function onDocumentKeyPress( event ) {
				// 获取输入的字符键码
				const keyCode = event.which;

				// 处理退格键（键码8）
				if ( keyCode == 8 ) {
					// 阻止退格键的默认行为
					event.preventDefault();
				} else {
					// 将键码转换为对应的字符
					const ch = String.fromCharCode( keyCode );
					// 将字符追加到文本末尾
					text += ch;
					// 刷新文本显示
					refreshText();
				}
			}

			// ========== 字体加载函数 ==========
			function loadFont() {
				// 创建字体加载器实例
				const loader = new FontLoader();
				// 加载字体文件
				// 字体文件路径：'fonts/' + 字体名称 + '_' + 字体粗细 + '.typeface.json'
				loader.load( 'fonts/' + fontName + '_' + fontWeight + '.typeface.json', function ( response ) {
					// 加载成功回调函数，response参数包含字体数据
					font = response;  // 将加载的字体数据保存到font变量
					refreshText();    // 使用新字体刷新文本显示
				} );
				// 注意：这里没有处理加载失败的情况，实际项目中应该添加错误处理
			}

			// ========== 3D文本创建函数 ==========
			function createText() {
				// 使用TextGeometry创建3D文本几何体
				// TextGeometry参数说明：
				// 1. text: 要生成的文本字符串
				// 2. 配置对象：包含字体、大小、深度等各种参数
				textGeo = new TextGeometry( text, {
					font: font,              // 使用的字体对象
					size: size,              // 字体大小
					depth: depth,            // 挤出深度（文本厚度）
					curveSegments: curveSegments,  // 曲线分段数
					bevelThickness: bevelThickness,  // 斜面厚度
					bevelSize: bevelSize,    // 斜面大小
					bevelEnabled: bevelEnabled  // 是否启用斜面
				} );

				// 计算文本几何体的边界框（Bounding Box）
				// 边界框是包含整个几何体的最小矩形框，用于后续的居中计算
				textGeo.computeBoundingBox();

				// 计算中心偏移量，使文本水平居中
				// 公式：-0.5 * (最大X - 最小X)
				// 这样可以使文本的中心点位于场景的X轴原点
				const centerOffset = - 0.5 * ( textGeo.boundingBox.max.x - textGeo.boundingBox.min.x );

				// 创建主文本网格对象
				// 参数：几何体 + 材质数组
				textMesh1 = new THREE.Mesh( textGeo, materials );
				// 设置位置
				textMesh1.position.x = centerOffset;  // X方向：居中
				textMesh1.position.y = hover;         // Y方向：上方hover距离
				textMesh1.position.z = 0;             // Z方向：场景中心
				// 设置旋转
				textMesh1.rotation.x = 0;             // X轴不旋转
				textMesh1.rotation.y = Math.PI * 2;   // Y轴旋转一周（2π弧度）
				// 将文本网格添加到组中
				group.add( textMesh1 );

				// 如果启用了镜像显示，创建镜像文本
				if ( mirror ) {
					// 使用相同的几何体和材质创建镜像文本网格
					textMesh2 = new THREE.Mesh( textGeo, materials );
					// 设置镜像文本位置
					textMesh2.position.x = centerOffset;  // X方向：居中（与主文本相同）
					textMesh2.position.y = - hover;       // Y方向：下方hover距离（负值）
					textMesh2.position.z = depth;         // Z方向：向后偏移厚度距离
					// 设置镜像文本旋转
					textMesh2.rotation.x = Math.PI;       // X轴旋转180度（上下翻转）
					textMesh2.rotation.y = Math.PI * 2;   // Y轴旋转一周
					// 将镜像文本网格添加到组中
					group.add( textMesh2 );
				}
			}

			// ========== 文本刷新函数 ==========
			function refreshText() {
				// 从组中移除旧的文本网格
				group.remove( textMesh1 );
				// 如果启用了镜像，也移除镜像文本网格
				if ( mirror ) group.remove( textMesh2 );

				// 检查文本是否为空
				if ( ! text ) return;  // 如果文本为空，直接返回，不创建新文本

				// 使用当前参数创建新文本
				createText();
			}

			// ========== 指针（鼠标/触摸）按下事件处理函数 ==========
			function onPointerDown( event ) {
				// 检查是否为主要的指针事件（避免多指触摸的干扰）
				if ( event.isPrimary === false ) return;

				// 计算按下时指针相对于屏幕中心的X坐标
				pointerXOnPointerDown = event.clientX - windowHalfX;
				// 记录按下时的目标旋转角度
				targetRotationOnPointerDown = targetRotation;

				// 添加指针移动和释放事件监听器
				document.addEventListener( 'pointermove', onPointerMove );
				document.addEventListener( 'pointerup', onPointerUp );
			}

			// ========== 指针（鼠标/触摸）移动事件处理函数 ==========
			function onPointerMove( event ) {
				// 检查是否为主要的指针事件
				if ( event.isPrimary === false ) return;

				// 计算当前指针相对于屏幕中心的X坐标
				pointerX = event.clientX - windowHalfX;

				// 计算新的目标旋转角度
				// 公式：按下时的旋转 + (当前X - 按下时X) * 0.02
				// 0.02是旋转灵敏度系数，值越小旋转越慢
				targetRotation = targetRotationOnPointerDown + ( pointerX - pointerXOnPointerDown ) * 0.02;
			}

			// ========== 指针（鼠标/触摸）释放事件处理函数 ==========
			function onPointerUp( event ) {
				// 检查是否为主要的指针事件
				if ( event.isPrimary === false ) return;

				// 移除指针移动和释放事件监听器
				document.removeEventListener( 'pointermove', onPointerMove );
				document.removeEventListener( 'pointerup', onPointerUp );
			}

			// ========== 动画循环函数 ==========
			function animate() {
				// 使用线性插值实现平滑旋转
				// 公式：当前旋转角度 += (目标旋转角度 - 当前旋转角度) * 插值系数
				// 0.05是插值系数，值越小过渡越平滑但响应越慢
				group.rotation.y += ( targetRotation - group.rotation.y ) * 0.05;

				// 让相机始终看向目标点
				camera.lookAt( cameraTarget );

				// 渲染场景
				// 1. clear(): 清除上一帧的渲染内容
				// 2. render(): 将场景通过相机渲染到画布
				renderer.clear();
				renderer.render( scene, camera );
			}

		</script>
		<!-- 
			脚本结束标签
			注意：在type="module"的脚本中，所有变量默认是模块作用域的
			不会污染全局作用域，这是ES6模块的重要特性之一
		-->
	</body>
</html>