<!-- 代码功能描述
这是一个 Three.js 内存压力测试演示，主要用于验证WebGL应用中的内存管理机制和垃圾回收行为。

主要功能：
实时3D渲染：使用Three.js在浏览器中渲染3D图形

动态对象创建：每帧创建一个具有随机参数的球体

资源压力测试：每帧都创建新的几何体、纹理和材质

内存回收验证：测试Three.js的dispose()方法是否能正确释放GPU和内存资源

性能监控：通过连续创建和销毁对象来观察内存使用情况

核心流程（每帧循环）：
text
创建随机球体几何体 → 创建随机颜色纹理 → 创建材质 → 创建网格
    ↓
添加到场景并渲染 → 从场景移除 → 释放所有资源(dispose)
主要技术点
1. Three.js核心架构
场景(Scene)：所有3D对象的容器

相机(Camera)：透视相机，定义观察视角

渲染器(Renderer)：WebGL渲染器，将3D场景绘制到2D画布

几何体(Geometry)：定义3D物体的形状（球体）

材质(Material)：定义物体外观（颜色、纹理、线框模式）

纹理(Texture)：使用动态生成的Canvas作为贴图

网格(Mesh)：几何体和材质的结合体，是实际渲染的对象

2. WebGL相关技术
Canvas纹理(CanvasTexture)：将HTML Canvas元素作为WebGL纹理源

设备像素比(Device Pixel Ratio)：适配高分辨率屏幕（Retina显示屏）

线框渲染(Wireframe)：只显示几何体的边，不填充面

透视投影(Perspective Projection)：模拟人眼视角的3D渲染

3. 内存管理机制
关键API：dispose()方法
javascript
geometry.dispose();    // 释放几何体GPU缓冲区
material.dispose();    // 释放材质和着色器程序
texture.dispose();     // 释放纹理GPU内存
内存释放流程：
text
JavaScript对象 → WebGL资源 → GPU内存
      ↓             ↓           ↓
  垃圾回收 ← dispose() ← 显式释放
4. 现代JavaScript特性
ES6模块(ES6 Modules)：使用import/export语法

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

模板字符串(Template Literals)：动态生成颜色字符串

严格模式(Strict Mode)：模块脚本默认启用

5. HTML5 Canvas API
动态Canvas创建：每帧创建新的Canvas元素

2D绘图上下文：使用getContext('2d')进行2D绘制

随机颜色生成：使用Math.random()生成RGB值

6. 浏览器性能特性
requestAnimationFrame替代：使用setAnimationLoop()实现动画循环

视口适配：响应式布局适应不同屏幕尺寸

安全属性：使用rel="noopener"防止安全漏洞

技术要点详解
1. Three.js坐标系系统
javascript
camera.position.z = 200;  // 沿z轴移动相机
右手坐标系：x轴向右，y轴向上，z轴向屏幕外

单位系统：Three.js使用任意单位，通常1单位=1米

2. 透视相机参数
javascript
new THREE.PerspectiveCamera(60, aspect, 1, 10000)
60度视野：接近人眼的自然视角

1-10000裁剪范围：只渲染这个距离范围内的物体

宽高比动态计算：window.innerWidth / window.innerHeight

3. 几何体参数随机化
javascript
new THREE.SphereGeometry(50, Math.random() * 64, Math.random() * 32)
半径固定：50个单位

分段数随机：水平分段0-64，垂直分段0-32

影响性能：分段数越多，顶点越多，渲染成本越高

4. 纹理优化
javascript
canvas.width = 256;  // 2的幂次方尺寸
canvas.height = 256; // 提升WebGL兼容性和性能
2的幂次方纹理：256×256、512×512等

Mipmap生成：WebGL自动生成多级纹理

动态生成：避免网络请求，减少延迟

5. 动画循环机制
javascript
renderer.setAnimationLoop(animate);
替代方案：比传统的requestAnimationFrame更简洁

帧率同步：与浏览器刷新率同步（通常60fps）

自动暂停：页面不可见时自动停止，节省资源

内存测试的关键观察点
1. 内存泄漏检测
如果dispose()调用不正确，GPU内存会持续增长

Chrome DevTools中观察JavaScript堆大小和GPU内存使用

2. 垃圾回收行为
频繁创建对象会触发频繁的垃圾回收

