<!-- 代码功能与技术点详解
一、项目概述
这是一个使用 Three.js WebGPU 渲染器 在单个画布上渲染多个独立3D场景的Web应用。它展示了如何高效管理多个交互式3D视图，而不是为每个场景创建单独的canvas元素。

二、核心功能
1. 批量场景管理
动态创建40个独立的3D场景

每个场景包含不同的几何体（立方体、球体、十二面体、圆柱体）

每个场景有独立的相机、控制器和光照设置

所有场景共享同一个WebGPU渲染器和画布

2. 交互式体验
每个场景支持鼠标拖拽旋转（OrbitControls）

每个模型自动绕Y轴旋转的动画效果

视差滚动：画布跟随页面滚动，创建深度感

3. 响应式布局
3D场景以网格形式排列

自适应不同屏幕尺寸

跟随页面滚动定位

4. 性能优化
屏幕外检测：只渲染可见区域的场景

单画布渲染：避免多个WebGPU上下文开销

裁剪测试：精确控制渲染区域

三、主要技术点
1. WebGPU渲染技术
javascript
renderer = new THREE.WebGPURenderer({ canvas: canvas, antialias: true });
新一代图形API：替代WebGL，提供更低开销、更好性能

原生GPU计算：直接访问GPU硬件能力

并行渲染：更适合现代GPU架构

2. 单画布多视口渲染
javascript
// 关键代码片段
renderer.setViewport(left, top, width, height);
renderer.setScissor(left, top, width, height);
renderer.render(scene, camera);
视口(Viewport)：定义3D场景在画布上的绘制区域

裁剪测试(Scissor Test)：限制像素绘制到指定矩形区域

高效内存使用：避免多个canvas的内存开销

3. DOM位置同步渲染
javascript
const rect = element.getBoundingClientRect();
const width = rect.right - rect.left;
const height = rect.bottom - rect.top;
const left = rect.left;
const top = rect.top;
getBoundingClientRect()：获取DOM元素在视口中的精确位置

实时同步：3D渲染区域与HTML元素位置完全对应

滚动感知：考虑页面滚动偏移量

4. Three.js节点材质系统
javascript
import { color } from 'three/tsl';
scene.backgroundNode = color(0xeeeeee);
TSL(Three.js Shading Language)：声明式着色器编程

节点化材质：可视化、可组合的材质系统

WebGPU优化：专门为WebGPU设计的材质系统

5. 性能优化策略
a. 屏幕外检测
javascript
if (rect.bottom < 0 || rect.top > renderer.domElement.clientHeight ||
    rect.right < 0 || rect.left > renderer.domElement.clientWidth) {
    return; // 跳过屏幕外场景
}
提前剔除：不在视口内的场景不调用渲染

减少GPU负载：避免不必要的绘制调用

节能：移动设备上减少电池消耗

b. 批量渲染
单一渲染循环：所有场景在同一个动画帧中渲染

状态切换最小化：按需启用/禁用裁剪测试

共享资源：渲染器、画布、WebGPU上下文共享

6. Three.js核心架构应用
a. 场景图管理
javascript
const scene = new THREE.Scene();
scene.add(new THREE.Mesh(geometry, material));
scene.add(new THREE.HemisphereLight(...));
层次结构：对象父子关系管理

变换继承：子对象继承父对象的变换

统一坐标系：所有对象在同一个3D空间中

b. 相机系统
javascript
const camera = new THREE.PerspectiveCamera(50, 1, 1, 10);
camera.position.z = 2;
透视投影：模拟人眼视角的3D效果

裁剪平面：近平面=1，远平面=10

独立设置：每个场景有自己的相机参数

c. 光照系统
javascript
// 半球光（环境光）
scene.add(new THREE.HemisphereLight(0xaaaaaa, 0x444444, 3));
// 方向光（主光源）
const light = new THREE.DirectionalLight(0xffffff, 1.5);
多光源组合：环境光 + 方向光

物理光照模型：基于物理的渲染(PBR)材质

光照强度控制：精确的光照参数调整

7. 交互控制系统
javascript
const controls = new OrbitControls(camera, element);
controls.minDistance = 2;
controls.maxDistance = 5;
controls.enablePan = false;
controls.enableZoom = false;
受限交互：只允许旋转，禁用平移和缩放

事件委托：鼠标事件绑定到特定DOM元素

平滑控制：内置缓动和惯性效果

