<!-- 代码功能概述
这是一个使用Three.js库创建交互式3D文字效果的WebGL应用。主要功能包括：

核心功能
3D文本渲染：从JSON格式的字体文件生成三维立体文字

双重视觉效果：

半透明的实体填充文字

轮廓清晰的线框边框

交互式控制：用户可以通过鼠标自由旋转、缩放3D场景

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

用户体验
显示中英双语文字："三维文本演示\nThree.js示例"

通过鼠标操作：

左键拖拽：旋转视角

滚轮滚动：缩放场景

自动居中：文字始终保持在视野中心

主要技术点详解
1. Three.js核心架构
javascript
// 三大核心组件
let camera;      // 透视相机 - 定义观察视角
let scene;       // 3D场景   - 所有对象的容器
let renderer;    // 渲染器   - WebGL绘制引擎
场景(Scene)：虚拟3D世界，管理所有对象

透视相机(PerspectiveCamera)：模拟人眼视角，近大远小效果

WebGL渲染器：硬件加速的3D图形渲染

2. 字体加载与处理
javascript
// 关键技术点
const loader = new FontLoader();
loader.load('fonts/helvetiker_regular.typeface.json', function (font) {
    const shapes = font.generateShapes('文本内容', 100);
});
FontLoader：专门加载Typeface.js格式的JSON字体文件

字体数据：JSON文件包含字形的矢量路径信息

形状生成：将2D文字转换为3D可渲染的形状(Shape对象)

3. 几何体创建流程
javascript
// 三维文字生成步骤
const geometry = new THREE.ShapeGeometry(shapes);  // 1. 创建几何体
geometry.computeBoundingBox();                     // 2. 计算边界框
geometry.translate(xMid, 0, 0);                    // 3. 居中处理
ShapeGeometry：将2D形状拉伸为3D几何体

边界框计算：获取文字尺寸，用于精确定位

自动居中：通过数学计算确保文字位于场景中心

4. 双材质渲染技术
javascript
// 两种材质结合使用
const matLite = new THREE.MeshBasicMaterial({  // 实体填充材质
    color: 0x006699,
    transparent: true,
    opacity: 0.4  // 40%不透明度
});

const matDark = new THREE.LineBasicMaterial({   // 线框材质
    color: 0x006699,
    side: THREE.DoubleSide  // 双面渲染
});
MeshBasicMaterial：不受光照影响的基础材质

LineBasicMaterial：线条渲染材质

双面渲染(DoubleSide)：确保从任何角度都可见

透明度控制：半透明效果展示立体层次

5. 孔洞处理算法
javascript
// 处理文字内部的封闭区域（如字母O、P、R等）
const holeShapes = [];
for (let i = 0; i < shapes.length; i++) {
    if (shape.holes && shape.holes.length > 0) {
        holeShapes.push(...shape.holes);  // 收集所有孔洞
    }
}
Shape.holes属性：某些字符有内部封闭区域

分离处理：内外轮廓需要单独渲染

合并渲染：确保完整显示复杂字形

6. 交互控制系统
javascript
// 轨道控制器配置
const controls = new OrbitControls(camera, renderer.domElement);
controls.target.set(0, 0, 0);  // 设置旋转中心点
controls.addEventListener('change', render);  // 变化时重绘
OrbitControls：预制的交互控制器

事件驱动渲染：用户操作后触发重新绘制

性能优化：仅在需要时渲染，减少GPU负载

7. 响应式适配机制
javascript
// 窗口大小变化处理
window.addEventListener('resize', onWindowResize);
function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();  // 更新相机参数
    renderer.setSize(window.innerWidth, window.innerHeight);
}
动态宽高比：实时调整相机参数

投影矩阵更新：保持正确的透视效果

渲染器尺寸同步：Canvas随窗口变化

8. 现代JavaScript特性
javascript
// ES6+语法应用
import * as THREE from 'three';  // ES6模块导入
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

let camera, scene, renderer;  // let块级作用域变量

const message = '三维文本演示\nThree.js示例';  // const常量
ES6模块系统：模块化组织代码

Import Map：浏览器原生模块路径映射

箭头函数：简洁的回调函数语法

模板字符串：多行文本处理

9. 性能优化技术
抗锯齿(Antialiasing)：消除图形锯齿，提升视觉效果

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

缓冲区几何体(BufferGeometry)：高效内存管理

技术亮点总结
跨浏览器兼容性：基于WebGL，支持所有现代浏览器

硬件加速：利用GPU进行3D渲染，性能高效

模块化设计：清晰的代码结构，易于维护和扩展