观察垃圾回收对帧率的影响

3. 性能瓶颈
CPU瓶颈：JavaScript对象创建和销毁

GPU瓶颈：纹理上传和几何体缓冲区更新

内存瓶颈：频繁的内存分配和回收

4. 最佳实践对比
测试代码（不良实践）	生产代码（最佳实践）
每帧创建新对象	对象池重用
频繁dispose()调用	长期持有，复用对象
动态纹理生成	预加载纹理资源
随机几何体参数	固定的优化几何体
扩展技术应用
1. 实际应用场景
游戏开发：粒子系统、动态地形

数据可视化：实时更新的3D图表

产品展示：交互式3D模型查看器

教育培训：物理模拟、分子结构展示

2. 性能优化技术
实例化渲染(Instanced Rendering)：相同网格的大量复制

几何体合并(Geometry Merging)：减少draw call

LOD(Level of Detail)：根据距离使用不同精度的模型

视锥体裁剪(Frustum Culling)：只渲染可见物体

3. 进阶功能
着色器编程(Shader Programming)：自定义渲染效果

后期处理(Post-processing)：添加滤镜和特效

物理引擎集成：添加碰撞检测和物理模拟

VR/AR支持：虚拟现实和增强现实应用

4. 调试和监控
javascript
// 内存使用监控
if (performance.memory) {
    console.log(`已用堆大小: ${performance.memory.usedJSHeapSize}`);
}

// 帧率监控
let frames = 0;
let lastTime = performance.now();
function monitorFPS() {
    frames++;
    const now = performance.now();
    if (now - lastTime >= 1000) {
        console.log(`FPS: ${frames}`);
        frames = 0;
        lastTime = now;
    }
}
总结
这个代码示例虽然简单，但涵盖了Three.js和WebGL开发的多个核心技术点：

基础架构：场景、相机、渲染器的设置

资源管理：几何体、材质、纹理的创建和释放

动画循环：实现流畅的实时渲染

内存管理：WebGL资源的正确清理

性能考量：理解和避免常见性能问题

通过这个测试，开发者可以：

学习Three.js的基本用法

理解WebGL资源管理的重要性

掌握内存泄漏的检测和预防方法

为开发更复杂的3D应用打下基础 -->


