<!-- 代码功能和技术点详解
🎯 整体功能概述
这是一个基于Three.js WebGL2的大规模体素实例化渲染演示。它使用射线步进算法渲染50,000个曼德博海绵（Menger Sponge）体素模型，每个模型独立随机分布在3D空间中，并支持实时交互旋转。

🌟 主要技术亮点
1. 大规模实例化渲染 (Massive Instancing)
数量：一次性渲染50,000个复杂体素模型

技术：使用Three.js的InstancedMesh类

优势：单个Draw Call绘制所有实例，极大减少CPU-GPU通信开销

对比：传统渲染方式需要50,000次Draw Calls，而实例化只需1次

2. 体绘制技术 (Volume Rendering)
核心算法：射线步进(Ray Marching) 算法

原理：沿视线方向逐步采样3D纹理数据，根据密度重建3D表面

步骤：

从相机发射射线穿过每个像素

射线与每个体素模型的包围盒求交

在交点范围内等距采样100次

当采样密度>0.5时，确定为表面位置

3. 自定义着色器系统 (Custom Shader Pipeline)
使用原始着色器完全控制渲染管线：

顶点着色器主要任务：
glsl
// 输入实例变换矩阵
in mat4 instanceMatrix;
// 计算每个实例的视图空间位置
vec4 mvPosition = modelViewMatrix * instanceMatrix * vec4(position, 1.0);
片段着色器核心逻辑：
射线构建：从屏幕坐标重建3D射线

坐标变换：世界空间→视图空间→实例局部空间

包围盒测试：快速剔除无关片段

步进采样：在3D纹理中寻找表面

深度计算：手动计算正确深度值

4. 3D纹理数据 (3D Texture Data)
格式：VOX格式（MagicaVoxel编辑器格式）

转换：将体素数据转换为3D纹理

采样：在着色器中通过texture(map, p)采样

存储：每个体素的密度存储在纹理的R通道

5. 深度处理技术 (Depth Handling)
关键问题：传统深度测试无法处理体绘制

glsl
// 手动计算深度值
vec4 ndc = projectionMatrix * vInstanceToViewMatrix * vec4(p, 1.0);
ndc /= ndc.w;  // 透视除法
gl_FragDepth = (((far - near) * ndc.z) + near + far) / 2.0;
必要性：确保实例间的正确遮挡关系

挑战：体绘制没有明确的几何表面

解决方案：在命中点计算并写入深度

🔧 技术架构解析
渲染管线流程：
text
用户交互 → 相机更新 → 顶点变换 → 光栅化 → 射线步进 → 颜色/深度输出
数据流：
text
VOX文件 → 3D纹理 → 实例化网格 → 顶点着色器 → 片段着色器 → 屏幕
⚡ 性能优化策略
1. 计算优化
固定步数：每个射线最多采样100次

提前终止：找到表面立即停止

包围盒剔除：快速排除无交点的射线

矩阵预计算：所有实例变换在初始化时计算

2. 渲染优化
背面渲染：设置side: THREE.BackSide

早期丢弃：无交点时立即discard

实例化渲染：极大减少Draw Calls

着色器优化：避免不必要的计算

3. 内存优化
共享几何体：所有实例共享同一立方体几何体

共享材质：所有实例共享同一着色器材质

矩阵存储：仅存储4x4变换矩阵

🎨 视觉效果实现
1. 颜色映射
glsl
// 使用局部坐标作为颜色
color.rgb = p * 2.0;  // 将[-0.5,0.5]映射到[-1,1]作为颜色
原理：位置坐标→RGB颜色

效果：创建色彩渐变，增强3D感知

2. 曼德博海绵模型
类型：三维分形结构

特性：自相似、无限细节

数据：预计算的VOX体素数据

3. 交互体验
轨道控制：鼠标拖拽旋转、缩放

自动旋转：场景缓慢自转

阻尼效果：平滑的惯性运动

📊 技术参数总结
参数	值	说明
实例数量	50,000	同时渲染的体素模型数量
射线步数	100	每个射线的最大采样次数
分布范围	±75单位	实例在空间中的随机分布
包围盒尺寸	1×1×1	每个实例的局部空间
纹理维度	3D	体素数据存储格式
🚀 扩展应用潜力
1. 科学可视化
医学CT/MRI数据体绘制