实时交互：流畅的用户操作反馈

矢量字体：无限缩放不失真，保持清晰度

轻量级实现：仅需单个HTML文件，无需复杂依赖 -->


<!DOCTYPE html>
<html lang="en">
	<head>
		<!-- 页面标题：描述页面内容，显示在浏览器标签页上 -->
		<title>Three.js WebGL - 从JSON字体文件创建三维文本</title>
		
		<!-- 字符编码声明：指定文档使用UTF-8字符编码，支持多语言字符显示 -->
		<meta charset="utf-8">
		
		<!-- 视口设置：控制移动设备上的页面显示方式 -->
		<!-- 
			width=device-width：视口宽度等于设备宽度
			user-scalable=no：禁止用户手动缩放页面
			minimum-scale=1.0：最小缩放比例为1（不缩小）
			maximum-scale=1.0：最大缩放比例为1（不放大）
		-->
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		
		<!-- 外部样式表链接：引入main.css文件，通常包含页面布局和基础样式 -->
		<link type="text/css" rel="stylesheet" href="main.css">
		
		<!-- 内嵌样式：直接在HTML文档中定义的CSS样式 -->
		<style>
			/* 
				body元素样式：设置整个页面的基础样式
				background-color: #f0f0f0 - 设置背景色为浅灰色（RGB十六进制值）
				color: #444 - 设置默认文字颜色为深灰色，确保在浅灰背景上有良好的可读性
			*/
			body {
				background-color: #f0f0f0;
				color: #444;
			}
			
			/* 
				链接样式：设置页面中所有<a>标签的显示样式
				color: #08f - 设置链接颜色为亮蓝色（RGB十六进制值）
				这是一种常见的链接颜色，与灰色背景形成对比
			*/
			a {
				color: #08f;
			}
		</style>
	</head>
	<body>
		<!-- 
			信息显示区域：用于展示页面标题或说明文字
			id="info" - 为这个div元素设置唯一的标识符，便于CSS或JavaScript操作
		-->
		<div id="info">
			<!-- 
				链接到Three.js官方网站
				href="https://threejs.org" - 指定链接的目标地址
				target="_blank" - 在新标签页或新窗口中打开链接
				rel="noopener" - 安全设置，防止新页面访问原页面的window.opener属性
			-->
			<a href="https://threejs.org" target="_blank" rel="noopener">Three.js</a> 
			WebGL - 从JSON字体文件创建简单的三维文本示例
			<br>
			<small>使用鼠标拖动旋转视角，滚轮缩放，体验三维文本效果</small>
		</div>

		<!-- 
			导入映射表（Import Map）：现代JavaScript模块系统的配置文件
			作用：定义模块标识符与实际文件路径之间的映射关系
			type="importmap" - 指定此脚本为导入映射表类型
		-->
		<script type="importmap">
			{
				"imports": {
					"three": "../build/three.module.js",
					
					"three/addons/": "./jsm/"
				}
			}
		</script>

		<!-- 
			主JavaScript模块：包含Three.js三维文本示例的所有逻辑
			type="module" - 指定此脚本为ES6模块，支持模块化导入导出
		-->
		<script type="module">
			// =============== 模块导入部分 ===============
			
			/*
				导入Three.js核心库的所有功能
				import * as THREE from 'three'
				* as THREE：将Three.js模块的所有导出内容作为一个名为THREE的对象导入
				之后可以通过THREE.PerspectiveCamera、THREE.Scene等方式访问各个类
			*/
			import * as THREE from 'three';

			/*
				导入Three.js的附加组件
				这些组件通常不在核心库中，需要单独导入
				
				轨道控制器（OrbitControls）：允许用户通过鼠标拖拽、滚轮缩放等方式与3D场景交互
				用途：实现3D视角的自由控制
				
				字体加载器（FontLoader）：专门用于加载和处理JSON格式的字体文件
				用途：将2D字体转换为3D几何形状
			*/
			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
			import { FontLoader } from 'three/addons/loaders/FontLoader.js';

			// =============== 全局变量声明 ===============
			
			/*
				声明三个全局变量，用于存储Three.js的核心组件
				let：使用let声明变量，这是ES6的块级作用域变量声明方式
				
				camera：相机，定义3D场景的观察视角
				scene：场景，包含所有3D对象（网格、光源等）的容器
				renderer：渲染器，负责将3D场景绘制到HTML画布上
			*/
			let camera, scene, renderer;

			// =============== 初始化函数调用 ===============
			
			/*
				页面加载完成后立即调用init()函数
				这是整个3D应用的入口点
			*/
			init();

			// =============== 函数定义部分 ===============
			
			/**
			 * 初始化函数 - Three.js应用的主初始化函数
			 * 功能：创建并配置场景、相机、渲染器、控制器等核心组件
			 * 无参数，无返回值
			 * 
			 * 执行流程：
			 * 1. 创建相机并设置位置
			 * 2. 创建场景并设置背景
			 * 3. 加载字体文件
			 * 4. 创建渲染器并添加到页面
			 * 5. 添加用户交互控制器
			 * 6. 设置窗口大小变化监听器
			 */
			function init() {
				/*
					创建透视相机（PerspectiveCamera）
					参数说明：
					- 45：视野角度（Field of View），单位是度，控制可见范围大小
					- window.innerWidth / window.innerHeight：宽高比，使用窗口的实际宽高比
					- 1：近裁剪面距离，相机不会渲染距离小于1的物体
					- 10000：远裁剪面距离，相机不会渲染距离大于10000的物体
					透视相机模拟人眼的视觉效果，近大远小
				*/
				camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000);
				
				/*
					设置相机初始位置
					camera.position.set(x, y, z)
					- x: 0 - 水平中心位置
					- y: -400 - 向下移动400个单位（Three.js坐标系中，正Y通常向上）
					- z: 600 - 向后（屏幕内）移动600个单位
					这个位置确保相机从斜上方观察场景中心
				*/
				camera.position.set(0, -400, 600);

				/*
					创建3D场景
					场景是所有3D对象（网格、光源、相机等）的容器
					类似于一个虚拟的3D世界
				*/
				scene = new THREE.Scene();
				
				/*
					设置场景背景颜色
					new THREE.Color(0xf0f0f0)：创建颜色对象
					0xf0f0f0是十六进制颜色值，对应RGB(240,240,240)，浅灰色
					与body背景色保持一致，实现整体视觉效果统一
				*/
				scene.background = new THREE.Color(0xf0f0f0);

				/*
					创建字体加载器实例
					FontLoader是Three.js提供的专门用于加载字体文件的工具类
				*/
				const loader = new FontLoader();
				
				/*
					异步加载字体文件
					loader.load(url, onLoad, onProgress, onError)
					参数说明：
					- 'fonts/helvetiker_regular.typeface.json'：字体文件的相对路径
					- function (font) {...}：加载成功后的回调函数，font参数是加载的字体对象
					字体文件是JSON格式，包含字形的矢量路径信息
				*/
				loader.load('fonts/helvetiker_regular.typeface.json', function (font) {
					// 加载成功后的回调函数开始
					
					/*
						定义文本颜色
						0x006699：十六进制颜色值，对应RGB(0,102,153)，深蓝色
						0x前缀表示十六进制数，这是Three.js中定义颜色的常见方式
					*/
					const color = 0x006699;

					/*
						创建线框材质（用于文本边框/轮廓）
						LineBasicMaterial：基础线条材质，用于渲染线段
						参数说明：
						- color: color - 线条颜色，使用上面定义的深蓝色
						- side: THREE.DoubleSide - 渲染面，双面渲染确保从任何角度都能看到线条
					*/
					const matDark = new THREE.LineBasicMaterial({
						color: color,
						side: THREE.DoubleSide
					});

					/*
						创建填充材质（用于文本实体填充）
						MeshBasicMaterial：基础网格材质，不受光照影响，直接显示颜色
						参数说明：
						- color: color - 材质颜色，深蓝色
						- transparent: true - 启用透明度
						- opacity: 0.4 - 设置透明度为40%（0.4），60%透明
						- side: THREE.DoubleSide - 双面渲染
						设置透明度可以让线框透过填充显示，增强3D效果
					*/
					const matLite = new THREE.MeshBasicMaterial({
						color: color,
						transparent: true,
						opacity: 0.4,
						side: THREE.DoubleSide
					});

					/*
						定义要显示的三维文本内容
						\n：换行符，将文本分成两行显示
						开头的空格用于调整文本在场景中的位置
					*/
					const message = '   三维文本演示\nThree.js示例';

					/*
						使用字体生成文本形状
						font.generateShapes(text, size)
						参数说明：
						- message：要生成的文本内容
						- 100：字体大小，单位是Three.js中的单位
						返回值：一个Shape对象数组，每个字符对应一个或多个Shape
						Shape是Three.js中表示2D形状的类，包含路径信息
					*/
					const shapes = font.generateShapes(message, 100);

					/*
						创建形状几何体
						ShapeGeometry：将2D形状转换为3D几何体
						通过拉伸2D形状创建3D网格
					*/
					const geometry = new THREE.ShapeGeometry(shapes);

					/*
						计算几何体的边界框（Bounding Box）
						边界框是包含整个几何体的最小矩形盒子
						用于获取几何体的尺寸信息，便于居中处理
					*/
					geometry.computeBoundingBox();

					/*
						计算水平居中的偏移量
						公式：xMid = -0.5 * (最大x值 - 最小x值)
						由于文本生成的默认位置是从(0,0)开始向右扩展
						需要向左移动半个宽度才能使其居中
					*/
					const xMid = -0.5 * (geometry.boundingBox.max.x - geometry.boundingBox.min.x);

					/*
						平移几何体使其水平居中
						geometry.translate(x, y, z)
						将整个几何体沿指定方向移动
						这里只移动X轴方向，使文本中心对齐场景中心
					*/
					geometry.translate(xMid, 0, 0);

					// =============== 创建实体填充文本（半透明） ===============
					
					/*
						创建文本网格（实体填充部分）
						Mesh：网格对象，将几何体与材质结合，形成可渲染的3D对象
						参数说明：
						- geometry：上面创建的形状几何体
						- matLite：半透明的填充材质
					*/
					const text = new THREE.Mesh(geometry, matLite);
					
					/*
						设置文本在Z轴的位置
						position.z = -150：将文本向后（屏幕内）移动150个单位
						这样文本不会与相机太近，同时与线框文本形成层次感
					*/
					text.position.z = -150;
					
					/*
						将文本网格添加到场景中
						只有添加到场景中的对象才会被渲染
					*/
					scene.add(text);

					// =============== 创建线框文本（轮廓） ===============
					
					/*
						存储字形中的孔洞形状
						在字体中，某些字符（如字母O、P、R等）可能有内部孔洞
						需要单独处理这些孔洞的线框
					*/
					const holeShapes = [];

					/*
						遍历所有形状，提取孔洞
						对于每个字符的形状，检查是否有hole属性（内部孔洞）
					*/
					for (let i = 0; i < shapes.length; i++) {
						const shape = shapes[i];
						
						/*
							检查当前形状是否有孔洞
							shape.holes：数组，包含所有孔洞形状
							shape.holes.length > 0：如果有孔洞
						*/
						if (shape.holes && shape.holes.length > 0) {
							/*
								遍历当前形状的所有孔洞
								每个孔洞本身也是一个Shape对象
							*/
							for (let j = 0; j < shape.holes.length; j++) {
								const hole = shape.holes[j];
								holeShapes.push(hole); // 将孔洞添加到孔洞数组中
							}
						}
					}

					/*
						将孔洞形状合并到主形状数组中
						使用扩展运算符(...)将holeShapes数组的所有元素添加到shapes数组末尾
						现在shapes数组包含所有外轮廓和内孔洞
					*/
					shapes.push(...holeShapes);

					/*
						创建容器对象用于存放所有线框
						Object3D：Three.js中的基础3D对象类，可以作为其他对象的容器
						将所有线框网格放在一个容器中，便于统一管理
					*/
					const lineText = new THREE.Object3D();

					/*
						为每个形状（包括外轮廓和孔洞）创建线框网格
						遍历shapes数组中的每个形状
					*/
					for (let i = 0; i < shapes.length; i++) {
						const shape = shapes[i];
						
						/*
							获取形状的点数据
							shape.getPoints()：返回形状路径上的点数组
							这些点定义了形状的轮廓，用于创建线框
						*/
						const points = shape.getPoints();
						
						/*
							创建缓冲区几何体
							BufferGeometry：高效存储几何数据的类，性能优于Geometry
							setFromPoints(points)：根据点数组创建几何体
						*/
						const geometry = new THREE.BufferGeometry().setFromPoints(points);
						
						/*
							应用相同的居中偏移
							线框需要与实体填充文本使用相同的偏移量，确保两者对齐
						*/
						geometry.translate(xMid, 0, 0);
						
						/*
							创建线框网格
							Line：线对象，用于渲染线段
							参数说明：
							- geometry：包含点数据的几何体
							- matDark：线框材质（深蓝色不透明线条）
						*/
						const lineMesh = new THREE.Line(geometry, matDark);
						
						/*
							将线框网格添加到容器对象
							所有线框都作为lineText容器的子对象
						*/
						lineText.add(lineMesh);
					}

					/*
						将线框容器添加到场景中
						现在场景中有两个文本对象：
						1. 半透明的实体填充文本
						2. 不透明的线框轮廓文本
						两者叠加形成立体效果
					*/
					scene.add(lineText);

					/*
						执行首次渲染
						字体加载完成后立即渲染一次，显示文本
					*/
					render();
				}); // 字体加载回调函数结束

				// =============== 创建WebGL渲染器 ===============
				
				/*
					创建WebGL渲染器
					WebGLRenderer：使用WebGL技术渲染3D场景
					参数说明：
					- { antialias: true }：启用抗锯齿，使边缘更平滑
					抗锯齿会消耗更多性能，但能提升视觉质量
				*/
				renderer = new THREE.WebGLRenderer({ antialias: true });
				
				/*
					设置设备像素比
					window.devicePixelRatio：获取设备的物理像素与CSS像素的比率
					对于高DPI屏幕（如Retina显示屏），这个值可能大于1
					设置像素比可以确保在高清屏幕上清晰显示
				*/
				renderer.setPixelRatio(window.devicePixelRatio);
				
				/*
					设置渲染器尺寸
					使渲染器画布充满整个浏览器窗口
					window.innerWidth：窗口内部宽度（不包括浏览器边框和滚动条）
					window.innerHeight：窗口内部高度
				*/
				renderer.setSize(window.innerWidth, window.innerHeight);
				
				/*
					将渲染器的DOM元素（canvas画布）添加到页面body中
					renderer.domElement：渲染器创建的<canvas>元素
					所有3D内容都将绘制到这个canvas上
				*/
				document.body.appendChild(renderer.domElement);

				// =============== 添加用户交互控制 ===============
				
				/*
					创建轨道控制器
					OrbitControls：实现类似卫星绕地球旋转的视角控制
					参数说明：
					- camera：要控制的相机对象
					- renderer.domElement：事件监听的DOM元素（canvas画布）
					控制器会监听canvas上的鼠标、触摸和滚轮事件
				*/
				const controls = new OrbitControls(camera, renderer.domElement);
				
				/*
					设置控制器的目标点
					controls.target.set(x, y, z)
					将控制器的焦点设置在场景中心(0,0,0)
					用户操作时会围绕这个点旋转视角
				*/
				controls.target.set(0, 0, 0);
				
				/*
					更新控制器内部状态
					应用所有设置并准备接收用户输入
				*/
				controls.update();

				/*
					监听控制器变化事件
					当用户通过鼠标/触摸操作改变视角时触发'change'事件
					事件触发时调用render函数重新渲染场景
				*/
				controls.addEventListener('change', render);

				// =============== 窗口大小变化处理 ===============
				
				/*
					监听窗口大小变化事件
					当用户调整浏览器窗口大小时触发'resize'事件
					事件触发时调用onWindowResize函数
				*/
				window.addEventListener('resize', onWindowResize);
			} // init函数结束

			/**
			 * 窗口大小变化处理函数
			 * 功能：当浏览器窗口大小改变时，重新调整相机和渲染器的设置
			 * 确保3D场景始终正确填充窗口，保持正确的宽高比
			 * 无参数，无返回值
			 */
			function onWindowResize() {
				/*
					更新相机宽高比
					窗口大小改变后，需要更新相机宽高比以匹配新的窗口尺寸
					否则3D场景会被拉伸或压缩
				*/
				camera.aspect = window.innerWidth / window.innerHeight;
				
				/*
					更新相机投影矩阵
					相机设置改变后，必须调用updateProjectionMatrix()应用更改
					投影矩阵定义了3D空间如何映射到2D屏幕
				*/
				camera.updateProjectionMatrix();

				/*
					更新渲染器尺寸
					使渲染器画布大小与新的窗口尺寸保持一致
				*/
				renderer.setSize(window.innerWidth, window.innerHeight);

				/*
					重新渲染场景
					应用所有更改并更新显示
				*/
				render();
			}

			/**
			 * 渲染函数 - Three.js应用的核心渲染函数
			 * 功能：将3D场景通过相机视角渲染到画布上
			 * 无参数，无返回值
			 * 
			 * 注意：这个函数可能在以下情况被调用：
			 * 1. 初始化完成后的首次渲染
			 * 2. 用户通过控制器改变视角时
			 * 3. 窗口大小变化后
			 */
			function render() {
				/*
					执行渲染
					renderer.render(scene, camera)
					参数说明：
					- scene：要渲染的场景对象（包含所有3D内容）
					- camera：用于观察场景的相机对象
					这个方法会将3D场景根据相机设置渲染到canvas上
				*/
				renderer.render(scene, camera);
			}
		</script>
	</body>
</html>