<!DOCTYPE html>
<!-- 声明文档类型为HTML5 -->
<html lang="en">
	<head>
		<!-- 网页头部开始 -->
		<!-- 网页标题：修改为中文 -->
		<title>Three.js - WebGL 内存压力测试示例一</title>
		<!-- 设置文档字符编码为UTF-8，支持中文等多国语言 -->
		<meta charset="utf-8">
		<!-- 
			视口(viewport)设置：
			width=device-width - 宽度等于设备宽度
			user-scalable=no - 禁止用户手动缩放（为了更好地控制移动端体验）
			minimum-scale=1.0 - 最小缩放比例为1.0（100%）
			maximum-scale=1.0 - 最大缩放比例为1.0（100%）
			这个设置确保了在不同设备上的一致显示
		-->
		<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">
		<!-- 
			内部样式表（内嵌样式）：
			优先级高于外部样式表，会覆盖外部样式表中相同的样式
		-->
		<style>
			/* 
				设置整个页面的基础样式 
				background-color: #fff - 纯白色背景（十六进制表示）
				color: #000 - 纯黑色文字颜色
			*/
			body {
				background-color: #fff;
				color: #000;
			}
			/* 
				设置所有超链接的样式
				color: #08f - 亮蓝色链接（十六进制简写，等价于#0088ff）
				#08f 分别表示：
				# - 十六进制颜色标识符
				0 - 红色分量00（0-255的十六进制表示）
				8 - 绿色分量88（136/255）
				f - 蓝色分量ff（255/255）
			*/
			a {
				color: #08f;
			}
			/* 
				补充说明：CSS颜色值表示方法
				1. 十六进制：#RRGGBB 或 #RGB（简写）
				2. RGB函数：rgb(0, 136, 255)
				3. RGBA函数：rgba(0, 136, 255, 0.5) - 带透明度
			*/
		</style>
	</head>

	<body>
		<!-- 
			网页主体开始
			页面上显示的信息区域
			id="info" - 为这个div元素分配唯一的标识符，可通过CSS或JavaScript选择
			修改为中文内容
		-->
		<div id="info">
			<!-- 
				超链接元素：
				href="https://threejs.org" - 链接目标地址
				target="_blank" - 在新标签页或新窗口中打开链接
				rel="noopener" - 安全属性，防止新页面访问原页面的window.opener属性
				链接文本修改为中文
			-->
			<a href="https://threejs.org" target="_blank" rel="noopener">Three.js官方网站</a> - 内存压力测试演示（示例一）
			<!-- 
				补充说明：链接的rel属性
				noopener: 防止新页面通过window.opener访问原页面，增强安全性
				noreferrer: 可选属性，防止发送Referrer头部信息
			-->
		</div>

		<!-- 
			importmap脚本：
			这是现代浏览器支持的模块导入映射功能
			type="importmap" - 指定脚本类型为导入映射
			允许开发者定义模块标识符到实际URL的映射
			作用类似于传统JavaScript中的模块路径别名
		-->
		<script type="importmap">
			{
				"imports": {
					"three": "../build/three.module.js",
					"three/addons/": "./jsm/"
				}
			}
		</script>

		<!-- 
			主JavaScript模块脚本
			type="module" - 声明这是一个ES6模块脚本
			模块脚本具有自己的作用域，不会污染全局命名空间
			支持import/export语法
		-->
		<script type="module">
			// 使用import语句导入three.js库的所有导出内容
			// * as THREE - 将three.js的所有导出作为一个名为THREE的对象
			// 这样可以访问THREE.Scene、THREE.WebGLRenderer等所有Three.js类和方法
			import * as THREE from 'three';

			// 声明全局变量（在模块作用域内）
			// 这些变量将在多个函数之间共享
			let camera;     // 相机对象：用于定义观察3D场景的视角
			let scene;      // 场景对象：包含所有3D对象（网格、灯光等）的容器
			let renderer;   // 渲染器对象：负责将3D场景渲染到2D画布上

			// 初始化函数调用
			// 在脚本加载完成后立即执行，设置Three.js的基本环境
			init();

			/**
			 * 初始化函数
			 * 主要任务：设置Three.js应用程序的基础架构
			 * 1. 创建HTML容器
			 * 2. 创建相机
			 * 3. 创建场景
			 * 4. 创建并配置渲染器
			 * 5. 将渲染器的canvas元素添加到DOM中
			 * 
			 * 注意：此函数只执行一次，在页面加载时调用
			 */
			function init() {
				// 步骤1：创建容器元素
				// 使用document.createElement创建新的div元素
				const container = document.createElement('div');
				// 将新创建的div元素添加到body的末尾
				// appendChild是DOM操作方法，用于添加子节点
				document.body.appendChild(container);

				// 步骤2：创建透视相机
				// THREE.PerspectiveCamera参数说明：
				// 参数1: fov (field of view) - 视野角度（单位：度），垂直方向的视角范围
				//        60度是常用的自然视角，接近人眼的视野范围
				// 参数2: aspect - 宽高比，通常是窗口宽度除以窗口高度
				//        window.innerWidth / window.innerHeight 获取浏览器视口的宽高比
				// 参数3: near - 近裁剪平面距离，小于此距离的物体不会被渲染
				//        设置为1，表示距离相机1个单位内的物体不显示
				// 参数4: far - 远裁剪平面距离，大于此距离的物体不会被渲染
				//        设置为10000，表示距离相机10000个单位外的物体不显示
				camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 10000);
				// 设置相机位置：沿z轴正方向移动200个单位
				// Three.js坐标系：x轴向右，y轴向上，z轴从屏幕向外
				camera.position.z = 200;

				// 步骤3：创建场景
				// 场景是Three.js中所有3D对象的容器
				scene = new THREE.Scene();
				// 设置场景背景颜色：白色
				// THREE.Color支持多种颜色格式：
				// 1. 十六进制：0xffffff
				// 2. 字符串："white" 或 "#ffffff"
				// 3. RGB：new THREE.Color(1, 1, 1)
				scene.background = new THREE.Color(0xffffff);

				// 步骤4：创建WebGL渲染器
				// WebGLRenderer使用WebGL API在canvas元素上绘制3D图形
				renderer = new THREE.WebGLRenderer();
				// 设置设备像素比（Device Pixel Ratio）
				// window.devicePixelRatio获取设备的物理像素与CSS像素的比值
				// 对于高清显示屏（Retina显示屏），这个值通常大于1（如2.0）
				// 设置这个值可以确保在高分辨率屏幕上获得清晰的渲染效果
				renderer.setPixelRatio(window.devicePixelRatio);
				// 设置渲染器的大小，使其填满整个浏览器窗口
				renderer.setSize(window.innerWidth, window.innerHeight);
				// 设置动画循环函数
				// setAnimationLoop是Three.js r125+版本的API，替代了传统的requestAnimationFrame
				// animate函数将在每一帧被调用，实现动画效果
				renderer.setAnimationLoop(animate);
				// 将渲染器的canvas元素添加到之前创建的容器中
				// renderer.domElement是渲染器创建的<canvas>元素
				container.appendChild(renderer.domElement);

				// 补充：可选的窗口大小变化监听器（建议添加）
				// window.addEventListener('resize', onWindowResize);
				// function onWindowResize() {
				//     camera.aspect = window.innerWidth / window.innerHeight;
				//     camera.updateProjectionMatrix();
				//     renderer.setSize(window.innerWidth, window.innerHeight);
				// }
			}

			/**
			 * 创建随机颜色的Canvas图像
			 * 这个函数用于生成动态纹理，而不是使用静态图片文件
			 * 
			 * @returns {HTMLCanvasElement} 返回创建的canvas DOM元素
			 * 
			 * 实现步骤：
			 * 1. 创建一个256x256像素的canvas元素
			 * 2. 获取2D绘图上下文
			 * 3. 生成随机RGB颜色
			 * 4. 用随机颜色填充整个canvas
			 * 
			 * 优点：动态生成，无需网络请求，适合测试和演示
			 * 缺点：每次调用都创建新的canvas，可能产生内存压力
			 */
			function createImage() {
				// 创建canvas元素
				// document.createElement('canvas') - 创建canvas DOM元素
				const canvas = document.createElement('canvas');
				// 设置canvas的宽度为256像素
				canvas.width = 256;
				// 设置canvas的高度为256像素
				// 注意：256x256是纹理的常用尺寸（2的幂次方）
				// 2的幂次方纹理（256, 512, 1024等）在WebGL中有更好的性能和兼容性
				canvas.height = 256;

				// 获取2D绘图上下文
				// getContext('2d')返回CanvasRenderingContext2D对象
				// 用于在canvas上进行2D绘图操作
				const context = canvas.getContext('2d');
				
				// 生成随机RGB颜色字符串
				// Math.random()返回0到1之间的随机数（包含0，不包含1）
				// Math.floor()向下取整，得到0-255的整数
				// 格式：'rgb(r, g, b)'
				context.fillStyle = 'rgb(' + 
					Math.floor(Math.random() * 256) + ',' + // 红色分量
					Math.floor(Math.random() * 256) + ',' + // 绿色分量
					Math.floor(Math.random() * 256) + ')';   // 蓝色分量
				
				// 用随机颜色填充整个canvas
				// fillRect(x, y, width, height) - 绘制填充矩形
				// 从左上角(0,0)开始，填充整个256x256的区域
				context.fillRect(0, 0, 256, 256);

				// 返回创建好的canvas元素
				return canvas;

				// 补充：替代方案（性能更好）
				// 可以预先创建多个颜色的canvas，或者重用同一个canvas
				// 避免频繁创建和销毁DOM元素
			}

			/**
			 * 动画循环函数（每一帧执行）
			 * 这是Three.js应用的核心动画循环
			 * 每一帧都会执行以下操作：
			 * 1. 创建新的几何体（随机参数的球体）
			 * 2. 创建新的纹理（随机颜色）
			 * 3. 创建新的材质
			 * 4. 创建新的网格对象
			 * 5. 将网格添加到场景并渲染
			 * 6. 从场景中移除网格
			 * 7. 释放所有创建的资源（关键步骤！）
			 * 
			 * 注意：这是一个内存压力测试，实际应用中不应该每帧都创建和销毁对象
			 */
			function animate() {
				// 1. 创建球体几何体
				// THREE.SphereGeometry参数说明：
				// 参数1: radius - 球体半径，设置为50个单位
				// 参数2: widthSegments - 水平分段数（经线数量），决定球体的水平细分程度
				//        Math.random() * 64 生成0-64之间的随机数
				// 参数3: heightSegments - 垂直分段数（纬线数量），决定球体的垂直细分程度
				//        Math.random() * 32 生成0-32之间的随机数
				// 分段数越多，球体越平滑，但顶点和面片也越多，计算量越大
				const geometry = new THREE.SphereGeometry(50, Math.random() * 64, Math.random() * 32);

				// 2. 创建Canvas纹理
				// THREE.CanvasTexture使用HTMLCanvasElement作为纹理源
				// createImage()返回一个随机颜色的canvas
				// 这个纹理会被应用到球体表面
				const texture = new THREE.CanvasTexture(createImage());

				// 3. 创建基础材质
				// THREE.MeshBasicMaterial是一种不受光照影响的基础材质
				// 参数对象属性说明：
				// map: texture - 使用上面创建的canvas纹理作为颜色贴图
				// wireframe: true - 启用线框模式，只显示几何体的边，不填充面
				// 线框模式对于调试和特定视觉效果很有用
				const material = new THREE.MeshBasicMaterial({ 
					map: texture, 
					wireframe: true 
				});

				// 4. 创建网格对象（几何体 + 材质）
				// THREE.Mesh是Three.js中最基本的3D对象
				// 它将几何体（形状）和材质（外观）结合在一起
				const mesh = new THREE.Mesh(geometry, material);

				// 5. 将网格添加到场景中
				// scene.add()将对象添加到场景图中
				// 此时网格成为场景的一部分，会被渲染器渲染
				scene.add(mesh);

				// 6. 渲染场景
				// renderer.render()执行实际的渲染操作
				// 参数1: scene - 要渲染的场景
				// 参数2: camera - 从哪个视角渲染场景
				// 这个方法会清空canvas，然后根据相机视角绘制场景中的所有可见对象
				renderer.render(scene, camera);

				// 7. 渲染完成后，立即从场景中移除网格
				// scene.remove()从场景中删除对象
				// 注意：这只是从场景图中移除，对象仍然在内存中
				scene.remove(mesh);

				// ----- 内存清理部分（关键！） -----
				// 以下是释放GPU和内存资源的重要步骤
				// 如果不执行这些dispose()调用，会导致内存泄漏

				// 释放几何体资源
				// geometry.dispose()：
				// 1. 删除WebGL缓冲区中的顶点数据
				// 2. 释放JavaScript内存中的几何体对象
				// 3. 如果有索引缓冲区，也会被删除
				geometry.dispose();
				
				// 释放材质资源
				// material.dispose()：
				// 1. 删除材质相关的WebGL资源
				// 2. 如果有自定义着色器程序，也会被清理
				// 3. 释放JavaScript内存中的材质对象
				material.dispose();
				
				// 释放纹理资源
				// texture.dispose()：
				// 1. 删除WebGL纹理对象
				// 2. 释放GPU纹理内存
				// 3. 释放JavaScript内存中的纹理对象
				// 4. 如果纹理来源于canvas，canvas元素不会被自动删除
				texture.dispose();
				
				// 注意：mesh对象没有被显式释放
				// 但由于geometry和material已经被释放，mesh实际上已无法使用
				// 在JavaScript垃圾回收时，mesh会被自动回收

				// ----- 测试目的说明 -----
				// 这个示例的主要目的是测试内存管理：
				// 1. 验证频繁创建/销毁对象时的内存行为
				// 2. 测试dispose()方法是否正确释放资源
				// 3. 观察浏览器垃圾回收的表现
				// 4. 检测潜在的内存泄漏
				
				// ----- 实际应用建议 -----
				// 实际Three.js应用中应避免每帧都创建/销毁对象：
				// 1. 重用对象：创建一次，多次使用
				// 2. 使用对象池：预先创建一批对象，循环使用
				// 3. 批量渲染：将多个几何体合并为一个以减少draw call
				// 4. 静态内容：不需要变化的物体应该只创建一次
				
				// 可以通过以下方式监控内存使用：
				// 1. Chrome DevTools Memory面板
				// 2. performance.memory API（Chrome浏览器）
				// 3. 手动记录内存快照
			}
		</script>
	</body>
</html>