<!-- Three.js XR 虚拟雕塑应用 - 功能描述与技术分析
一、应用功能描述
1. 核心雕塑功能
实时3D造型：用户可以在虚拟空间中通过控制器对3D模型进行实时雕塑

变形操作：

凸起效果（添加材质）：strength > 0

凹陷效果（移除材质）：strength < 0

连续雕刻：按住控制器按钮可进行连续雕刻，产生流畅的造型效果

2. 交互模式
XR/VR模式：

支持VR头盔和手柄控制器

双控制器独立操作

控制器按钮触发雕刻动作

桌面模式：

鼠标轨道控制（旋转、缩放、平移）

无需特殊设备即可体验

3. 视觉表现
动态等值面：基于MarchingCubes算法生成平滑的3D表面

物理渲染：使用PBR（基于物理的渲染）材质

环境照明：半球光+平行光模拟自然光照

参考网格：提供空间定位参考

4. 用户体验特性
即时反馈：所有操作立即可视化

直观控制：按下即雕刻，释放即停止

双模式切换：无缝切换XR和桌面模式

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

二、主要技术点详解
1. WebXR技术栈
javascript
// WebXR核心配置
renderer.xr.enabled = true;  // 启用XR支持
XRButton.createButton(renderer);  // 创建标准XR按钮

// 控制器管理
renderer.xr.getController(0);  // 获取XR控制器
controller.addEventListener('selectstart', handler);  // 控制器事件
技术特点：

标准化API：使用W3C WebXR标准

多设备兼容：支持各类VR/AR设备

会话管理：自动处理XR会话生命周期

输入处理：标准化控制器事件系统

2. MarchingCubes算法
javascript
// MarchingCubes核心实现
blob = new MarchingCubes(64, material, false, false, 500000);
blob.addBall(x, y, z, strength, subtract);
blob.update();
算法原理：

等值面提取：从标量场中提取特定值的曲面

网格化计算：在64×64×64的规则网格上计算

隐式表面：通过数学函数定义表面，而非显式网格

技术优势：

平滑变形：自然连续的表面变化

拓扑变化：支持表面的分裂与合并

实时性能：优化的GPU计算

3. 三维数学与坐标系系统
坐标系转换：

javascript
function transformPoint(vector) {
    vector.x = (vector.x + 1.0) / 2.0;  // [-1,1] → [0,1]
    vector.y = (vector.y / 2.0);        // 特殊处理Y轴
    vector.z = (vector.z + 1.0) / 2.0;  // [-1,1] → [0,1]
}
关键数学概念：

世界坐标系：全局3D空间

局部坐标系：对象自身空间

标准化空间：MarchingCubes使用的[0,1]范围

矩阵变换：通过matrixWorld进行坐标转换

4. 场景图架构
text
Scene (根节点)
├── Camera (相机)
├── GridHelper (参考网格)
├── HemisphereLight (环境光)
├── DirectionalLight (平行光)
├── MarchingCubes (可雕塑模型)
├── Controller1 (XR控制器1)
│   └── Group
│       └── Pivot (视觉提示)
└── Controller2 (XR控制器2)
    └── Group
        └── Pivot (视觉提示)
架构特点：

层次结构：父子关系管理变换传递

组件化：灯光、几何体、控制器独立管理

动态更新：每帧更新场景状态

5. 渲染管线
text
输入处理 → 状态更新 → 几何计算 → 渲染输出
    ↓          ↓          ↓          ↓
控制器事件   点数据更新   MarchingCubes   WebGL绘制
    ↓          ↓         计算等值面        ↓
事件处理    位置/强度   顶点/法线生成     帧缓冲
优化策略：

动画循环：requestAnimationFrame调度

增量更新：仅更新变化的部分

GPU加速：WebGL硬件加速渲染

6. 材质与着色器
javascript
const material = new THREE.MeshStandardMaterial({
    color: 0xffffff,      // 基础颜色
    roughness: 0.9,       // 表面粗糙度
    metalness: 0.0,       // 金属度
    transparent: true     // 透明度支持
});
材质特性：

PBR渲染：基于物理的光照模型

实时着色：GPU着色器计算

透明度支持：可调整模型透明度

7. 事件处理系统
javascript
// 控制器事件链
controller.addEventListener('selectstart', onSelectStart);
controller.addEventListener('selectend', onSelectEnd);

// 用户数据存储
controller.userData.id = 0;
controller.userData.isSelecting = false;
事件流：