8. 现代JavaScript特性
a. ES6模块系统
javascript
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
模块化组织：按需导入，减少代码体积

依赖管理：清晰的导入/导出关系

tree shaking支持：生产环境自动移除未使用代码

b. 导入映射(Import Maps)
html
<script type="importmap">
{
    "imports": {
        "three": "../build/three.webgpu.js",
        "three/addons/": "./jsm/"
    }
}
</script>
路径别名：简化模块导入路径

版本管理：集中控制依赖版本

开发便利：避免相对路径混乱

四、架构优势
1. 性能优势
单WebGPU上下文：避免多个上下文的创建和切换开销

GPU批处理：多个场景在同一渲染通道中处理

智能剔除：自动跳过不可见场景

2. 内存效率
共享GPU资源：纹理、缓冲区、着色器程序共享

最小DOM节点：避免大量canvas元素的内存占用

按需渲染：只更新可见区域

3. 用户体验
无缝集成：3D内容与HTML自然融合

响应迅速：优化后的渲染性能

视觉一致：所有场景统一风格和交互

4. 开发维护
代码复用：场景创建逻辑统一

易于扩展：轻松添加更多场景

调试友好：所有渲染在单一画布上

五、应用场景
产品展示画廊：多个3D产品模型展示

多视图编辑器：3D建模软件的多视图界面

数据可视化仪表板：多个3D图表同时显示

游戏关卡选择：3D预览多个游戏关卡

教育演示：同时展示多个科学模型

六、技术亮点总结
WebGPU前沿技术：使用下一代Web图形API

高效渲染架构：单画布多视口的最佳实践

智能性能优化：屏幕外检测和批量渲染

优雅的交互设计：受限但直观的控制方式

现代Web开发生态：ES6模块、导入映射等现代特性 -->


