<!-- Three.js 2D/3D 形状几何体演示系统
一、项目概述
这是一个基于Three.js的WebGL 3D图形演示系统，专门展示各种2D形状的创建、编辑和3D转换能力。系统通过11种不同的2D形状，以8种不同的视觉表现形式（共计88个可视化对象）展示Three.js的强大几何处理功能。

二、主要功能
1. 形状生成与展示
11种2D形状：包括加利福尼亚州轮廓、三角形、心形、正方形、圆角矩形、跑道形状、圆形、鱼形、圆环、笑脸、样条曲线

8种表现形式：纹理平面、纯色平面、3D挤出形状、实线轮廓、采样虚线、顶点点云、采样点云、3D立体

空间排列：所有形状在3D空间中按照Z轴分布排列，形成立体展示效果

2. 交互功能
旋转控制：通过鼠标拖拽或触摸滑动旋转整个场景

平滑过渡：旋转动画使用线性插值实现平滑效果

响应式设计：自适应窗口大小变化

3. 视觉效果
纹理映射：使用棋盘格纹理展示UV映射

光照系统：点光源跟随相机，确保场景光照充足

材质应用：Phong材质、基础线材质、点材质

抗锯齿：启用WebGL抗锯齿，边缘平滑

三、核心代码结构
1. Three.js核心对象
javascript
// 三大核心对象
scene      = new THREE.Scene();      // 3D场景容器
camera     = new THREE.PerspectiveCamera(); // 透视相机
renderer   = new THREE.WebGLRenderer();     // WebGL渲染器

// 辅助对象
group      = new THREE.Group();      // 对象组（组织所有形状）
light      = new THREE.PointLight(); // 点光源
texture    = THREE.TextureLoader();  // 纹理加载器
2. 形状定义系统
基础形状：使用THREE.Shape()直接创建

路径绘制：moveTo(), lineTo(), quadraticCurveTo(), bezierCurveTo()

复杂形状：使用贝塞尔曲线、圆弧、样条曲线

孔洞形状：使用holes数组添加内部路径

3. 几何体转换流程
text
2D形状定义 → 几何体创建 → 材质应用 → 网格生成 → 场景添加
四、关键技术点
1. 2D形状创建技术
Vector2点集：用于定义复杂轮廓（如加州形状）

链式API：Three.js流畅的形状构建API

贝塞尔曲线：用于创建平滑曲线（心形、鱼形）

圆弧和椭圆：absarc(), absellipse()方法

样条曲线：splineThru()通过控制点创建平滑路径

2. 几何体类型
javascript
// 2D平面几何体
new THREE.ShapeGeometry(shape);

// 3D挤出几何体  
new THREE.ExtrudeGeometry(shape, settings);

// 线条几何体
new THREE.BufferGeometry().setFromPoints(points);

// 点云几何体
new THREE.Points(geometry, material);
3. 材质系统
MeshPhongMaterial：支持光照和纹理的3D材质

LineBasicMaterial：基础线条材质

PointsMaterial：点云材质，可控制点大小

双面渲染：side: THREE.DoubleSide

纹理映射：棋盘格纹理展示UV分布

4. 3D挤出技术
javascript
const extrudeSettings = {
    depth: 8,           // 挤出深度
    bevelEnabled: true, // 启用倒角
    bevelSegments: 2,   // 倒角分段
    steps: 2,           // 挤出分段
    bevelSize: 1,       // 倒角大小
    bevelThickness: 1   // 倒角厚度
};
5. 交互系统
Pointer事件：统一处理鼠标和触摸事件

旋转计算：基于指针移动距离计算目标旋转角度

平滑插值：使用Lerp算法实现平滑旋转过渡

事件委托：在document级别处理事件，确保交互连续性

6. 性能优化
BufferGeometry：高性能几何体类型

设备像素比：适配高DPI屏幕

Stats.js集成：实时性能监控

裁剪平面：优化渲染范围

五、形状技术详解
1. 复杂轮廓形状（加州）
javascript
// 使用Vector2点集定义不规则轮廓
const californiaPts = [];
californiaPts.push(new THREE.Vector2(610, 320));
// ... 22个点定义轮廓
2. 贝塞尔曲线形状（心形）
javascript
// 使用三次贝塞尔曲线创建平滑形状
.bezierCurveTo(控制点1, 控制点2, 终点)
3. 孔洞形状（笑脸）
javascript
// 主形状
const smileyShape = new THREE.Shape();
// 孔洞路径  
const eyePath = new THREE.Path();
// 添加孔洞
smileyShape.holes.push(eyePath);
4. 样条曲线形状
javascript
// 通过控制点创建平滑曲线
.splineThru([控制点数组])
六、渲染流程
初始化阶段

创建场景、相机、渲染器