text
硬件输入 → WebXR API → Three.js事件 → 应用逻辑
（按钮按下）  （selectstart）  （事件分发）  （雕刻处理）
8. 性能优化技术
多边形控制：

javascript
new MarchingCubes(64, material, false, false, 500000);
// 参数：分辨率，材质，UV映射，顶点颜色，最大多边形数
优化策略：

分辨率控制：64×64×64平衡质量与性能

面片限制：最大500000个多边形

增量更新：只更新变化区域

渲染优化：视锥体裁剪、背面剔除

9. 模块化设计
javascript
// ES6模块导入
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { MarchingCubes } from 'three/addons/objects/MarchingCubes.js';
import { XRButton } from 'three/addons/webxr/XRButton.js';
架构优势：

代码分离：功能模块清晰划分

依赖管理：明确的外部依赖

可维护性：易于扩展和修改

三、技术难点与解决方案
1. 实时等值面计算
难点：MarchingCubes算法计算量大
解决方案：

限制网格分辨率（64³）

增量式更新（只处理变化点）

GPU加速计算

2. 跨坐标系转换
难点：XR控制器坐标与MarchingCubes坐标不匹配
解决方案：

标准化坐标系统（transformPoint函数）

矩阵变换链（local → world → normalized）

统一的[0,1]工作空间

3. 性能与质量的平衡
难点：高精度与实时性的矛盾
解决方案：

可配置的分辨率参数

动态细节级别（LOD）潜力

多边形数量限制

4. 跨平台兼容性
难点：不同XR设备的输入差异
解决方案：

使用标准WebXR API

抽象控制器输入层

后备桌面控制方案 -->


