<!-- Three.js CSG（构造立体几何）演示 - 详细功能和技术分析
一、项目概述
这是一个基于Web的交互式3D构造立体几何（CSG）演示应用，使用Three.js图形库和three-bvh-csg扩展库实现。该应用展示了实时的三维布尔运算功能，允许用户直观地观察和理解几何体的组合、相交和裁剪操作。

二、核心功能
1. 实时三维布尔运算
减法运算（SUBTRACTION）：从基础几何体（二十面体）中减去操作几何体（圆柱体）的部分

交集运算（INTERSECTION）：仅保留两个几何体重叠的部分

并集运算（ADDITION）：将两个几何体合并为一个整体

2. 动态可视化效果
几何体动画：

基础二十面体以不同速度在三轴上旋转

操作圆柱体反向旋转，并在XZ平面上周期性缩放

核心参考点（橙色小球）作为空间位置参考

实时线框切换：可切换显示实体模型或线框模型

3. 交互式控制
视角控制：鼠标拖拽旋转、滚轮缩放

参数调节：通过GUI面板实时调整运算类型和显示选项

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

4. 视觉增强效果
逼真的阴影系统：平行光投射动态阴影

多层次光照：半球光提供环境照明，平行光提供方向性照明

材质效果：使用PBR（基于物理的渲染）材质，支持自发光效果

三、主要技术架构
1. Three.js核心架构
text
Three.js生态系统
├── 场景图(Scene Graph)
├── 相机系统(PerspectiveCamera)
├── 渲染器(WebGLRenderer)
├── 几何体系统(Geometry)
├── 材质系统(Material)
└── 光照系统(Lights)
2. CSG技术实现
text
three-bvh-csg架构
├── Brush类 - 表示参与运算的几何体
├── Evaluator类 - 执行布尔运算的核心
├── BVH加速结构 - 提高运算性能
└── 布尔运算引擎
    ├── 多边形裁剪
    ├── 边界体积层次遍历
    └── 结果网格生成
四、关键技术点详解
1. 构造立体几何（CSG）算法
数学原理：基于集合论的交、并、差运算

实现机制：

多边形相交测试

空间分割算法

布尔运算分类（in/out/boundary）

性能优化：使用BVH（包围体积层次）加速结构，将O(n²)复杂度优化为O(n log n)

2. WebGL渲染管线
text
顶点处理 → 图元装配 → 光栅化 → 片元处理 → 帧缓冲
着色器编程：顶点着色器和片元着色器

深度缓冲：解决Z-fighting问题

阴影映射：两通道渲染技术

3. 动画系统设计
javascript
// 基于时间的动画计算
const t = window.performance.now() + 9000;
const s = 0.5 + 0.5 * (1 + Math.sin(t * 0.001));
时间驱动：使用performance.now()获取高精度时间

周期性动画：正弦函数产生平滑循环效果

矩阵更新：确保世界变换正确传播

4. 性能优化技术
多边形偏移（Polygon Offset）：防止深度冲突（Z-fighting）

实例重用：几何体和材质实例缓存

有效更新：仅当参数变化时重新计算CSG

阴影优化：合理的阴影贴图大小和偏移参数

5. 用户交互系统
text
事件流：用户输入 → 事件处理器 → 状态更新 → 渲染更新
OrbitControls：提供自然的3D导航体验

GUI集成：lil-gui库创建直观的控制界面

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

五、技术亮点
1. 模块化架构
javascript
// ES6模块化导入
import * as THREE from 'three';
import { SUBTRACTION, Brush, Evaluator } from 'three-bvh-csg';
清晰的依赖管理

易于维护和扩展

2. 物理正确的渲染
PBR材质系统

真实的光照模型

软阴影效果

3. 内存管理
几何体重用机制

材质共享

避免内存泄漏

4. 跨平台兼容
现代浏览器支持

移动设备适配

高DPI屏幕优化

六、应用场景
1. 教育领域
三维几何教学

布尔运算可视化

计算机图形学课程

2. 设计领域
产品原型设计

建筑模型构建

3D打印准备

3. 研究领域
几何算法研究

图形性能测试

用户交互研究