设置光照和纹理

定义所有2D形状

对象创建阶段

为每个形状创建8种几何体

应用不同材质

设置位置、旋转、缩放

动画循环阶段

更新旋转插值

渲染场景

更新性能统计

交互处理阶段

监听指针事件

计算旋转目标

平滑过渡到目标状态

七、学习价值
这个示例是学习Three.js几何系统的绝佳教材，涵盖了：

2D形状API：完整展示了Three.js的2D绘图能力

3D转换技术：2D到3D的几何转换流程

材质系统：多种材质的应用和配置

交互设计：3D场景的用户交互实现

性能优化：大规模3D对象的性能管理

视觉设计：3D场景的布局和视觉效果设计

八、适用场景
教育演示：计算机图形学教学

设计工具：2D形状设计和预览

数据可视化：复杂数据的几何表示

游戏开发：关卡设计或角色轮廓设计

CAD预览：工程设计的3D预览系统 -->


<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<title>Three.js WebGL 几何体演示 - 各种形状生成与展示</title>
		<!-- 字符编码设置为UTF-8，支持中文显示 -->
		<meta charset="utf-8">
		<!-- 
			视口设置：
			width=device-width: 宽度等于设备宽度
			user-scalable=no: 禁止用户缩放（为了更好的3D体验）
			minimum-scale=1.0: 最小缩放比例
			maximum-scale=1.0: 最大缩放比例
			确保在移动设备上正确显示
		-->
		<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: #f0f0f0;
				/* 设置文字颜色为深灰色，提高可读性 */
				color: #444;
				/* 移除默认的边距和内边距 */
				margin: 0;
				padding: 0;
				/* 隐藏溢出内容 */
				overflow: hidden;
				/* 设置字体族 */
				font-family: Arial, sans-serif;
			}
		</style>
	</head>
	<body>

		<!-- 
			页面信息显示区域
			id="info" 用于JavaScript中可能的DOM操作
			显示中文提示信息
		-->
		<div id="info">Three.js 几何体形状演示 - 点击并拖拽鼠标旋转场景</div>

		<!-- 
			导入映射 (Import Map)
			现代浏览器中的模块解析配置
			告诉浏览器如何将导入标识符映射到实际的模块URL
			类似于Node.js中的package.json的依赖解析
		-->
		<script type="importmap">
			{
				"imports": {
					"three": "../build/three.module.js",
					"three/addons/": "./jsm/"
				}
			}
		</script>

		<!-- 
			主JavaScript模块
			type="module" 表示这是一个ES6模块，支持模块化导入
			现代浏览器原生支持的JavaScript模块系统
		-->
		<script type="module">

			// ============ 导入Three.js库和相关模块 ============
			// 使用ES6模块语法导入Three.js库的所有功能
			// Three.js是一个强大的3D图形库，用于创建和显示3D计算机图形
			import * as THREE from 'three';
			
			// 导入Stats.js性能监控工具
			// Stats.js是一个轻量级的性能监控库，可以显示FPS、内存使用等信息
			// 通常用于Three.js应用的性能调试和优化
			import Stats from 'three/addons/libs/stats.module.js';

			// ============ 全局变量声明 ============
			// 这些变量在整个模块中共享和使用
			let container;      // HTML容器元素，用于存放Three.js的canvas和性能监控器
			let stats;          // Stats.js性能监控器实例
			let camera;         // Three.js相机对象，定义视图的观察方式和位置
			let scene;          // Three.js场景对象，包含所有要渲染的3D对象
			let renderer;       // Three.js渲染器对象，负责将3D场景渲染到2D屏幕上
			let group;          // Three.js的Group对象，用于组织和组合多个3D对象

			// 旋转控制相关变量
			let targetRotation = 0;                // 目标旋转角度（弧度制），控制场景的Y轴旋转
			let targetRotationOnPointerDown = 0;   // 鼠标/触摸按下时的初始旋转角度
			let pointerX = 0;                      // 当前指针（鼠标/触摸）的X坐标位置
			let pointerXOnPointerDown = 0;         // 指针按下时的X坐标位置
			let windowHalfX = window.innerWidth / 2;  // 窗口宽度的一半，用于计算指针相对位置

			// ============ 初始化函数调用 ============
			// 页面加载完成后立即执行初始化函数
			// 这是整个Three.js应用的入口点
			init();

			/**
			 * 初始化函数 - Three.js应用的主要设置函数
			 * 这个函数负责创建所有必要的Three.js对象和设置事件监听器
			 * 它是整个3D场景的构建器
			 */
			function init() {
				// 1. 创建HTML容器
				// 创建一个div元素作为Three.js渲染器和控件的容器
				container = document.createElement( 'div' );
				// 将容器添加到页面的body元素中
				document.body.appendChild( container );

				// 2. 创建Three.js场景
				// Scene是Three.js的核心概念，所有3D对象（网格、灯光、相机）都添加到场景中
				scene = new THREE.Scene();
				// 设置场景的背景颜色为浅灰色（与页面背景一致）
				scene.background = new THREE.Color( 0xf0f0f0 );

				// 3. 创建透视相机
				// PerspectiveCamera模拟人眼的视角，具有近大远小的透视效果
				// 参数说明：
				//   50 - 视野角度 (Field of View, FOV)，单位是度，值越大看到的范围越广
				//   window.innerWidth / window.innerHeight - 宽高比，确保渲染画面不变形
				//   1 - 近裁剪面，距离相机小于这个值的物体不会被渲染（避免视觉错误）
				//   1000 - 远裁剪面，距离相机大于这个值的物体不会被渲染（优化性能）
				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 1000 );
				// 设置相机在3D空间中的位置
				// 参数：X轴位置，Y轴位置，Z轴位置
				// 这里将相机放在场景的(0, 150, 500)位置，相当于在场景上方和后方
				camera.position.set( 0, 150, 500 );
				// 将相机添加到场景中（虽然相机通常不是场景的一部分，但Three.js允许这样做）
				scene.add( camera );

				// 4. 创建并添加光源
				// PointLight是点光源，从一个点向所有方向发射光线
				// 参数说明：
				//   0xffffff - 光源颜色，白色
				//   2.5 - 光源强度，值越大越亮
				//   0 - 光源的照射距离，0表示无限远
				//   0 - 光源的衰减程度，0表示没有衰减
				const light = new THREE.PointLight( 0xffffff, 2.5, 0, 0 );
				// 将光源添加到相机上，这样光源会跟随相机移动
				// 这是一种常见的技巧，确保场景始终有充足的光照
				camera.add( light );

				// 5. 创建组对象
				// Group是Three.js中的容器对象，可以将多个网格（Mesh）组合在一起
				// 这样可以一次性对多个对象进行变换（移动、旋转、缩放）
				group = new THREE.Group();
				// 将整个组向上移动50个单位，使其在场景中的位置更合适
				group.position.y = 50;
				// 将组添加到场景中
				scene.add( group );

				// 6. 创建纹理加载器并加载纹理
				// TextureLoader是Three.js的纹理加载器，用于加载图片作为纹理
				const loader = new THREE.TextureLoader();
				// 加载一个棋盘格纹理图片
				// 这个纹理将用于平面形状的贴图，帮助观察形状的UV映射
				const texture = loader.load( 'textures/uv_grid_opengl.jpg' );
				// 设置纹理的颜色空间为sRGB，这是标准的颜色空间，确保颜色显示正确
				texture.colorSpace = THREE.SRGBColorSpace;

				// 7. 设置纹理属性
				// 纹理包裹模式：设置纹理在U方向（水平）和V方向（垂直）的包裹方式
				// RepeatWrapping表示纹理会重复平铺，而不是拉伸
				texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
				// 设置纹理的重复次数
				// 0.008表示纹理会重复很多次，使每个形状上的纹理都显示多次
				// 这有助于观察纹理在形状上的映射情况
				texture.repeat.set( 0.008, 0.008 );

				// ============ 辅助函数定义 ============

				/**
				 * 添加形状函数 - 创建并添加一个形状的多种表现形式
				 * 这个函数会为每个形状创建8种不同的表现形式，展示Three.js的不同功能
				 * 
				 * @param {THREE.Shape} shape - 要创建的2D形状对象
				 * @param {Object} extrudeSettings - 挤出（3D化）的设置参数
				 * @param {number} color - 形状的颜色（十六进制值，如0xff0000表示红色）
				 * @param {number} x - 形状在X轴的位置
				 * @param {number} y - 形状在Y轴的位置
				 * @param {number} z - 形状在Z轴的位置（用于在3D空间中排列形状）
				 * @param {number} rx - 形状绕X轴的旋转角度（弧度）
				 * @param {number} ry - 形状绕Y轴的旋转角度（弧度）
				 * @param {number} rz - 形状绕Z轴的旋转角度（弧度）
				 * @param {number} s - 形状的缩放比例
				 */
				function addShape( shape, extrudeSettings, color, x, y, z, rx, ry, rz, s ) {

					// 8.1 创建带有纹理的平面形状
					// ShapeGeometry将2D形状转换为平面几何体
					let geometry = new THREE.ShapeGeometry( shape );
					
					// 创建网格（Mesh）对象，几何体+材质=可渲染的3D对象
					let mesh = new THREE.Mesh( 
						geometry,  // 几何体定义形状
						new THREE.MeshPhongMaterial( {  // Phong材质，支持光照和纹理
							side: THREE.DoubleSide,  // 双面渲染，从正面和背面都能看到
							map: texture             // 使用加载的棋盘格纹理
						} ) 
					);
					// 设置网格的位置
					// Z轴减去175，使这种表现形式位于最远处
					mesh.position.set( x, y, z - 175 );
					// 设置网格的旋转
					mesh.rotation.set( rx, ry, rz );
					// 设置网格的缩放（在所有轴上使用相同的缩放比例）
					mesh.scale.set( s, s, s );
					// 将网格添加到组中
					group.add( mesh );

					// 8.2 创建纯色平面形状（无纹理）
					// 重新创建几何体（每个网格需要自己的几何体实例）
					geometry = new THREE.ShapeGeometry( shape );
					mesh = new THREE.Mesh( 
						geometry, 
						new THREE.MeshPhongMaterial( { 
							color: color,           // 使用传入的颜色
							side: THREE.DoubleSide  // 双面渲染
						} ) 
					);
					// Z轴减去125，位于纹理形状的前方
					mesh.position.set( x, y, z - 125 );
					mesh.rotation.set( rx, ry, rz );
					mesh.scale.set( s, s, s );
					group.add( mesh );

					// 8.3 创建挤出形状（3D立体形状）
					// ExtrudeGeometry将2D形状挤出成3D几何体
					geometry = new THREE.ExtrudeGeometry( shape, extrudeSettings );
					mesh = new THREE.Mesh( 
						geometry, 
						new THREE.MeshPhongMaterial( { 
							color: color  // 使用传入的颜色
						} ) 
					);
					// Z轴减去75，位于纯色平面前方
					mesh.position.set( x, y, z - 75 );
					mesh.rotation.set( rx, ry, rz );
					mesh.scale.set( s, s, s );
					group.add( mesh );

					// 8.4 创建形状的线条和点表示
					// 调用另一个函数创建形状的轮廓线和点云表示
					addLineShape( shape, color, x, y, z, rx, ry, rz, s );
				}

				/**
				 * 添加线条形状函数 - 创建形状的线条和点云表示
				 * 这个函数展示形状的轮廓和顶点信息
				 * 
				 * @param {THREE.Shape} shape - 要创建线条表示的2D形状
				 * @param {number} color - 线条和点的颜色
				 * @param {number} x, y, z - 位置坐标
				 * @param {number} rx, ry, rz - 旋转角度
				 * @param {number} s - 缩放比例
				 */
				function addLineShape( shape, color, x, y, z, rx, ry, rz, s ) {
					// 设置形状自动闭合，确保线条和点表示正确
					shape.autoClose = true;

					// 获取形状的实际顶点
					const points = shape.getPoints();
					// 获取等距采样的点（50个点）
					// 这些点沿着形状的轮廓均匀分布
					const spacedPoints = shape.getSpacedPoints( 50 );

					// 创建缓冲几何体
					// BufferGeometry是Three.js的高性能几何体类型
					const geometryPoints = new THREE.BufferGeometry().setFromPoints( points );
					const geometrySpacedPoints = new THREE.BufferGeometry().setFromPoints( spacedPoints );

					// 8.5 创建实线轮廓（使用实际顶点）
					let line = new THREE.Line( 
						geometryPoints,  // 使用实际顶点创建的几何体
						new THREE.LineBasicMaterial( { 
							color: color  // 线条颜色
						} ) 
					);
					// Z轴减去25，位于3D形状的前方
					line.position.set( x, y, z - 25 );
					line.rotation.set( rx, ry, rz );
					line.scale.set( s, s, s );
					group.add( line );

					// 8.6 创建虚线轮廓（使用等距采样点）
					line = new THREE.Line( 
						geometrySpacedPoints,  // 使用采样点创建的几何体
						new THREE.LineBasicMaterial( { 
							color: color 
						} ) 
					);
					// Z轴加25，位于实线轮廓的前方
					line.position.set( x, y, z + 25 );
					line.rotation.set( rx, ry, rz );
					line.scale.set( s, s, s );
					group.add( line );

					// 8.7 创建顶点点云（显示实际顶点位置）
					let particles = new THREE.Points( 
						geometryPoints,  // 使用实际顶点
						new THREE.PointsMaterial( { 
							color: color,  // 点的颜色
							size: 4        // 点的大小（像素）
						} ) 
					);
					// Z轴加75，位于虚线轮廓的前方
					particles.position.set( x, y, z + 75 );
					particles.rotation.set( rx, ry, rz );
					particles.scale.set( s, s, s );
					group.add( particles );

					// 8.8 创建采样点点云（显示等距采样点）
					particles = new THREE.Points( 
						geometrySpacedPoints,  // 使用采样点
						new THREE.PointsMaterial( { 
							color: color, 
							size: 4 
						} ) 
					);
					// Z轴加125，位于最前方
					particles.position.set( x, y, z + 125 );
					particles.rotation.set( rx, ry, rz );
					particles.scale.set( s, s, s );
					group.add( particles );
				}

				// ============ 定义各种2D形状 ============
				// 这部分创建了11种不同的2D形状，展示了Three.js的形状创建能力

				// 9.1 加利福尼亚州轮廓形状
				// 使用多个点定义加州的大致轮廓
				const californiaPts = [];
				// 添加22个点来定义加州的边界
				californiaPts.push( new THREE.Vector2( 610, 320 ) );  // 起点
				californiaPts.push( new THREE.Vector2( 450, 300 ) );
				californiaPts.push( new THREE.Vector2( 392, 392 ) );
				californiaPts.push( new THREE.Vector2( 266, 438 ) );
				californiaPts.push( new THREE.Vector2( 190, 570 ) );
				californiaPts.push( new THREE.Vector2( 190, 600 ) );
				californiaPts.push( new THREE.Vector2( 160, 620 ) );
				californiaPts.push( new THREE.Vector2( 160, 650 ) );
				californiaPts.push( new THREE.Vector2( 180, 640 ) );
				californiaPts.push( new THREE.Vector2( 165, 680 ) );
				californiaPts.push( new THREE.Vector2( 150, 670 ) );
				californiaPts.push( new THREE.Vector2( 90, 737 ) );
				californiaPts.push( new THREE.Vector2( 80, 795 ) );
				californiaPts.push( new THREE.Vector2( 50, 835 ) );
				californiaPts.push( new THREE.Vector2( 64, 870 ) );
				californiaPts.push( new THREE.Vector2( 60, 945 ) );
				californiaPts.push( new THREE.Vector2( 300, 945 ) );
				californiaPts.push( new THREE.Vector2( 300, 743 ) );
				californiaPts.push( new THREE.Vector2( 600, 473 ) );
				californiaPts.push( new THREE.Vector2( 626, 425 ) );
				californiaPts.push( new THREE.Vector2( 600, 370 ) );
				californiaPts.push( new THREE.Vector2( 610, 320 ) );  // 终点，闭合路径
				
				// 将所有点缩小为原来的1/4，使形状大小合适
				for ( let i = 0; i < californiaPts.length; i ++ ) {
					californiaPts[ i ].multiplyScalar( 0.25 );
				}
				// 使用点数组创建形状
				const californiaShape = new THREE.Shape( californiaPts );

				// 9.2 三角形形状
				// 使用链式调用创建三角形
				const triangleShape = new THREE.Shape()
					.moveTo( 80, 20 )     // 移动到起点（三角形顶点）
					.lineTo( 40, 80 )     // 画线到左下角
					.lineTo( 120, 80 )    // 画线到右下角
					.lineTo( 80, 20 );    // 闭合路径，画线回起点

				// 9.3 心形形状
				// 使用贝塞尔曲线创建心形
				const x = 0, y = 0;  // 基准点
				const heartShape = new THREE.Shape()
					.moveTo( x + 25, y + 25 )  // 从心形的凹点开始
					// 三次贝塞尔曲线：控制点1，控制点2，终点
					.bezierCurveTo( x + 25, y + 25, x + 20, y, x, y )  // 左上曲线
					.bezierCurveTo( x - 30, y, x - 30, y + 35, x - 30, y + 35 )  // 左中曲线
					.bezierCurveTo( x - 30, y + 55, x - 10, y + 77, x + 25, y + 95 )  // 左下曲线
					.bezierCurveTo( x + 60, y + 77, x + 80, y + 55, x + 80, y + 35 )  // 右下曲线
					.bezierCurveTo( x + 80, y + 35, x + 80, y, x + 50, y )  // 右中曲线
					.bezierCurveTo( x + 35, y, x + 25, y + 25, x + 25, y + 25 );  // 右上曲线

				// 9.4 正方形形状
				const sqLength = 80;  // 正方形边长
				const squareShape = new THREE.Shape()
					.moveTo( 0, 0 )            // 左下角
					.lineTo( 0, sqLength )     // 左上角
					.lineTo( sqLength, sqLength )  // 右上角
					.lineTo( sqLength, 0 )     // 右下角
					.lineTo( 0, 0 );           // 闭合回左下角

				// 9.5 圆角矩形形状
				// 使用立即执行函数表达式(IIFE)创建圆角矩形
				const roundedRectShape = new THREE.Shape();
				// 定义圆角矩形绘制函数
				( function roundedRect( ctx, x, y, width, height, radius ) {
					// 从左上角圆角的起点开始
					ctx.moveTo( x, y + radius );
					// 左边垂直线
					ctx.lineTo( x, y + height - radius );
					// 左下角圆角（二次贝塞尔曲线）
					ctx.quadraticCurveTo( x, y + height, x + radius, y + height );
					// 底部水平线
					ctx.lineTo( x + width - radius, y + height );
					// 右下角圆角
					ctx.quadraticCurveTo( x + width, y + height, x + width, y + height - radius );
					// 右边垂直线
					ctx.lineTo( x + width, y + radius );
					// 右上角圆角
					ctx.quadraticCurveTo( x + width, y, x + width - radius, y );
					// 顶部水平线
					ctx.lineTo( x + radius, y );
					// 左上角圆角，闭合路径
					ctx.quadraticCurveTo( x, y, x, y + radius );
				} )( roundedRectShape, 0, 0, 50, 50, 20 );  // 调用函数，传入参数

				// 9.6 跑道形状（两端半圆的矩形）
				const trackShape = new THREE.Shape()
					.moveTo( 40, 40 )  // 左上角内侧起点
					.lineTo( 40, 160 ) // 左边垂直线
					// 底部半圆（绝对圆弧）
					// 参数：圆心X，圆心Y，半径，起始角，终止角，顺时针
					.absarc( 60, 160, 20, Math.PI, 0, true )
					.lineTo( 80, 40 )  // 右边垂直线
					// 顶部半圆
					.absarc( 60, 40, 20, 2 * Math.PI, Math.PI, true );

				// 9.7 圆形（使用4个二次贝塞尔曲线近似）
				const circleRadius = 40;
				const circleShape = new THREE.Shape()
					.moveTo( 0, circleRadius )  // 从顶部开始
					.quadraticCurveTo( circleRadius, circleRadius, circleRadius, 0 )  // 右上四分之一
					.quadraticCurveTo( circleRadius, -circleRadius, 0, -circleRadius )  // 右下四分之一
					.quadraticCurveTo( -circleRadius, -circleRadius, -circleRadius, 0 )  // 左下四分之一
					.quadraticCurveTo( -circleRadius, circleRadius, 0, circleRadius );  // 左上四分之一

				// 9.8 鱼形
				const fishShape = new THREE.Shape()
					.moveTo( x, y )  // 鱼嘴起点
					.quadraticCurveTo( x + 50, y - 80, x + 90, y - 10 )  // 背部曲线
					.quadraticCurveTo( x + 100, y - 10, x + 115, y - 40 )  // 尾部上侧
					.quadraticCurveTo( x + 115, y, x + 115, y + 40 )  // 尾部曲线
					.quadraticCurveTo( x + 100, y + 10, x + 90, y + 10 )  // 尾部下侧
					.quadraticCurveTo( x + 50, y + 80, x, y );  // 腹部曲线，闭合到起点

				// 9.9 圆环形状（带孔的圆）
				const arcShape = new THREE.Shape()
					.moveTo( 50, 10 )  // 外圆起点
					// 绘制外圆（完整的360度圆弧）
					// 参数：圆心X，圆心Y，半径，起始角，终止角，逆时针
					.absarc( 10, 10, 40, 0, Math.PI * 2, false );
				
				// 创建内孔路径（反向绘制形成孔洞）
				const holePath = new THREE.Path()
					.moveTo( 20, 10 )  // 内圆起点
					// 绘制内圆（反向，clockwise=true）
					.absarc( 10, 10, 10, 0, Math.PI * 2, true );
				// 将孔路径添加到形状中，Three.js会自动处理布尔运算
				arcShape.holes.push( holePath );

				// 9.10 笑脸形状（带多个孔）
				const smileyShape = new THREE.Shape()
					.moveTo( 80, 40 )  // 笑脸外轮廓起点
					.absarc( 40, 40, 40, 0, Math.PI * 2, false );  // 绘制圆形外轮廓
				
				// 左眼（椭圆形）
				const smileyEye1Path = new THREE.Path()
					.moveTo( 35, 20 )
					// 绝对椭圆：中心X，中心Y，X半径，Y半径，起始角，终止角，顺时针
					.absellipse( 25, 20, 10, 10, 0, Math.PI * 2, true );
				
				// 右眼（圆形）
				const smileyEye2Path = new THREE.Path()
					.moveTo( 65, 20 )
					.absarc( 55, 20, 10, 0, Math.PI * 2, true );
				
				// 嘴巴（复杂的曲线路径）
				const smileyMouthPath = new THREE.Path()
					.moveTo( 20, 40 )  // 嘴巴左起点
					.quadraticCurveTo( 40, 60, 60, 40 )      // 上嘴唇曲线
					.bezierCurveTo( 70, 45, 70, 50, 60, 60 ) // 嘴角曲线（三次贝塞尔）
					.quadraticCurveTo( 40, 80, 20, 60 )      // 下嘴唇曲线
					.quadraticCurveTo( 5, 50, 20, 40 );      // 闭合曲线
				
				// 将所有孔添加到笑脸形状中
				smileyShape.holes.push( smileyEye1Path );
				smileyShape.holes.push( smileyEye2Path );
				smileyShape.holes.push( smileyMouthPath );

				// 9.11 样条曲线形状
				// 使用一系列控制点创建平滑曲线
				const splinepts = [];
				splinepts.push( new THREE.Vector2( 70, 20 ) );
				splinepts.push( new THREE.Vector2( 80, 90 ) );
				splinepts.push( new THREE.Vector2( -30, 70 ) );
				splinepts.push( new THREE.Vector2( 0, 0 ) );  // 终点，与起点相同形成闭合
				
				const splineShape = new THREE.Shape()
					.moveTo( 0, 0 )  // 起点
					// 通过样条曲线连接所有点
					// splineThru创建平滑的曲线通过所有控制点
					.splineThru( splinepts );

				// 10. 定义挤出设置（用于创建3D立体形状）
				// 挤出是将2D形状转换为3D形状的过程
				const extrudeSettings = { 
					depth: 8,           // 挤出深度：形状在Z轴方向延伸的距离
					bevelEnabled: true, // 启用倒角：在挤出边缘创建斜面效果
					bevelSegments: 2,   // 倒角分段数：值越大倒角越平滑
					steps: 2,           // 挤出分段数：沿深度方向的分段数
					bevelSize: 1,       // 倒角大小：倒角斜面的大小
					bevelThickness: 1   // 倒角厚度：倒角的高度
				};

				// ============ 创建所有形状实例并添加到场景 ============
				// 调用addShape函数创建每种形状的8种表现形式
				// 参数：形状, 挤出设置, 颜色, X位置, Y位置, Z位置, X旋转, Y旋转, Z旋转, 缩放
				
				// 加州形状 - 橙色，位于左下方
				addShape( californiaShape, extrudeSettings, 0xf08000, -300, -100, 0, 0, 0, 0, 1 );
				// 三角形 - 蓝色，位于左中
				addShape( triangleShape, extrudeSettings, 0x8080f0, -180, 0, 0, 0, 0, 0, 1 );
				// 圆角矩形 - 绿色，位于左上方
				addShape( roundedRectShape, extrudeSettings, 0x008000, -150, 150, 0, 0, 0, 0, 1 );
				// 跑道形状 - 青色，位于右下方
				addShape( trackShape, extrudeSettings, 0x008080, 200, -100, 0, 0, 0, 0, 1 );
				// 正方形 - 蓝色，位于右中
				addShape( squareShape, extrudeSettings, 0x0040f0, 150, 100, 0, 0, 0, 0, 1 );
				// 心形 - 红色，位于中右，旋转180度
				addShape( heartShape, extrudeSettings, 0xf00000, 60, 100, 0, 0, 0, Math.PI, 1 );
				// 圆形 - 绿色，位于右上方
				addShape( circleShape, extrudeSettings, 0x00f000, 120, 250, 0, 0, 0, 0, 1 );
				// 鱼形 - 灰色，位于中上方
				addShape( fishShape, extrudeSettings, 0x404040, -60, 200, 0, 0, 0, 0, 1 );
				// 笑脸 - 紫色，位于左上方，旋转180度
				addShape( smileyShape, extrudeSettings, 0xf000f0, -200, 250, 0, 0, 0, Math.PI, 1 );
				// 圆环 - 棕色，位于中左
				addShape( arcShape, extrudeSettings, 0x804000, 150, 0, 0, 0, 0, 0, 1 );
				// 样条曲线 - 灰色，位于中下方
				addShape( splineShape, extrudeSettings, 0x808080, -50, -100, 0, 0, 0, 0, 1 );

				// 11. 添加圆环内孔的线条表示
				// 单独显示圆环的内孔线条，展示孔洞的几何结构
				addLineShape( arcShape.holes[ 0 ], 0x804000, 150, 0, 0, 0, 0, 0, 1 );

				// 12. 添加笑脸孔洞（眼睛和嘴巴）的线条表示
				// 遍历笑脸的所有孔洞，单独显示它们的线条
				for ( let i = 0; i < smileyShape.holes.length; i += 1 ) {
					addLineShape( smileyShape.holes[ i ], 0xf000f0, -200, 250, 0, 0, 0, Math.PI, 1 );
				}

				// ============ 创建WebGL渲染器 ============
				// WebGLRenderer是Three.js的核心渲染器，使用WebGL API进行硬件加速渲染
				renderer = new THREE.WebGLRenderer( { 
					antialias: true  // 启用抗锯齿，使边缘更平滑
				} );
				// 设置设备像素比，在高DPI屏幕上获得更清晰的渲染
				renderer.setPixelRatio( window.devicePixelRatio );
				// 设置渲染器大小为整个窗口
				renderer.setSize( window.innerWidth, window.innerHeight );
				// 设置动画循环回调函数，requestAnimationFrame的Three.js封装
				renderer.setAnimationLoop( animate );
				// 将渲染器的canvas元素添加到容器中
				container.appendChild( renderer.domElement );

				// 13. 创建并添加性能监控器
				stats = new Stats();
				// 默认显示FPS（每秒帧数），点击可以切换到MS（每帧毫秒数）和MB（内存使用）
				container.appendChild( stats.dom );

				// 14. 设置事件监听器
				// 禁用容器的触摸默认行为（如滚动），防止干扰3D交互
				container.style.touchAction = 'none';
				// 监听指针按下事件（支持鼠标和触摸）
				container.addEventListener( 'pointerdown', onPointerDown );

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

			/**
			 * 窗口大小改变事件处理函数
			 * 当浏览器窗口大小改变时，需要调整相机和渲染器的设置
			 * 以保持3D场景的正确比例和显示
			 */
			function onWindowResize() {
				// 更新窗口一半宽度，用于指针位置计算
				windowHalfX = window.innerWidth / 2;
				
				// 更新相机的宽高比
				// 宽高比 = 窗口宽度 / 窗口高度
				camera.aspect = window.innerWidth / window.innerHeight;
				// 更新相机的投影矩阵
				// 当相机参数改变时，必须调用此方法更新内部矩阵
				camera.updateProjectionMatrix();
				
				// 更新渲染器大小，使其填充整个窗口
				renderer.setSize( window.innerWidth, window.innerHeight );
			}

			/**
			 * 指针按下事件处理函数
			 * 处理鼠标点击或触摸开始事件
			 * 
			 * @param {PointerEvent} event - 指针事件对象
			 */
			function onPointerDown( event ) {
				// 检查是否是主指针事件
				// 对于多点触控，只有主指针（第一个触摸点）会触发旋转
				if ( event.isPrimary === false ) return;

				// 计算指针按下时的位置（相对于屏幕中心）
				// event.clientX是相对于浏览器窗口的水平坐标
				// 减去windowHalfX得到相对于屏幕中心的坐标
				pointerXOnPointerDown = event.clientX - windowHalfX;
				// 记录按下时的目标旋转角度
				targetRotationOnPointerDown = targetRotation;

				// 添加指针移动和抬起事件监听器
				// 在document上监听，确保即使指针移出容器也能继续跟踪
				document.addEventListener( 'pointermove', onPointerMove );
				document.addEventListener( 'pointerup', onPointerUp );
			}

			/**
			 * 指针移动事件处理函数
			 * 处理鼠标移动或触摸移动事件
			 * 
			 * @param {PointerEvent} event - 指针事件对象
			 */
			function onPointerMove( event ) {
				// 检查是否是主指针事件
				if ( event.isPrimary === false ) return;

				// 计算当前指针位置（相对于屏幕中心）
				pointerX = event.clientX - windowHalfX;
				
				// 计算目标旋转角度
				// 根据指针移动的距离计算旋转角度
				// 0.02是旋转灵敏度系数，值越大旋转越快
				targetRotation = targetRotationOnPointerDown + ( pointerX - pointerXOnPointerDown ) * 0.02;
			}

			/**
			 * 指针抬起事件处理函数
			 * 处理鼠标释放或触摸结束事件
			 * 
			 * @param {PointerEvent} event - 指针事件对象
			 */
			function onPointerUp( event ) {
				// 检查是否是主指针事件
				if ( event.isPrimary === false ) return;

				// 移除指针移动和抬起事件监听器
				// 交互结束，停止监听相关事件
				document.removeEventListener( 'pointermove', onPointerMove );
				document.removeEventListener( 'pointerup', onPointerUp );
			}

			/**
			 * 动画循环函数
			 * 这是Three.js应用的核心循环，每帧调用一次
			 * 负责更新场景状态和重新渲染
			 */
			function animate() {
				// 调用渲染函数，绘制当前帧
				render();
				// 更新性能监控器显示
				stats.update();
			}

			/**
			 * 渲染函数
			 * 执行实际的3D场景渲染
			 */
			function render() {
				// 平滑旋转过渡
				// 使用线性插值(Lerp)使旋转更平滑
				// 当前旋转角度逐步接近目标旋转角度
				// 0.05是插值系数，值越大过渡越快
				group.rotation.y += ( targetRotation - group.rotation.y ) * 0.05;
				
				// 渲染场景
				// 将3D场景从相机的视角渲染到2D画布上
				renderer.render( scene, camera );
			}

		</script>

	</body>
</html>