<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<!-- 
			页面标题：Three.js XR 雕塑应用
			Three.js 是用于创建3D图形的JavaScript库
			XR 指扩展现实（Extended Reality），包括VR（虚拟现实）和AR（增强现实）
			雕塑（Sculpt）表示用户可以像雕塑家一样修改3D模型
		-->
		<title>Three.js XR 虚拟雕塑应用</title>
		<!-- 
			字符编码设置：
			utf-8 支持多语言字符，包括中文
		-->
		<meta charset="utf-8">
		<!-- 
			视口（Viewport）设置，用于移动端适配：
			width=device-width: 宽度等于设备宽度
			initial-scale=1.0: 初始缩放比例为1.0（不缩放）
			user-scalable=no: 禁止用户手动缩放页面
		-->
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
		<!-- 
			外部CSS样式表链接：
			type="text/css": 指定文件类型为CSS
			rel="stylesheet": 定义当前文档与被链接文档之间的关系为样式表
			href="main.css": 样式表文件路径
		-->
		<link type="text/css" rel="stylesheet" href="main.css">
	</head>
	<body>
		<!-- 
			信息显示区域：
			id="info": 为这个div元素分配唯一标识符，便于CSS和JavaScript操作
			显示应用名称和Three.js链接
		-->
		<div id="info">
			<a href="https://threejs.org" target="_blank" rel="noopener">Three.js</a> XR - 三维虚拟雕塑工具
		</div>

		<!-- 
			导入映射（Import Map）配置：
			type="importmap": 这是ES模块的导入映射声明
			作用：将模块标识符映射到实际URL，简化模块导入路径
			类似于设置模块的"别名"或"快捷方式"
		-->
		<script type="importmap">
			{
				"imports": {
					"three": "../build/three.module.js",
					"three/addons/": "./jsm/"
				}
			}
		</script>

		<!-- 
			主JavaScript模块：
			type="module": 声明这是一个ES6模块，支持模块化导入导出
			模块中的代码默认在严格模式下运行
			模块有自己的作用域，不会污染全局命名空间
		-->
		<script type="module">
			// ==============================
			// 模块导入部分
			// ==============================
			
			// 导入Three.js核心库的所有功能，命名为THREE
			// THREE是Three.js的全局命名空间，包含所有核心类和方法
			import * as THREE from 'three';
			
			// 从Three.js附加组件中导入轨道控制器（OrbitControls）
			// 作用：允许用户通过鼠标拖拽、滚轮缩放来控制相机视角
			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
			
			// 从Three.js附加组件中导入MarchingCubes类
			// MarchingCubes（移动立方体）算法：用于从标量场生成三维等值面的算法
			// 常用于医学成像、科学可视化和3D建模
			import { MarchingCubes } from 'three/addons/objects/MarchingCubes.js';
			
			// 从Three.js附加组件中导入XRButton类
			// 作用：创建用于启动/退出XR（虚拟现实/增强现实）会话的按钮
			import { XRButton } from 'three/addons/webxr/XRButton.js';

			// ==============================
			// 全局变量声明部分
			// ==============================
			
			// Three.js渲染器输出DOM元素的容器
			let container;
			
			// Three.js核心对象：
			// camera：观察3D场景的虚拟相机
			// scene：包含所有3D对象、灯光和相机的场景图
			// renderer：负责将3D场景渲染到2D屏幕的渲染器
			let camera, scene, renderer;
			
			// XR控制器对象：
			// 在VR/AR环境中，每个控制器都是一个可交互的设备（如VR手柄）
			// controller1：第一个控制器（通常是左手或主控制器）
			// controller2：第二个控制器（通常是右手或副控制器）
			let controller1, controller2;

			// 特定功能对象：
			// controls：非XR模式下的鼠标/触摸控制（OrbitControls）
			// blob：MarchingCubes对象，即可变形的3D模型主体
			let controls, blob;

			// 存储影响MarchingCubes形状的点数据数组
			// 每个点包含位置、强度等信息，用于计算等值面
			let points = [];

			// ==============================
			// 初始化函数调用
			// ==============================
			
			// 步骤1：初始化Three.js基本环境（场景、相机、渲染器、控制器等）
			init();
			
			// 步骤2：初始化MarchingCubes对象（可雕塑的3D模型）
			initBlob();

			// ==============================
			// 函数定义部分
			// ==============================
			
			/**
			 * 主初始化函数
			 * 功能：设置Three.js基本环境，包括场景、相机、渲染器、灯光、控制器等
			 * 执行顺序：
			 * 1. 创建DOM容器
			 * 2. 创建场景和相机
			 * 3. 添加控制器和辅助对象
			 * 4. 设置渲染器
			 * 5. 添加事件监听器
			 */
			function init() {

				// 创建DOM容器元素
				// document.createElement('div')：创建新的div元素
				// container将作为Three.js渲染输出的父容器
				container = document.createElement( 'div' );
				
				// 将容器添加到页面body中
				// appendChild()：将指定节点添加到调用节点的子节点列表末尾
				document.body.appendChild( container );

				// 创建场景对象
				// THREE.Scene()：创建一个新的3D场景，是所有对象的容器
				scene = new THREE.Scene();
				
				// 设置场景背景颜色
				// THREE.Color(0x222222)：创建深灰色颜色对象
				// 0x表示十六进制颜色值，222222是RGB颜色代码
				scene.background = new THREE.Color( 0x222222 );

				// 创建透视相机
				// 参数说明：
				// 50 - 视野角度（FOV），单位度，表示可见范围的垂直角度
				// window.innerWidth / window.innerHeight - 纵横比（宽高比）
				// 0.01 - 近裁剪面，距离相机多近的对象开始渲染
				// 50 - 远裁剪面，距离相机多远的对象停止渲染
				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 0.01, 50 );
				
				// 设置相机初始位置
				// set(x, y, z)：设置三维坐标
				// x=0：左右中心，y=1.6：近似人眼高度（1.6米），z=3：向前3个单位
				camera.position.set( 0, 1.6, 3 );

				// 创建轨道控制器（用于非XR模式的鼠标控制）
				// 参数：
				// camera - 要控制的相机对象
				// container - 监听的DOM元素（用户在此元素内操作）
				controls = new OrbitControls( camera, container );
				
				// 设置控制器目标点（相机围绕此点旋转）
				controls.target.set( 0, 1.6, 0 ); // 设置在地面上方1.6米处
				
				// 更新控制器状态（应用初始设置）
				controls.update();

				// 创建网格辅助对象（参考网格）
				// THREE.GridHelper()参数：
				// 4 - 网格大小（4x4单位）
				// 1 - 网格细分数量（每单位1个网格线）
				// 0x111111 - 主网格线颜色（深灰色）
				// 0x111111 - 次网格线颜色（同样深灰色）
				const grid = new THREE.GridHelper( 4, 1, 0x111111, 0x111111 );
				
				// 将网格添加到场景中
				scene.add( grid );

				// 添加半球光（模拟自然光照）
				// 参数：
				// 0x888877 - 天空颜色（浅棕色）
				// 0x777788 - 地面颜色（浅蓝色）
				// 3 - 光照强度
				scene.add( new THREE.HemisphereLight( 0x888877, 0x777788, 3 ) );

				// 添加平行光（模拟太阳光，方向性光源）
				const light = new THREE.DirectionalLight( 0xffffff, 3 ); // 白色光，强度3
				light.position.set( 0, 6, 0 ); // 设置在正上方6个单位处
				scene.add( light );

				// ==============================
				// 渲染器设置
				// ==============================
				
				// 创建WebGL渲染器
				// { antialias: true }：开启抗锯齿，使边缘更平滑
				renderer = new THREE.WebGLRenderer( { antialias: true } );
				
				// 设置设备像素比
				// 根据屏幕的物理像素和CSS像素比例调整，确保高分辨率设备清晰显示
				renderer.setPixelRatio( window.devicePixelRatio );
				
				// 设置渲染器尺寸为浏览器窗口大小
				renderer.setSize( window.innerWidth, window.innerHeight );
				
				// 设置动画循环函数
				// animate函数将在每一帧被调用（通常是60次/秒）
				renderer.setAnimationLoop( animate );
				
				// 启用WebXR支持
				// 允许应用在VR/AR设备中运行
				renderer.xr.enabled = true;
				
				// 将渲染器的canvas元素添加到容器中
				// renderer.domElement是WebGL渲染器创建的<canvas>元素
				container.appendChild( renderer.domElement );

				// 创建并添加XR按钮到页面
				// XRButton.createButton(renderer)：创建标准的XR会话按钮
				// 点击此按钮可以进入/退出VR/AR模式
				document.body.appendChild( XRButton.createButton( renderer ) );

				// ==============================
				// XR控制器设置
				// ==============================
				
				/**
				 * 控制器选择开始事件处理函数
				 * 当用户按下控制器上的选择按钮（通常是扳机键）时触发
				 * this关键字指向触发事件的控制器对象
				 */
				function onSelectStart() {
					// 在控制器的userData中存储选择状态
					// userData是Three.js对象的通用属性，用于存储自定义数据
					this.userData.isSelecting = true; // 标记为"正在选择"
				}

				/**
				 * 控制器选择结束事件处理函数
				 * 当用户释放控制器上的选择按钮时触发
				 */
				function onSelectEnd() {
					this.userData.isSelecting = false; // 清除选择状态
				}

				// 获取第一个XR控制器（索引0）
				// renderer.xr.getController()：获取XR控制器对象
				controller1 = renderer.xr.getController( 0 );
				
				// 为控制器添加事件监听器
				// 'selectstart'：选择开始事件
				// 'selectend'：选择结束事件
				controller1.addEventListener( 'selectstart', onSelectStart );
				controller1.addEventListener( 'selectend', onSelectEnd );
				
				// 在控制器的userData中存储自定义数据
				controller1.userData.id = 0; // 分配唯一ID
				
				// 将控制器添加到场景中（使其在3D空间中可见）
				scene.add( controller1 );

				// 获取第二个XR控制器（索引1）
				controller2 = renderer.xr.getController( 1 );
				controller2.addEventListener( 'selectstart', onSelectStart );
				controller2.addEventListener( 'selectend', onSelectEnd );
				controller2.userData.id = 1; // 分配唯一ID
				scene.add( controller2 );

				// ==============================
				// 控制器视觉提示创建
				// ==============================
				
				// 创建控制器指示点（可视化表示）
				// 使用二十面体几何体（近似球体），半径为0.01，细分3级
				const pivot = new THREE.Mesh( 
					new THREE.IcosahedronGeometry( 0.01, 3 ) 
				);
				pivot.name = 'pivot'; // 设置名称，便于后续通过名称查找
				pivot.position.z = -0.05; // 沿Z轴向前偏移0.05个单位

				// 创建组对象
				// THREE.Group：用于将多个对象组合在一起的对象
				const group = new THREE.Group();
				group.add( pivot ); // 将指示点添加到组中

				// 为两个控制器分别添加视觉提示
				// group.clone()：创建组的副本，每个控制器有自己的实例
				// add()：将组添加到控制器对象中，使其成为控制器的子对象
				controller1.add( group.clone() );
				controller2.add( group.clone() );

				// ==============================
				// 窗口事件监听器
				// ==============================
				
				// 监听窗口大小变化事件
				// 当浏览器窗口大小改变时，调用onWindowResize函数
				window.addEventListener( 'resize', onWindowResize );

			}

			/**
			 * 初始化MarchingCubes对象函数
			 * MarchingCubes是一种生成等值面的算法
			 * 等值面：在三维标量场中，所有值等于某个常数的点构成的曲面
			 * 在本应用中，用户通过控制器"雕刻"这个等值面
			 */
			function initBlob() {

				/*
				// 可选代码：加载立方体贴图（环境反射贴图）
				// 立方体贴图由6个图像组成，分别对应立方体的6个面
				// 用于模拟物体表面的环境反射效果
				const path = 'textures/cube/SwedishRoyalCastle/';
				const format = '.jpg';
				const urls = [
					path + 'px' + format, // 正X面（右）
					path + 'nx' + format, // 负X面（左）
					path + 'py' + format, // 正Y面（上）
					path + 'ny' + format, // 负Y面（下）
					path + 'pz' + format, // 正Z面（前）
					path + 'nz' + format  // 负Z面（后）
				];

				// 加载立方体贴图
				const reflectionCube = new THREE.CubeTextureLoader().load( urls );
				*/

				// 创建MarchingCubes的材质
				// THREE.MeshStandardMaterial：基于物理的渲染（PBR）材质
				const material = new THREE.MeshStandardMaterial( {
					color: 0xffffff,       // 材质颜色：白色
					// envMap: reflectionCube, // 环境贴图（注释掉了）
					roughness: 0.9,         // 粗糙度：0.9（非常粗糙，接近完全漫反射）
					metalness: 0.0,         // 金属度：0.0（非金属材质）
					transparent: true       // 透明：true（允许透明度）
				} );

				// 创建MarchingCubes对象
				// 参数说明：
				// 64 - 分辨率（在64x64x64的网格上计算等值面，值越高越精细但性能要求越高）
				// material - 使用的材质
				// false - 是否启用UV映射（纹理坐标）
				// false - 是否启用顶点颜色
				// 500000 - 最大多边形数限制（防止生成过多面片导致性能问题）
				blob = new MarchingCubes( 64, material, false, false, 500000 );
				
				// 设置MarchingCubes的位置
				blob.position.y = 1; // 在Y轴上抬升1个单位
				
				// 将MarchingCubes对象添加到场景中
				scene.add( blob );

				// 初始化点数据数组
				initPoints();

			}

			/**
			 * 初始化点数据函数
			 * 创建两个初始影响点，用于控制MarchingCubes的形状
			 * 一个点产生凸起效果，一个点产生凹陷效果
			 */
			function initPoints() {

				// points数组存储所有影响点
				// 每个点是包含以下属性的对象：
				points = [
					{ 
						// position：点的三维位置（THREE.Vector3对象）
						// Vector3是Three.js中表示三维向量的类
						position: new THREE.Vector3(),
						
						// strength：影响强度
						// 正值：在等值面上产生凸起（添加材料）
						// 0.04：中等凸起强度
						strength: 0.04,
						
						// subtract：减法参数，影响等值面的计算
						// 控制点对周围区域的影响范围
						subtract: 10
					},
					{ 
						position: new THREE.Vector3(),
						
						// strength为负值：在等值面上产生凹陷（移除材料）
						// -0.08：凹陷强度比凸起大
						strength: -0.08,
						
						subtract: 10
					}
				];

			}

			/**
			 * 窗口大小变化处理函数
			 * 当浏览器窗口大小改变时，调整相机和渲染器设置
			 * 确保3D场景正确适应新的窗口尺寸
			 */
			function onWindowResize() {

				// 更新相机的纵横比
				// 纵横比 = 窗口宽度 / 窗口高度
				camera.aspect = window.innerWidth / window.innerHeight;
				
				// 更新相机的投影矩阵
				// 投影矩阵定义了3D坐标如何转换为2D屏幕坐标
				// 当相机参数改变后，必须调用此方法更新内部矩阵
				camera.updateProjectionMatrix();

				// 更新渲染器的尺寸
				// 确保渲染输出与窗口大小一致
				renderer.setSize( window.innerWidth, window.innerHeight );

			}

			/**
			 * 坐标转换函数
			 * 功能：将三维坐标从[-1, 1]范围转换到[0, 1]范围
			 * 为什么需要转换：
			 * 1. MarchingCubes算法通常在[0,1]的标准化空间内工作
			 * 2. 控制器的位置可能在[-1,1]或其他范围
			 * 3. 统一坐标系统便于计算
			 * 
			 * @param {THREE.Vector3} vector - 要转换的三维向量
			 */
			function transformPoint( vector ) {
				// X轴转换：从[-1, 1]到[0, 1]
				// 公式：(原始值 + 1) / 2
				// 当原始值=-1时，结果=0；当原始值=1时，结果=1
				vector.x = ( vector.x + 1.0 ) / 2.0;
				
				// Y轴转换：假设原始范围是[-2, 2]到[0, 1]
				// 公式：原始值 / 2
				// 当原始值=-2时，结果=-1（但会被后续处理）
				// 注意：这里可能不完整，可能需要调整
				vector.y = ( vector.y / 2.0 );
				
				// Z轴转换：从[-1, 1]到[0, 1]
				vector.z = ( vector.z + 1.0 ) / 2.0;
			}

			/**
			 * 处理控制器输入函数
			 * 功能：
			 * 1. 更新控制器的位置到points数组
			 * 2. 如果控制器正在选择（按钮按下），添加新的临时影响点
			 * 
			 * @param {THREE.Object3D} controller - 要处理的XR控制器对象
			 */
			function handleController( controller ) {

				// 通过名称获取控制器上的视觉提示对象（之前创建的pivot）
				// getObjectByName()：在对象及其后代中按名称查找对象
				const pivot = controller.getObjectByName( 'pivot' );

				// 确保找到了pivot对象
				if ( pivot ) {

					// 获取控制器的ID（0或1）
					const id = controller.userData.id;
					
					// 获取pivot的世界变换矩阵
					// matrixWorld：对象的全局变换矩阵（考虑所有父级变换）
					const matrix = pivot.matrixWorld;

					// 更新对应点的位置
					// setFromMatrixPosition()：从变换矩阵中提取位置分量
					points[ id ].position.setFromMatrixPosition( matrix );
					
					// 将位置坐标转换到[0,1]范围
					transformPoint( points[ id ].position );

					// 检查控制器是否处于选择状态（按钮按下）
					if ( controller.userData.isSelecting ) {

						// 使用当前点强度的一半作为新点的强度
						// 这样持续按下按钮会产生连续但较弱的影响
						const strength = points[ id ].strength / 2;

						// 创建新向量来存储当前位置
						// THREE.Vector3()：创建新的三维向量
						const vector = new THREE.Vector3().setFromMatrixPosition( matrix );
						
						// 坐标转换
						transformPoint( vector );

						// 将新点添加到points数组
						// 这样在用户按住按钮时，会不断添加新的影响点
						// 产生连续的雕刻效果
						points.push( { 
							position: vector,   // 当前位置
							strength: strength, // 一半的强度
							subtract: 10        // 固定减法参数
						} );

					}

				}

			}

			/**
			 * 更新MarchingCubes几何体函数
			 * 功能：根据points数组中的所有点，重新计算并更新MarchingCubes形状
			 * 这是雕塑效果的核心计算部分
			 */
			function updateBlob() {

				// 重置MarchingCubes对象
				// 清除之前添加的所有影响点，准备重新计算
				blob.reset();

				// 遍历points数组中的所有影响点
				// points.length：数组当前长度（可能随时间增加）
				for ( let i = 0; i < points.length; i ++ ) {

					// 获取当前点对象
					const point = points[ i ];
					
					// 获取点的位置
					const position = point.position;

					// 向MarchingCubes添加球体影响区域
					// addBall()方法参数：
					// position.x, position.y, position.z - 球心坐标（在[0,1]范围内）
					// point.strength - 影响强度（正：凸起，负：凹陷）
					// point.subtract - 减法参数，影响球体影响范围
					blob.addBall( 
						position.x,       // X坐标
						position.y,       // Y坐标
						position.z,       // Z坐标
						point.strength,   // 影响强度
						point.subtract    // 减法参数
					);

				}

				// 更新MarchingCubes几何体
				// 根据所有添加的影响点，重新计算等值面
				// 生成新的顶点、法线和面片数据
				blob.update();

			}

			/**
			 * 动画循环函数（每帧调用）
			 * 功能：
			 * 1. 处理控制器输入
			 * 2. 更新MarchingCubes形状
			 * 3. 渲染场景
			 * 
			 * 这个函数被设置为渲染器的动画循环回调
			 * 通常以60FPS（每秒60帧）的频率调用
			 * 这是所有实时3D应用的核心循环
			 */
			function animate() {

				// 步骤1：处理两个控制器的输入
				// 更新控制器的位置，检测选择状态，添加新影响点
				handleController( controller1 );
				handleController( controller2 );

				// 步骤2：根据更新后的points数组，重新计算MarchingCubes形状
				updateBlob();

				// 步骤3：渲染场景
				// renderer.render()：将3D场景通过相机视角渲染到2D屏幕
				// 参数：
				// scene - 要渲染的场景
				// camera - 使用的相机
				renderer.render( scene, camera );

			}

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