七、技术栈总结
技术组件	用途	关键特性
Three.js	3D渲染引擎	WebGL封装、场景管理、相机控制
three-bvh-csg	CSG运算库	布尔运算、BVH加速、实时更新
three-mesh-bvh	空间加速	包围体积层次、碰撞检测优化
lil-gui	用户界面	轻量级、易用、可定制
Stats.js	性能监控	FPS显示、内存监控
八、扩展可能性
更多几何体支持：添加球体、立方体、环面等

多物体运算：支持三个或更多几何体的复合运算

材质系统增强：支持纹理映射、法线贴图

导出功能：支持导出为STL、OBJ等3D格式

撤销/重做：操作历史记录 -->


<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<!-- 页面标题：Three.js几何体 - 构造立体几何演示 -->
		<title>Three.js几何体 - 构造立体几何(CSG)演示</title>
		<!-- 字符编码设置为UTF-8，支持中文字符 -->
		<meta charset="utf-8">
		<!-- 
			视口设置：
			width=device-width - 宽度等于设备宽度
			user-scalable=no - 禁止用户手动缩放页面
			minimum-scale=1.0 - 最小缩放比例为1.0
			maximum-scale=1.0 - 最大缩放比例为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>
			/* 
				主体样式设置：
				background-color - 设置页面背景颜色为浅灰色(#eeeeee)
				color - 设置默认文本颜色为深灰色(#333)
			*/
			body {
				background-color: #eeeeee;
				color: #333;
			}

			/* 
				链接样式设置：
				color - 设置链接颜色为青色(#009688)
				text-decoration - 添加下划线装饰
			*/
			a {
				color: #009688;
				text-decoration: underline;
			}
		</style>
	</head>

	<body>
		<!-- 
			页面信息展示区域：
			id="info" - 为这个div元素设置唯一标识符，方便CSS和JavaScript操作
			包含Three.js和CSG库的介绍信息
		-->
		<div id="info">
			<!-- 
				第一行：Three.js库链接和CSG库链接
				href - 链接目标地址
				target="_blank" - 在新标签页打开链接
				rel="noopener" - 安全设置，防止新页面访问原页面的window对象
			-->
			<a href="https://threejs.org" target="_blank" rel="noopener">Three.js</a> 
			构造立体几何(CSG)演示 - 
			<a href="https://github.com/gkjohnson/three-bvh-csg" target="_blank" rel="noopener">three-bvh-csg库</a><br/>
			<!-- 
				第二行：项目仓库链接和中文说明
				提供更多信息和示例的链接
			-->
			这是一个构造立体几何(CSG)的交互式演示，展示了Three.js结合three-bvh-csg库实现的布尔运算功能。<br/>
			点击查看<a href="https://github.com/gkjohnson/three-bvh-csg" target="_blank" rel="noopener">主项目仓库</a>获取更多信息和示例。<br/>
			<!-- 
				第三行：操作说明
				指导用户如何使用这个演示页面
			-->
			操作说明：使用鼠标左键拖拽旋转视角，使用鼠标滚轮缩放，右侧控制面板可调整布尔运算类型和显示选项。
		</div>

		<!-- 
			导入映射(Import Map)：
			这是一个现代JavaScript功能，用于定义模块导入的映射关系
			让浏览器知道如何解析import语句中的模块标识符
		-->
		<script type="importmap">
			{
				"imports": {
					"three": "../build/three.module.js",
					
					"three/addons/": "./jsm/",
					
					"three-mesh-bvh": "https://unpkg.com/three-mesh-bvh@0.7.3/build/index.module.js",
					
					"three-bvh-csg": "https://unpkg.com/three-bvh-csg@0.0.16/build/index.module.js"
				}
			}
		</script>

		<!-- 
			主JavaScript模块：
			type="module" - 表示这是一个ES6模块，支持模块化导入导出
			这是整个页面的核心逻辑代码
		-->
		<script type="module">
			// ==================== 模块导入部分 ====================
			// 导入Three.js核心库的所有功能，并使用THREE作为命名空间
			// Three.js是一个强大的3D图形库，用于在浏览器中创建和显示3D内容
			import * as THREE from 'three';
			
			// 导入性能监控模块
			// Stats.js是一个轻量级的JavaScript性能监控器，显示FPS（帧率）等信息
			import Stats from 'three/addons/libs/stats.module.js';
			
			// 导入轨道控制器
			// OrbitControls允许用户通过鼠标拖拽和滚轮来交互式地控制相机
			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
			
			// 导入GUI库
			// lil-gui是一个轻量级的图形用户界面库，用于创建控制面板
			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
			
			// 导入CSG（构造立体几何）相关模块
			// 从three-bvh-csg库中导入以下内容：
			// SUBTRACTION - 布尔减操作：从基础几何体中减去操作几何体的部分
			// INTERSECTION - 布尔交操作：只保留基础几何体和操作几何体重叠的部分
			// ADDITION - 布尔加操作：将两个几何体合并为一个
			// Brush - 刷子类，表示参与CSG运算的几何体
			// Evaluator - 评估器类，负责执行实际的布尔运算
			import { SUBTRACTION, INTERSECTION, ADDITION, Brush, Evaluator } from 'three-bvh-csg';

			// ==================== 全局变量声明部分 ====================
			// 这些变量将在多个函数中使用，因此声明为全局变量
			let stats;           // 性能监控器实例
			let camera, scene, renderer;  // Three.js核心三要素：相机、场景、渲染器
			let baseBrush, brush; // CSG运算中的两个刷子：基础刷子和操作刷子
			let core;            // 核心小球几何体，作为视觉参考点，不参与CSG运算
			let result, evaluator, wireframe; // CSG相关变量
			// result - 存储CSG运算结果的网格
			// evaluator - CSG评估器实例，执行布尔运算
			// wireframe - 线框网格，用于显示几何体的线框结构

			// ==================== 控制参数对象 ====================
			// 这个对象存储了用户可以通过GUI界面调整的所有参数
			const params = {
				// 布尔运算类型，初始值为减法运算
				operation: SUBTRACTION,
				
				// 是否使用几何体组，初始值为true
				// 当为true时，CSG运算会保留原始几何体的分组信息，可用于材质分离
				useGroups: true,
				
				// 是否显示线框，初始值为false（显示实体）
				wireframe: false,
			};

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

			// ==================== 初始化函数定义 ====================
			// 这个函数负责初始化整个3D场景的所有组件
			function init() {
				// ---------- 相机设置 ----------
				// 创建透视相机(PerspectiveCamera)，模拟人眼观察3D世界的方式
				// 参数说明：
				// 50 - 视野角度(Field of View)，单位是度，值越小看到的范围越小（类似望远镜）
				// window.innerWidth / window.innerHeight - 宽高比，确保图像不变形
				// 1 - 近裁剪面，距离相机小于1单位的物体不会被渲染
				// 100 - 远裁剪面，距离相机大于100单位的物体不会被渲染
				camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 100);
				
				// 设置相机初始位置：
				// 1. set(-1, 1, 1) - 设置相机在三维空间中的坐标
				// 2. normalize() - 将向量标准化为单位长度（长度为1）
				// 3. multiplyScalar(10) - 将单位向量乘以10，使相机距离原点10个单位
				// 这样设置确保相机从斜上方观察原点
				camera.position.set(-1, 1, 1).normalize().multiplyScalar(10);

				// ---------- 场景设置 ----------
				// 创建场景(Scene)对象，场景是所有3D对象的容器
				scene = new THREE.Scene();
				
				// 设置场景背景颜色为淡粉色(0xfce4ec)
				// 十六进制颜色代码：0x表示十六进制，fce4ec是RGB值
				scene.background = new THREE.Color(0xfce4ec);

				// ---------- 光照设置 ----------
				// 创建半球光(HemisphereLight)，模拟自然光照
				// 参数说明：
				// 0xffffff - 天空颜色（从上方照射的光颜色），白色
				// 0xbfd4d2 - 地面颜色（从下方反射的光颜色），淡青色
				// 3 - 光照强度，值越大越亮
				const ambient = new THREE.HemisphereLight(0xffffff, 0xbfd4d2, 3);
				scene.add(ambient); // 将半球光添加到场景中

				// 创建平行光(DirectionalLight)，模拟太阳光（方向性光源）
				const directionalLight = new THREE.DirectionalLight(0xffffff, 0.3);
				// 设置光源位置，从(1, 4, 3)方向照射，并放大3倍
				directionalLight.position.set(1, 4, 3).multiplyScalar(3);
				directionalLight.castShadow = true; // 启用阴影投射
				directionalLight.shadow.mapSize.setScalar(2048); // 设置阴影贴图大小为2048x2048像素
				// 阴影偏移设置，防止阴影出现伪影
				directionalLight.shadow.bias = -1e-4; // 基本偏移
				directionalLight.shadow.normalBias = 1e-4; // 法线偏移，基于表面法线调整
				scene.add(directionalLight); // 将平行光添加到场景中

				// ---------- 渲染器设置 ----------
				// 创建WebGL渲染器(WebGLRenderer)，负责将3D场景绘制到HTML canvas元素上
				// { antialias: true } - 启用抗锯齿，使边缘更平滑
				renderer = new THREE.WebGLRenderer({ antialias: true });
				
				// 设置设备像素比，确保在高DPI屏幕（如Retina屏幕）上清晰显示
				renderer.setPixelRatio(window.devicePixelRatio);
				
				// 设置渲染器尺寸为整个浏览器窗口大小
				renderer.setSize(window.innerWidth, window.innerHeight);
				
				// 设置动画循环回调函数为animate，每帧自动调用
				// 替代传统的requestAnimationFrame，这是Three.js的推荐方式
				renderer.setAnimationLoop(animate);
				
				// 启用阴影映射
				renderer.shadowMap.enabled = true;
				
				// 设置阴影类型为PCFSoftShadowMap（百分比接近滤波软阴影）
				// 这种阴影类型会产生柔和的阴影边缘
				renderer.shadowMap.type = THREE.PCFShadowMap;
				
				// 将渲染器的canvas元素添加到页面的body中
				// renderer.domElement是渲染器创建的<canvas>元素
				document.body.appendChild(renderer.domElement);

				// ---------- 性能监控器设置 ----------
				// 创建Stats.js实例，用于监控性能（帧率等）
				stats = new Stats();
				
				// 将性能监控器的DOM元素添加到页面中
				// 默认显示在左上角，点击可以切换显示模式（FPS/MS/MB）
				document.body.appendChild(stats.dom);

				// ---------- 阴影平面设置 ----------
				// 创建一个平面网格作为阴影接收面
				const plane = new THREE.Mesh(
					// 平面几何体，默认大小为1x1
					new THREE.PlaneGeometry(),
					
					// 阴影材质(ShadowMaterial)，只显示阴影，不显示材质本身的颜色
					new THREE.ShadowMaterial({
						color: 0xd81b60, // 材质基础颜色（洋红色）
						transparent: true, // 启用透明度
						opacity: 0.075,   // 透明度值，非常淡
						side: THREE.DoubleSide, // 双面渲染，两面都显示
					}),
				);
				
				// 设置平面位置：Y轴向下3个单位
				plane.position.y = -3;
				
				// 旋转平面：绕X轴旋转-90度（负的π/2弧度）
				// 使平面从垂直变为水平，成为地面
				plane.rotation.x = -Math.PI / 2;
				
				// 缩放平面：在所有轴上放大10倍
				plane.scale.setScalar(10);
				
				// 启用阴影接收
				plane.receiveShadow = true;
				
				// 将平面添加到场景中
				scene.add(plane);

				// ---------- CSG评估器创建 ----------
				// 创建CSG评估器实例，用于执行布尔运算
				evaluator = new Evaluator();

				// ---------- 基础刷子创建 ----------
				// 创建基础刷子（二十面体），作为CSG运算的基础几何体
				baseBrush = new Brush(
					// 二十面体几何体(IcosahedronGeometry)
					// 参数说明：
					// 2 - 半径，二十面体的大小
					// 3 - 细分次数，值越大面数越多，几何体越平滑
					new THREE.IcosahedronGeometry(2, 3),
					
					// 标准网格材质(MeshStandardMaterial)
					// 这是一种基于物理的渲染(PBR)材质，对光照反应更真实
					new THREE.MeshStandardMaterial({
						flatShading: true, // 平面着色，每个面显示为单一颜色，产生低多边形风格
						
						// 多边形偏移设置，用于防止Z-fighting（深度冲突）
						// 当两个表面非常接近时，会出现闪烁现象，多边形偏移可以解决这个问题
						polygonOffset: true,      // 启用多边形偏移
						polygonOffsetUnits: 1,    // 偏移单位
						polygonOffsetFactor: 1,   // 偏移因子
					}),
				);

				// ---------- 操作刷子创建 ----------
				// 创建操作刷子（圆柱体），用于与基础刷子进行布尔运算
				brush = new Brush(
					// 圆柱体几何体(CylinderGeometry)
					// 参数说明：
					// 1 - 顶部半径
					// 1 - 底部半径（与顶部相同，所以是直立圆柱）
					// 5 - 高度
					// 45 - 径向分段数，值越大圆柱侧面越平滑
					new THREE.CylinderGeometry(1, 1, 5, 45),
					
					// 另一个标准网格材质
					new THREE.MeshStandardMaterial({
						color: 0x80cbc4, // 设置材质颜色为青色
						
						// 同样启用多边形偏移防止深度冲突
						polygonOffset: true,
						polygonOffsetUnits: 1,
						polygonOffsetFactor: 1,
					}),
				);

				// ---------- 核心小球创建 ----------
				// 创建一个小球作为视觉参考点，帮助理解空间位置
				// 这个小球不参与CSG运算，直接添加到场景中
				core = new Brush(
					// 小二十面体几何体，半径0.15，很小
					new THREE.IcosahedronGeometry(0.15, 1),
					
					// 标准网格材质，设置为橙色并带有自发光效果
					new THREE.MeshStandardMaterial({
						flatShading: true, // 平面着色
						color: 0xff9800,   // 基础颜色（橙色）
						emissive: 0xff9800, // 自发光颜色（同样为橙色）
						emissiveIntensity: 0.35, // 自发光强度，使小球微微发光
						
						// 多边形偏移设置
						polygonOffset: true,
						polygonOffsetUnits: 1,
						polygonOffsetFactor: 1,
					}),
				);
				
				// 设置小球投射阴影
				core.castShadow = true;
				
				// 将小球直接添加到场景中（不参与CSG运算）
				scene.add(core);

				// ---------- 线框网格创建 ----------
				// 创建一个线框网格，用于显示CSG结果的线框结构
				wireframe = new THREE.Mesh(
					undefined, // 几何体暂时为空，将在动画循环中动态设置
					
					// 基础线框材质(MeshBasicMaterial)
					new THREE.MeshBasicMaterial({
						color: 0x009688, // 线框颜色为青色
						wireframe: true, // 启用线框模式，只显示边而不显示面
					}),
				);
				
				// 将线框网格添加到场景中
				scene.add(wireframe);

				// ---------- 轨道控制器设置 ----------
				// 创建轨道控制器，将相机和渲染器的canvas元素关联
				const controls = new OrbitControls(camera, renderer.domElement);
				
				// 设置相机的最小距离，用户不能将相机移动到离目标点5单位以内
				controls.minDistance = 5;
				
				// 设置相机的最大距离，用户不能将相机移动到离目标点75单位以外
				controls.maxDistance = 75;

				// ---------- GUI控制面板设置 ----------
				// 创建GUI实例
				const gui = new GUI();
				
				// 添加运算类型控制下拉菜单
				// 参数说明：
				// params - 目标对象
				// 'operation' - 要控制的属性名
				// { SUBTRACTION, INTERSECTION, ADDITION } - 选项对象，显示为下拉菜单
				gui.add(params, 'operation', { 
					减法运算: SUBTRACTION, 
					交集运算: INTERSECTION, 
					并集运算: ADDITION 
				}).name('布尔运算类型'); // 设置显示名称
				
				// 添加线框显示切换复选框
				gui.add(params, 'wireframe').name('显示线框');
				
				// 添加几何体组使用切换复选框
				gui.add(params, 'useGroups').name('使用几何体组');

				// ---------- 事件监听器设置 ----------
				// 监听窗口大小变化事件，当浏览器窗口大小改变时调用onWindowResize函数
				window.addEventListener('resize', onWindowResize);
				
				// 初始调用一次onWindowResize函数，确保初始尺寸正确
				onWindowResize();
			}

			// ==================== CSG更新函数 ====================
			// 这个函数执行CSG布尔运算并更新结果
			function updateCSG() {
				// 根据用户设置，更新评估器的useGroups属性
				// 这个设置影响布尔运算时是否保留原始几何体的分组信息
				evaluator.useGroups = params.useGroups;
				
				// 执行CSG布尔运算：
				// 参数说明：
				// baseBrush - 基础刷子（二十面体）
				// brush - 操作刷子（圆柱体）
				// params.operation - 运算类型（减法、交集或并集）
				// result - 可选的现有结果对象，如果提供则会重用（性能优化）
				// 返回值为运算结果网格
				result = evaluator.evaluate(baseBrush, brush, params.operation, result);

				// 设置结果网格的阴影属性
				result.castShadow = true;    // 结果网格投射阴影
				result.receiveShadow = true; // 结果网格接收阴影
				
				// 将结果网格添加到场景中
				scene.add(result);
				
				// 注意：在实际使用中，可能需要先移除旧的结果网格
				// 但这个实现依赖于scene.add的机制，相同对象重复添加不会有问题
			}

			// ==================== 窗口大小变化处理函数 ====================
			function onWindowResize() {
				// 更新相机的宽高比，使用当前窗口的宽高比
				// 确保渲染的图像不会变形
				camera.aspect = window.innerWidth / window.innerHeight;
				
				// 更新相机的投影矩阵
				// 当改变相机参数后，必须调用此方法使更改生效
				camera.updateProjectionMatrix();

				// 更新渲染器的大小，使其与窗口大小匹配
				renderer.setSize(window.innerWidth, window.innerHeight);
				
				// 注意：这里没有更新轨道控制器的相关设置
				// 在某些情况下，可能需要更新控制器的某些参数
			}

			// ==================== 动画循环函数 ====================
			// 这是每帧都会调用的函数，负责更新动画和重新渲染场景
			function animate() {
				// ---------- 时间计算 ----------
				// 获取当前时间戳（毫秒），加上9000使动画从中间开始
				// window.performance.now()提供高精度的时间戳
				const t = window.performance.now() + 9000;

				// ---------- 基础刷子动画 ----------
				// 更新基础刷子（二十面体）的旋转
				// 每个轴使用不同的旋转速度，产生复杂的旋转效果
				baseBrush.rotation.x = t * 0.0001;  // X轴缓慢旋转
				baseBrush.rotation.y = t * 0.00025; // Y轴中等速度旋转
				baseBrush.rotation.z = t * 0.0005;  // Z轴最快旋转
				
				// 更新基础刷子的世界矩阵
				// 当改变对象的旋转、位置或缩放后，必须调用此方法
				// 确保Three.js内部正确计算对象的世界变换
				baseBrush.updateMatrixWorld();

				// ---------- 操作刷子动画 ----------
				// 更新操作刷子（圆柱体）的旋转
				// 使用负值，使旋转方向与基础刷子相反
				brush.rotation.x = t * -0.0002;  // X轴反向旋转
				brush.rotation.y = t * -0.0005; // Y轴反向旋转
				brush.rotation.z = t * -0.001;   // Z轴反向旋转，速度最快

				// 更新操作刷子的缩放
				// 使用正弦函数创建周期性缩放动画
				// 公式解释：
				// Math.sin(t * 0.001) - 根据时间计算正弦值，范围[-1, 1]
				// 1 + Math.sin(t * 0.001) - 将范围调整为[0, 2]
				// 0.5 + 0.5 * (1 + Math.sin(t * 0.001)) - 将范围调整为[0.5, 1.5]
				// 最终结果：s在0.5到1.5之间周期性变化
				const s = 0.5 + 0.5 * (1 + Math.sin(t * 0.001));
				
				// 设置刷子的缩放：X和Z轴缩放，Y轴保持原样
				brush.scale.set(s, 1, s);
				
				// 更新操作刷子的世界矩阵
				brush.updateMatrixWorld();

				// ---------- CSG更新 ----------
				// 执行CSG布尔运算并更新结果
				updateCSG();

				// ---------- 线框更新 ----------
				// 将线框网格的几何体设置为CSG结果的几何体
				// 这样线框会始终匹配实体模型的形状
				wireframe.geometry = result.geometry;
				
				// 根据用户设置显示或隐藏线框
				wireframe.visible = params.wireframe;

				// ---------- 场景渲染 ----------
				// 使用渲染器将场景从相机的视角绘制到canvas上
				// 参数：场景对象和相机对象
				renderer.render(scene, camera);
				
				// ---------- 性能监控更新 ----------
				// 更新性能监控器的显示
				// 这会更新FPS（帧率）计数器和其他性能指标
				stats.update();
				
				// 注意：这个函数会由Three.js的渲染循环自动持续调用
				// 不需要手动调用requestAnimationFrame
			}
			// ==================== 代码结束 ====================
		</script>

	</body>
</html>