流体力学模拟可视化

地质勘探数据展示

2. 游戏开发
大规模体素世界渲染

特效系统（烟雾、火焰）

动态破坏效果

3. 创意艺术
生成艺术创作

数据雕塑

交互式装置

⚠️ 技术限制与注意事项
1. 性能考虑
100步固定步数可能在高分辨率下不足

50,000实例对移动设备压力较大

复杂光照模型会显著降低性能

2. 视觉质量
缺乏光照和阴影

颜色映射简单

没有抗锯齿处理

3. 兼容性
需要WebGL 2.0支持

依赖Three.js库

现代浏览器支持

🏆 技术成就
这个演示成功展示了：

大规模实例化的高效实现

体绘制算法的实际应用

自定义着色器的完整控制

深度缓冲区的手动管理

实时交互的流畅体验 -->


<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<!-- 页面标题：Three.js WebGL2 体素渲染与实例化演示 -->
		<title>Three.js WebGL2 - 体素渲染与实例化技术演示</title>
		<!-- 字符编码：UTF-8支持中文 -->
		<meta charset="utf-8">
		<!-- 移动端视口设置：禁止用户缩放，固定缩放比例 -->
		<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">
	</head>

	<body>
		<!-- 页面信息区域：显示技术信息和链接 -->
		<div id="info">
			<!-- Three.js官方链接 -->
			<a href="https://threejs.org" target="_blank" rel="noopener">Three.js</a> 
			WebGL2 - 体素渲染与大规模实例化技术演示<br>
			使用射线步进算法渲染50000个曼德博海绵体素模型
		</div>

		<!-- 模块导入映射配置：定义模块路径别名 -->
		<script type="importmap">
			{
				"imports": {
					"three": "../build/three.module.js",
					"three/addons/": "./jsm/"
				}
			}
		</script>

		<!-- 主JavaScript模块：使用ES6模块语法 -->
		<script type="module">
			// ============ 模块导入部分 ============
			
			// 导入Three.js核心库的所有导出
			import * as THREE from 'three';
			// 导入轨道控制器：允许用户用鼠标拖拽旋转相机
			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
			// 导入VOX格式加载器和3D纹理构建工具
			// VOX格式：MagicaVoxel体素编辑器使用的文件格式
			import { VOXLoader, buildData3DTexture } from 'three/addons/loaders/VOXLoader.js';

			// ============ 全局变量声明 ============
			
			// renderer: WebGL渲染器，负责将3D场景渲染到2D画布
			// scene: 3D场景容器，包含所有要渲染的对象
			// camera: 相机，定义观察场景的视角
			// controls: 轨道控制器，处理用户交互
			// clock: 时钟对象，用于计算时间差和动画
			let renderer, scene, camera, controls, clock;

			// ============ 初始化函数调用 ============
			
			// 程序入口点：初始化所有资源
			init();

			// ============ 初始化函数定义 ============
			
			function init() {
				// ------------ 渲染器初始化 ------------
				// 创建WebGL 2.0渲染器（支持高级特性）
				renderer = new THREE.WebGLRenderer();
				// 设置设备像素比：适配高DPI屏幕（如Retina显示器）
				renderer.setPixelRatio( window.devicePixelRatio );
				// 设置渲染器尺寸为整个浏览器窗口大小
				renderer.setSize( window.innerWidth, window.innerHeight );
				// 设置动画循环回调函数：每帧自动调用animate()
				renderer.setAnimationLoop( animate );
				// 将渲染器的canvas元素添加到页面body中
				document.body.appendChild( renderer.domElement );

				// ------------ 场景初始化 ------------
				// 创建3D场景：所有3D对象的容器
				scene = new THREE.Scene();

				// ------------ 相机初始化 ------------
				// 创建透视相机：模拟人眼视角
				// 参数说明：
				// 1. 视野角度(FOV): 60度，角度越大看到的范围越广
				// 2. 宽高比: 窗口宽度/高度
				// 3. 近裁剪面: 0.1，距离相机小于0.1的物体不渲染
				// 4. 远裁剪面: 1000，距离相机大于1000的物体不渲染
				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.1, 1000 );
				// 设置相机初始位置：x=0, y=0, z=4（沿z轴向后移动4个单位）
				camera.position.set( 0, 0, 4 );

				// ------------ 控制器初始化 ------------
				// 创建轨道控制器：将相机和渲染器的canvas元素关联
				controls = new OrbitControls( camera, renderer.domElement );
				// 启用自动旋转：场景会自动缓慢旋转
				controls.autoRotate = true;
				// 设置自动旋转速度：负值表示反向旋转
				controls.autoRotateSpeed = - 1.0;
				// 启用阻尼效果：旋转时有惯性，停止更平滑
				controls.enableDamping = true;

				// ------------ 时钟初始化 ------------
				// 创建时钟对象：用于精确的时间计算
				clock = new THREE.Clock();

				// ============ 自定义着色器材质 ============
				// 使用原始着色器实现高级体绘制效果
				
				// ------------ 顶点着色器 ------------
				// GLSL语言编写，在GPU上执行
				// 主要任务：顶点坐标变换
				const vertexShader = /* glsl */`
					// 输入属性：从几何体中获取
					in vec3 position;      // 顶点位置坐标
					in mat4 instanceMatrix; // 实例化变换矩阵
					
					// 统一变量：由Three.js引擎传入
					uniform mat4 modelMatrix;        // 模型变换矩阵
					uniform mat4 modelViewMatrix;    // 模型视图矩阵 = viewMatrix * modelMatrix
					uniform mat4 projectionMatrix;   // 投影矩阵（透视或正交）
					uniform vec3 cameraPos;          // 相机在世界坐标系中的位置
					
					// 输出变量：传递到片段着色器
					out vec4 vScreenPosition;        // 屏幕空间坐标（用于射线计算）
					out mat4 vInstanceToViewMatrix;  // 实例到视图空间的变换矩阵
					
					void main() {
						// 计算顶点在视图空间中的位置
						// 注意：考虑了实例化变换矩阵，每个实例有不同的变换
						vec4 mvPosition = modelViewMatrix * instanceMatrix * vec4( position, 1.0 );
						
						// 计算顶点在裁剪空间中的位置（最终传递给GPU的光栅化器）
						gl_Position = projectionMatrix * mvPosition;
						
						// 准备传递给片段着色器的数据
						// 屏幕空间坐标：xy为标准化设备坐标，w为透视除法因子
						vScreenPosition = vec4( gl_Position.xy, 0.0, gl_Position.w );
						// 实例到视图空间的完整变换矩阵
						vInstanceToViewMatrix = modelViewMatrix * instanceMatrix;
					}
				`;

				// ------------ 片段着色器 ------------
				// 核心体绘制逻辑：射线步进算法
				const fragmentShader = /* glsl */`
					// 精度限定符：确保计算精度
					precision highp float;      // 高精度浮点数
					precision highp sampler3D;  // 高精度3D纹理采样器
					
					// 统一变量：变换矩阵
					uniform mat4 viewMatrix;           // 视图矩阵（相机变换）
					uniform mat4 modelViewMatrix;      // 模型视图矩阵
					uniform mat4 projectionMatrix;     // 投影矩阵
					
					// 输入变量：从顶点着色器传递过来
					in vec4 vScreenPosition;        // 屏幕空间坐标
					in mat4 vInstanceToViewMatrix;  // 实例到视图空间的变换矩阵
					
					// 输出变量：最终像素颜色
					out vec4 color;
					
					// 3D纹理采样器：存储体素数据（体绘制的主要数据源）
					uniform sampler3D map;
					
					// ------------ 辅助函数：射线与AABB包围盒求交 ------------
					// 参数：射线起点orig，射线方向dir（单位向量）
					// 返回值：vec2(t0, t1)，t0为进入时间，t1为退出时间
					vec2 hitBox( vec3 orig, vec3 dir ) {
						// 定义轴对齐包围盒(AABB)：中心在原点，边长为1的立方体
						const vec3 box_min = vec3( - 0.5 );  // 最小角点(-0.5, -0.5, -0.5)
						const vec3 box_max = vec3( 0.5 );   // 最大角点(0.5, 0.5, 0.5)
						
						// 计算射线方向分量的倒数（避免除零错误由硬件处理）
						vec3 inv_dir = 1.0 / dir;
						
						// 计算与每个轴平面的交点时间
						vec3 tmin_tmp = ( box_min - orig ) * inv_dir;
						vec3 tmax_tmp = ( box_max - orig ) * inv_dir;
						
						// 对于每个轴，取较小值为进入时间候选，较大值为退出时间候选
						vec3 tmin = min( tmin_tmp, tmax_tmp );
						vec3 tmax = max( tmin_tmp, tmax_tmp );
						
						// 最终进入时间：各轴进入时间的最大值（最晚进入）
						float t0 = max( tmin.x, max( tmin.y, tmin.z ) );
						// 最终退出时间：各轴退出时间的最小值（最早退出）
						float t1 = min( tmax.x, min( tmax.y, tmax.z ) );
						
						return vec2( t0, t1 );
					}
					
					// ------------ 辅助函数：3D纹理采样 ------------
					// 简化函数：只取纹理的红色通道值（体素密度）
					float sample1( vec3 p ) {
						return texture( map, p ).r;
					}
					
					// 定义法线计算时使用的微小偏移量
					// 用于避免边界采样和数值精度问题
					#define epsilon .0001
					
					// ------------ 辅助函数：计算法线向量 ------------
					// 使用中心差分法估计梯度，得到表面法线
					// 参数：采样点坐标（纹理坐标空间，范围[0,1]）
					vec3 normal( vec3 coord ) {
						// 边界检查：如果在纹理边界附近，返回轴向法线
						// 避免从纹理外部采样
						if ( coord.x < epsilon ) return vec3( 1.0, 0.0, 0.0 );
						if ( coord.y < epsilon ) return vec3( 0.0, 1.0, 0.0 );
						if ( coord.z < epsilon ) return vec3( 0.0, 0.0, 1.0 );
						if ( coord.x > 1.0 - epsilon ) return vec3( - 1.0, 0.0, 0.0 );
						if ( coord.y > 1.0 - epsilon ) return vec3( 0.0, - 1.0, 0.0 );
						if ( coord.z > 1.0 - epsilon ) return vec3( 0.0, 0.0, - 1.0 );
						
						// 中心差分步长：影响法线计算的精度和平滑度
						float step = 0.01;
						
						// 计算三个方向的梯度（密度变化率）
						// x方向梯度：左右两点密度差
						float x = sample1( coord + vec3( - step, 0.0, 0.0 ) ) - sample1( coord + vec3( step, 0.0, 0.0 ) );
						// y方向梯度：上下两点密度差
						float y = sample1( coord + vec3( 0.0, - step, 0.0 ) ) - sample1( coord + vec3( 0.0, step, 0.0 ) );
						// z方向梯度：前后两点密度差
						float z = sample1( coord + vec3( 0.0, 0.0, - step ) ) - sample1( coord + vec3( 0.0, 0.0, step ) );
						
						// 归一化梯度向量得到法线
						return normalize( vec3( x, y, z ) );
					}
					
					// ------------ 主函数：片段着色器入口 ------------
					void main() {
						// 第一步：透视除法（在片段着色器中执行以避免插值伪影）
						// 将裁剪空间坐标转换为标准化设备坐标(NDC)
						vec2 screenUv = vScreenPosition.xy / vScreenPosition.w;
						
						// 计算逆矩阵：用于将屏幕坐标转换回世界/视图空间
						mat4 invProjectionMatrix = inverse( projectionMatrix );
						mat4 invInstanceToViewMatrix = inverse( vInstanceToViewMatrix );
						
						// 第二步：构建相机射线
						// 目标：从相机出发，穿过当前像素的射线
						vec4 temp;  // 临时变量用于矩阵运算
						vec3 camRayOrigin, camRayEnd;
						
						// 近裁剪面上的点：深度值-1.0（标准化设备坐标）
						temp = invProjectionMatrix * vec4( screenUv, - 1.0, 1.0 );
						camRayOrigin = temp.xyz / temp.w;  // 透视除法
						
						// 远裁剪面上的点：深度值1.0
						temp = invProjectionMatrix * vec4( screenUv, 1.0, 1.0 );
						camRayEnd = temp.xyz / temp.w;
						
						// 第三步：将射线转换到实例的局部坐标系
						// 每个实例有自己的局部坐标系，需要独立进行射线步进
						vec3 instRayOrigin, instRayDirection, instRayEnd;
						
						// 将相机射线起点转换到实例局部空间
						instRayOrigin = ( invInstanceToViewMatrix * vec4( camRayOrigin, 1.0 ) ).xyz;
						// 将相机射线终点转换到实例局部空间
						instRayEnd = ( invInstanceToViewMatrix * vec4( camRayEnd, 1.0 ) ).xyz;
						// 计算射线方向（单位向量）
						instRayDirection = normalize( instRayEnd - instRayOrigin );
						
						// 第四步：计算射线与实例包围盒的交点
						// 确定射线在实例内部的线段范围
						vec2 bounds = hitBox( instRayOrigin, instRayDirection );
						
						// 检查是否有交点：如果进入时间大于退出时间，表示没有交点
						if ( bounds.x > bounds.y ) {
							// 丢弃该片段（完全透明，不写入深度和颜色缓冲区）
							discard;
							return;  // 提前返回，避免后续计算
						}
						
						// 确保射线起点在包围盒外部或表面上
						bounds.x = max( bounds.x, 0.0 );
						
						// 第五步：设置射线步进参数
						// 将射线在包围盒内的部分等分为100步
						float stepSize = ( bounds.y - bounds.x ) / 100.0;
						
						// 当前采样点（将在步进循环中更新）
						vec3 p;
						
						// 第六步：射线步进循环（体绘制核心）
						// 沿着射线方向，逐步采样3D纹理
						for ( float i = 0.0; i < 100.0; i += 1.0 ) {
							// 计算当前步进距离
							float t = bounds.x + i * stepSize;
							// 计算当前采样点在实例局部空间中的位置
							p = instRayOrigin + t * instRayDirection;
							
							// 采样3D纹理获取密度值
							// 注意：+0.5将坐标从[-0.5,0.5]转换到[0,1]纹理坐标空间
							float density = sample1( p + 0.5 );
							
							// 密度阈值测试：如果密度大于0.5，表示命中表面
							if ( density > 0.5 ) {
								// 设置片段颜色：将局部坐标映射到RGB颜色
								// p的范围是[-0.5,0.5]，乘以2后为[-1,1]，适合作为颜色值
								color.rgb = p * 2.0;
								// 设置不透明度为完全 opaque
								color.a = 1.0;
								// 找到命中点，提前终止循环（节省计算资源）
								break;
							}
						}
						
						// 第七步：检查是否找到有效表面
						// 如果透明度仍为0，表示射线穿过整个体素数据但未命中任何表面
						if ( color.a == 0.0 ) {
							// 丢弃该片段
							discard;
							return;
						}
						
						// 第八步：深度值计算
						// 必须正确计算深度，否则实例之间会出现错误的遮挡关系
						
						// 计算命中点在标准化设备坐标(NDC)中的位置
						vec4 ndc = projectionMatrix * vInstanceToViewMatrix * vec4( p, 1.0 );
						ndc /= ndc.w;  // 透视除法：将齐次坐标转换为3D坐标
						
						// 将NDC坐标的z值映射到深度缓冲区范围[0,1]
						// gl_DepthRange是内置变量，包含深度缓冲区范围信息
						float far = gl_DepthRange.far;    // 通常为1.0
						float near = gl_DepthRange.near;  // 通常为0.0
						
						// 深度计算公式：
						// 1. ndc.z的范围是[-1,1]，需要映射到[near, far]
						// 2. 公式：深度 = ((far - near) * ndc.z + (near + far)) / 2.0
						gl_FragDepth = ( ( ( far - near ) * ndc.z ) + near + far ) / 2.0;
						
						// 注意：这里没有使用传统的法线计算和光照模型
						// 而是直接使用位置作为颜色，简化了视觉效果
					}
				`;

				// ============ 加载和创建体素模型 ============
				
				// 创建VOX格式加载器
				const loader = new VOXLoader();
				
				// 加载VOX模型文件（曼德博海绵，一种分形体素模型）
				// VOX文件路径：models/vox/menger.vox
				loader.load( 'models/vox/menger.vox', function ( chunks ) {
					// 加载完成回调函数，chunks是加载的体素数据块数组
					
					// 遍历所有数据块（一个VOX文件可能包含多个独立的体素模型）
					for ( let i = 0; i < chunks.length; i ++ ) {
						const chunk = chunks[ i ];  // 当前数据块
						
						// ------------ 创建基础几何体 ------------
						// 创建单位立方体几何体：尺寸为1x1x1
						// 这个几何体将作为每个实例的"容器"
						const geometry = new THREE.BoxGeometry( 1, 1, 1 );
						
						// ------------ 创建自定义材质 ------------
						// 使用RawShaderMaterial以完全控制着色器
						const material = new THREE.RawShaderMaterial( {
							// 指定GLSL版本：GLSL 3.0（对应WebGL 2.0）
							glslVersion: THREE.GLSL3,
							
							// 统一变量：可以从JavaScript传递到着色器的常量
							uniforms: {
								// 3D纹理：包含体素数据
								// buildData3DTexture将VOX数据转换为3D纹理
								map: { value: buildData3DTexture( chunk ) },
								// 相机位置：可用于光照计算（当前着色器中未使用）
								cameraPos: { value: new THREE.Vector3() }
							},
							
							// 着色器程序
							vertexShader: vertexShader,      // 自定义顶点着色器
							fragmentShader: fragmentShader,  // 自定义片段着色器
							
							// 渲染面：背面
							// 对于体绘制，通常渲染背面以避免深度测试问题
							side: THREE.BackSide
						} );
						
						// ------------ 创建实例化网格 ------------
						// 使用InstancedMesh高效渲染大量相同几何体
						// 参数：几何体，材质，实例数量（50000个）
						const mesh = new THREE.InstancedMesh( geometry, material, 50000 );
						
						// 渲染前回调：在每一帧渲染前更新材质uniform
						mesh.onBeforeRender = function () {
							// 将当前相机位置传递给着色器
							this.material.uniforms.cameraPos.value.copy( camera.position );
						};
						
						// ------------ 为每个实例设置变换 ------------
						// 创建临时对象用于计算变换矩阵
						const transform = new THREE.Object3D();
						
						// 遍历所有实例，为每个实例设置随机位置和旋转
						for ( let i = 0; i < mesh.count; i ++ ) {
							// 随机位置生成：
							// 1. random()生成[0,1]的随机向量
							// 2. subScalar(0.5)转换为[-0.5,0.5]
							// 3. multiplyScalar(150)扩展到[-75,75]
							transform.position.random().subScalar( 0.5 ).multiplyScalar( 150 );
							
							// 随机旋转：绕X、Y、Z轴分别随机旋转0~π弧度
							transform.rotation.x = Math.random() * Math.PI;
							transform.rotation.y = Math.random() * Math.PI;
							transform.rotation.z = Math.random() * Math.PI;
							
							// 更新变换矩阵：将位置、旋转、缩放组合成一个4x4矩阵
							transform.updateMatrix();
							
							// 为当前实例设置变换矩阵
							// InstancedMesh内部会存储这些矩阵并在渲染时使用
							mesh.setMatrixAt( i, transform.matrix );
						}
						
						// ------------ 将网格添加到场景 ------------
						scene.add( mesh );
						
						// 注意：这里没有调用mesh.instanceMatrix.needsUpdate = true;
						// 因为实例矩阵在创建后不会动态修改
					}
				} );

				// ============ 事件监听器 ============
				
				// 监听窗口大小改变事件
				window.addEventListener( 'resize', onWindowResize );
			}

			// ============ 窗口大小改变处理函数 ============
			function onWindowResize() {
				// 更新相机宽高比：匹配新的窗口尺寸
				camera.aspect = window.innerWidth / window.innerHeight;
				// 更新相机投影矩阵：必须调用此方法使更改生效
				camera.updateProjectionMatrix();
				// 更新渲染器尺寸：填充整个窗口
				renderer.setSize( window.innerWidth, window.innerHeight );
			}

			// ============ 动画循环函数 ============
			// 每帧调用一次（通常每秒60次）
			function animate() {
				// 获取自上一帧以来的时间差（秒）
				// 用于与帧率无关的动画计算
				const delta = clock.getDelta();
				
				// 更新轨道控制器：处理自动旋转和阻尼
				controls.update( delta );
				
				// 渲染场景：执行WebGL绘制调用
				renderer.render( scene, camera );
			}

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