<!DOCTYPE html>
<html lang="en">
	<head>
		<!-- 
			页面标题 - 已替换为中文
			描述这是一个使用Three.js WebGPU渲染器在单个画布上渲染多个3D场景的示例
		-->
		<title>Three.js WebGPU - 多元素3D场景渲染示例</title>
		
		<!-- 
			字符编码设置 
			UTF-8确保支持中文字符和特殊符号
		-->
		<meta charset="utf-8">
		
		<!-- 
			视口设置，移动端适配
			width=device-width: 视口宽度等于设备宽度
			user-scalable=no: 禁止用户手动缩放
			minimum-scale=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">
		
		<style>
			/* 
				CSS重置和全局样式
				* 通配符选择器匹配所有元素
			*/
			* {
				/* 
					盒模型设置
					border-box: 元素的宽度和高度包括内边距和边框
					确保元素尺寸计算一致
				*/
				box-sizing: border-box;
				/* Firefox浏览器兼容性前缀 */
				-moz-box-sizing: border-box;
			}

			/* 
				页面主体样式
				设置白色背景和深灰色文字颜色
				提供良好的对比度
			*/
			body {
				background-color: #fff;
				color: #444;
			}

			/* 
				链接样式
				设置链接颜色为亮蓝色(#08f)
				提供视觉反馈
			*/
			a {
				color: #08f;
			}

			/* 
				#content 容器样式
				这个div包含所有3D场景的HTML元素
			*/
			#content {
				/* 绝对定位，脱离文档流 */
				position: absolute;
				/* 顶部对齐 */
				top: 0;
				/* 宽度100%占满父容器 */
				width: 100%;
				/* 
					堆叠层级
					值越大越靠前
					确保内容显示在canvas上方
				*/
				z-index: 1;
				/* 
					内边距设置
					顶部3em，其他方向0
					em是相对单位，基于父元素字体大小
				*/
				padding: 3em 0 0 0;
			}

			/* 
				#c canvas元素样式
				这个canvas用于渲染所有3D场景
			*/
			#c {
				/* 绝对定位，覆盖整个页面 */
				position: absolute;
				/* 左对齐 */
				left: 0;
				/* 宽度100% */
				width: 100%;
				/* 高度100% */
				height: 100%;
			}

			/* 
				.list-item 类样式
				每个3D场景的容器元素
			*/
			.list-item {
				/* 
					行内块级元素
					既可以设置宽高，又可以水平排列
				*/
				display: inline-block;
				/* 外边距：上下左右各1em */
				margin: 1em;
				/* 内边距：上下左右各1em */
				padding: 1em;
				/* 
					盒子阴影效果
					参数：水平偏移 垂直偏移 模糊半径 扩散半径 颜色
					创建立体感
				*/
				box-shadow: 1px 2px 4px 0px rgba(0,0,0,0.25);
			}

			/* 
				.list-item的第一个子div
				这是3D场景的占位容器
			*/
			.list-item > div:nth-child(1) {
				/* 固定宽度200像素 */
				width: 200px;
				/* 固定高度200像素 */
				height: 200px;
			}

			/* 
				.list-item的第二个子div
				这是场景描述文本容器
			*/
			.list-item > div:nth-child(2) {
				/* 文字颜色：灰色 */
				color: #888;
				/* 字体：无衬线字体，浏览器默认 */
				font-family: sans-serif;
				/* 字体大小：大号 */
				font-size: large;
				/* 宽度与场景容器一致 */
				width: 200px;
				/* 顶部外边距，与场景容器分隔 */
				margin-top: 0.5em;
			}
		</style>
	</head>
	<body>
		<!-- 
			主画布元素
			id="c" 用于JavaScript获取DOM元素
			所有3D场景都将在单个canvas上渲染
		-->
		<canvas id="c"></canvas>

		<!-- 
			内容容器
			包含页面标题和动态生成的场景元素
		-->
		<div id="content">
			<!-- 
				页面信息区域 - 已替换为中文
				显示Three.js链接和页面描述
			-->
			<div id="info">
				<a href="https://threejs.org" target="_blank" rel="noopener">Three.js</a> 
				- WebGPU多场景渲染示例：在单个画布上显示40个独立3D场景
			</div>
			<!-- 
				注意：这里没有关闭div标签
				因为JavaScript会动态添加场景元素到这个div内
				作为#content的子元素
			-->
		</div>

		<!-- 
			导入映射(Import Map)
			现代浏览器支持的模块解析机制
			允许为模块指定别名或自定义路径
		-->
		<script type="importmap">
			{
				"imports": {
					"three": "../build/three.webgpu.js",
					"three/webgpu": "../build/three.webgpu.js",
					"three/tsl": "../build/three.tsl.js",
					"three/addons/": "./jsm/"
				}
			}
		</script>

		<!-- 
			主JavaScript代码
			type="module" 表示这是ES6模块
			支持import/export语法
		-->
		<script type="module">
			// 导入Three.js核心库的所有导出，命名为THREE
			import * as THREE from 'three';
			// 从three/tsl导入color函数，用于节点材质系统的颜色定义
			import { color } from 'three/tsl';

			// 导入轨道控制器，允许用户用鼠标拖拽旋转场景
			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

			// 全局变量声明
			let canvas;    // 存储canvas DOM元素
			let renderer;  // 存储Three.js WebGPU渲染器实例
			const scenes = []; // 存储所有3D场景的数组，初始为空数组

			// 程序入口：调用初始化函数
			init();

			// 初始化函数定义
			function init() {
				// 步骤1：获取canvas DOM元素
				// document.getElementById()通过id获取元素
				canvas = document.getElementById('c');

				// 步骤2：创建几何体数组
				// 包含四种不同类型的几何体，用于随机分配给场景
				const geometries = [
					// 立方体几何体：宽度、高度、深度各为1单位
					new THREE.BoxGeometry(1, 1, 1),
					// 球体几何体：半径0.5，经度分段数12，纬度分段数8
					new THREE.SphereGeometry(0.5, 12, 8),
					// 十二面体几何体：半径0.5
					new THREE.DodecahedronGeometry(0.5),
					// 圆柱体几何体：顶部半径0.5，底部半径0.5，高度1，分段数12
					new THREE.CylinderGeometry(0.5, 0.5, 1, 12)
				];

				// 步骤3：获取内容容器元素
				// 场景的HTML元素将添加到这个容器中
				const content = document.getElementById('content');

				// 步骤4：循环创建40个3D场景
				// i从0到39，共40次迭代
				for (let i = 0; i < 40; i++) {
					// 4.1 创建新场景
					// THREE.Scene()创建3D场景容器
					const scene = new THREE.Scene();
					// 设置场景背景色为浅灰色(0xeeeeee)
					// backgroundNode是WebGPU渲染器特有的属性
					scene.backgroundNode = color(0xeeeeee);

					// 4.2 创建HTML列表项元素
					// document.createElement()创建DOM元素
					const element = document.createElement('div');
					// 添加CSS类名，应用预定义的样式
					element.className = 'list-item';

					// 4.3 创建3D场景的占位div
					// 这个div不直接显示内容，而是作为3D场景的定位参考
					const sceneElement = document.createElement('div');
					// appendChild()将子元素添加到父元素
					element.appendChild(sceneElement);

					// 4.4 创建描述文本元素
					const descriptionElement = document.createElement('div');
					// 设置文本内容：场景编号从1开始
					descriptionElement.innerText = '场景 ' + (i + 1);
					element.appendChild(descriptionElement);

					// 4.5 将占位元素存储在场景的用户数据中
					// userData是Three.js对象提供的自定义数据存储对象
					scene.userData.element = sceneElement;
					// 将整个列表项添加到内容容器
					content.appendChild(element);

					// 4.6 创建透视相机
					// 参数：视野角度50度，宽高比1:1，近裁剪面1，远裁剪面10
					const camera = new THREE.PerspectiveCamera(50, 1, 1, 10);
					// 设置相机位置：沿Z轴正方向移动2个单位
					camera.position.z = 2;
					// 将相机存储在场景的用户数据中
					scene.userData.camera = camera;

					// 4.7 创建轨道控制器
					// 参数：控制的相机、交互的DOM元素
					const controls = new OrbitControls(scene.userData.camera, scene.userData.element);
					// 设置最小缩放距离：相机不能比2个单位更近
					controls.minDistance = 2;
					// 设置最大缩放距离：相机不能比5个单位更远
					controls.maxDistance = 5;
					// 禁用平移功能（鼠标右键拖拽）
					controls.enablePan = false;
					// 禁用缩放功能（鼠标滚轮）
					controls.enableZoom = false;
					// 将控制器存储在场景的用户数据中
					scene.userData.controls = controls;

					// 4.8 随机选择一个几何体创建网格
					// geometries.length * Math.random() 生成0-4之间的随机数
					// | 0 是位运算，相当于Math.floor()，取整数部分
					const geometry = geometries[geometries.length * Math.random() | 0];

					// 4.9 创建材质
					const material = new THREE.MeshStandardMaterial({
						// 随机HSL颜色：色相随机，饱和度1，亮度0.75
						// THREE.SRGBColorSpace 使用sRGB颜色空间，更符合人眼感知
						color: new THREE.Color().setHSL(Math.random(), 1, 0.75, THREE.SRGBColorSpace),
						// 粗糙度：0.5（0-1之间，0最光滑，1最粗糙）
						roughness: 0.5,
						// 金属度：0（非金属材质）
						metalness: 0,
						// 平面着色：每个面使用同一颜色，不计算平滑渐变
						flatShading: true
					});

					// 4.10 创建网格并添加到场景
					// THREE.Mesh组合几何体和材质
					scene.add(new THREE.Mesh(geometry, material));

					// 4.11 添加半球光（环境光）
					// 参数：天空颜色、地面颜色、光照强度
					// 模拟来自天空的环境光照
					scene.add(new THREE.HemisphereLight(0xaaaaaa, 0x444444, 3));

					// 4.12 添加平行光（方向光）
					// 参数：颜色、光照强度
					const light = new THREE.DirectionalLight(0xffffff, 1.5);
					// 设置光源位置：X=1, Y=1, Z=1
					light.position.set(1, 1, 1);
					// 将光源添加到场景
					scene.add(light);

					// 4.13 将场景添加到全局数组
					// push()方法在数组末尾添加元素
					scenes.push(scene);
				}

				// 步骤5：创建WebGPU渲染器
				renderer = new THREE.WebGPURenderer({
					// 指定渲染的canvas元素
					canvas: canvas,
					// 启用抗锯齿，平滑边缘
					antialias: true
				});
				// 设置清除颜色为白色，不透明度1
				renderer.setClearColor(0xffffff, 1);
				// 设置设备像素比，适应高分辨率屏幕
				renderer.setPixelRatio(window.devicePixelRatio);
				// 设置动画循环，参数animate是每帧调用的回调函数
				// 替代传统的requestAnimationFrame()
				renderer.setAnimationLoop(animate);
			}

			/**
			 * 更新画布尺寸函数
			 * 确保canvas的绘制尺寸与显示尺寸一致
			 * 防止图像拉伸或模糊
			 */
			function updateSize() {
				// 获取canvas在页面中的实际显示尺寸（CSS像素）
				const width = canvas.clientWidth;
				const height = canvas.clientHeight;

				// 检查尺寸是否发生变化
				// canvas.width是绘制缓冲区的宽度（物理像素）
				if (canvas.width !== width || canvas.height !== height) {
					// 更新渲染器尺寸
					// 参数：宽度，高度，updateStyle（是否更新CSS样式）
					// false表示只更新绘制缓冲区，不改变CSS样式
					renderer.setSize(width, height, false);
				}
			}

			/**
			 * 动画循环函数
			 * 每帧调用，执行以下任务：
			 * 1. 更新画布尺寸
			 * 2. 调整画布位置（视差效果）
			 * 3. 清除画布
			 * 4. 遍历并渲染所有场景
			 */
			function animate() {
				// 任务1：更新画布尺寸
				updateSize();

				// 任务2：创建视差滚动效果
				// 根据页面垂直滚动偏移量平移画布
				// 模板字符串使用反引号，可以嵌入表达式
				canvas.style.transform = `translateY(${window.scrollY}px)`;

				// 任务3：清除整个画布
				// 3.1 设置清除颜色为白色
				renderer.setClearColor(0xffffff);
				// 3.2 禁用裁剪测试，可以绘制到整个画布
				renderer.setScissorTest(false);
				// 3.3 设置视口为整个画布
				renderer.setViewport(0, 0, canvas.width, canvas.height);
				// 3.4 执行清除操作
				renderer.clear();

				// 任务4：启用裁剪测试，开始渲染各个场景
				// 每个场景只在对应的矩形区域内渲染
				renderer.setScissorTest(true);

				// 任务5：遍历所有场景数组
				// forEach()方法对数组每个元素执行回调函数
				scenes.forEach(function(scene) {
					// 5.1 旋转场景中的网格，创建动画效果
					// scene.children[0] 获取第一个子元素（我们添加的网格）
					// rotation.y 绕Y轴旋转
					// Date.now() 返回当前时间戳（毫秒）
					// * 0.001 转换为秒，使旋转速度合理
					scene.children[0].rotation.y = Date.now() * 0.001;

					// 5.2 获取场景对应的HTML占位元素
					const element = scene.userData.element;

					// 5.3 获取元素在视口中的位置和尺寸信息
					// getBoundingClientRect()返回DOMRect对象，包含位置和尺寸
					const rect = element.getBoundingClientRect();

					// 5.4 检查元素是否在视口内（性能优化）
					// 如果元素完全不在可视区域内，跳过渲染
					if (
						// 元素的底部在视口顶部上方（完全在上方）
						rect.bottom < 0 ||
						// 元素的顶部在视口底部下方（完全在下方）
						rect.top > renderer.domElement.clientHeight ||
						// 元素的右侧在视口左侧左方（完全在左侧）
						rect.right < 0 ||
						// 元素的左侧在视口右侧右方（完全在右侧）
						rect.left > renderer.domElement.clientWidth
					) {
						// 使用return跳过当前场景的渲染
						// 减少不必要的GPU计算
						return;
					}

					// 5.5 计算渲染区域参数
					// 宽度 = 右侧坐标 - 左侧坐标
					const width = rect.right - rect.left;
					// 高度 = 底部坐标 - 顶部坐标
					const height = rect.bottom - rect.top;
					// 左侧坐标
					const left = rect.left;
					// 顶部坐标
					const top = rect.top;

					// 5.6 设置渲染器的视口
					// 视口：渲染器在画布上的绘制区域
					renderer.setViewport(left, top, width, height);
					// 设置裁剪区域
					// 裁剪：只允许在指定矩形区域内绘制，之外的部分被丢弃
					renderer.setScissor(left, top, width, height);

					// 5.7 获取场景的相机
					const camera = scene.userData.camera;

					// 5.8 相机宽高比调整（此示例中未启用）
					// 如果需要动态调整相机以适应元素尺寸，取消注释以下代码
					// camera.aspect = width / height; // 计算新的宽高比
					// camera.updateProjectionMatrix(); // 更新相机投影矩阵

					// 5.9 更新控制器（此示例中未启用）
					// 如果需要控制器响应鼠标输入，取消注释以下代码
					// scene.userData.controls.update();

					// 5.10 渲染当前场景
					// 参数：要渲染的场景，使用的相机
					renderer.render(scene, camera);
				});
			}
		</script>
	</body>
</html>