<!-- Three.js WebXR 深度感应拖拽交互系统
一、整体功能概述
这是一个基于Three.js和WebXR技术的混合现实交互演示，主要实现以下功能：

核心功能
沉浸式VR/AR体验：支持头戴式VR设备（如Oculus Quest）和WebXR兼容浏览器

物理拖拽交互：用户可以使用VR控制器在3D空间中抓取、移动和释放物体

深度感应融合：利用设备深度相机实现虚拟物体与真实环境的遮挡关系

动态场景构建：随机生成多种几何体，形成丰富的交互环境

跨平台支持：同时支持桌面模式（鼠标控制）和VR模式（控制器控制）

二、技术架构
1. Three.js核心组件
场景管理：创建3D虚拟世界，管理所有物体和光照

摄像机系统：透视摄像机支持VR立体渲染

渲染管线：WebGL 2.0渲染器，支持阴影、抗锯齿等高级特性

几何体系统：提供多种基础几何体和自定义网格

2. WebXR技术栈
text
WebXR API
├── XR会话管理（会话创建、退出）
├── 控制器输入（手柄、手势）
├── 深度感应（环境深度信息）
├── 渲染优化（异步渲染、姿态预测）
└── 设备适配（VR/AR模式切换）
三、核心技术点详解
1. 深度感应与虚实融合
技术原理
javascript
// 深度纹理处理流程
1. 设备深度相机 → 生成深度图
2. WebXR API → 获取深度纹理
3. 着色器采样 → 实时深度比较
4. 遮挡计算 → 虚实物体关系判断
5. 视觉效果 → 边缘高亮、半透明遮挡
着色器关键技术
深度纹理采样：使用sampler2DArray存储双目深度信息

卷积模糊算法：5×5加权平均核，实现柔和的遮挡边缘

深度容差计算：基于距离的动态容差，避免深度锯齿

立体视觉处理：分别处理左右眼深度，保证立体效果

2. 交互系统设计
射线拾取系统
javascript
// 交互检测流程
控制器姿态 → 射线生成 → 碰撞检测 → 事件处理
    ↓           ↓           ↓         ↓
位置/旋转   方向/长度    物体ID/距离  拖拽/高亮
拖拽物理机制
物体附着：使用controller.attach(object)实现父子关系

状态管理：userData存储交互状态，避免冲突

平滑过渡：位置和旋转的平滑插值，避免突兀移动

3. 着色器编程
顶点着色器
法线变换：normalMatrix保证法线在视图空间正确

位置计算：标准MVP（模型-视图-投影）矩阵变换

片元着色器
光照模型：简化的Blinn-Phong模型（漫反射+高光）

深度处理：实时深度比较、卷积模糊、遮挡混合

颜色混合：基础颜色、深度高亮、遮挡效果的逐像素混合

4. 性能优化技术
渲染优化
实例化渲染：50个物体共享相似材质，减少Draw Call

阴影优化：4096×4096阴影贴图，PCF软阴影

抗锯齿：MSAA抗锯齿，提高视觉质量

内存优化
几何体复用：5种基础几何体实例化使用

纹理共享：深度纹理所有物体共享引用

矩阵复用：临时矩阵对象避免重复创建

5. 错误处理与兼容性
功能检测
javascript
// 分层次的兼容性检测
1. WebGL 2.0支持检测
2. WebXR API可用性检测
3. 深度感应功能检测
4. 控制器连接状态检测
优雅降级
无深度感应 → 显示基础3D场景

单控制器 → 仅支持单手交互

桌面模式 → 降级为鼠标交互

四、系统架构图
text
Three.js WebXR应用架构
├── 应用层
│   ├── 场景管理
│   ├── 交互控制
│   └── 状态管理
├── 渲染层
│   ├── WebGL渲染器
│   ├── 着色器系统
│   └── 后处理管线
├── XR层
│   ├── 会话管理
│   ├── 控制器输入
│   ├── 深度感知
│   └── 姿态跟踪
└── 资源层
    ├── 几何体库
    ├── 材质系统
    └── 纹理管理
五、关键代码模块
1. 初始化模块 (init())
场景、摄像机、渲染器创建

灯光系统配置（半球光+方向光）

几何体批量生成

WebXR会话初始化

2. 交互模块 (onSelectStart/End)
控制器事件监听

射线碰撞检测

物体状态切换

父子关系管理

3. 渲染模块 (render())
深度纹理状态管理

控制器射线更新

悬停效果处理

主渲染循环

4. 着色器模块
自定义材质定义

GLSL代码组织

Uniform变量管理

深度算法实现 -->


<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<!-- 页面元数据设置 -->
		<title>Three.js WebXR - 使用自定义深度着色器的拖拽交互演示</title>
		<meta charset="utf-8">
		<!-- viewport设置确保页面在移动设备上正确显示 -->
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
		<link type="text/css" rel="stylesheet" href="main.css">
	</head>
	<body>

		<!-- 页面信息显示区域 -->
		<div id="info">
			<a href="https://threejs.org" target="_blank" rel="noopener">Three.js</a> WebXR - 深度感应拖拽交互演示<br>
		</div>

		<!-- 模块导入映射配置 -->
		<!-- 这个配置告诉浏览器如何解析模块导入语句 -->
		<script type="importmap">
			{
				"imports": {
					"three": "../build/three.module.js",
					"three/addons/": "./jsm/"
				}
			}
		</script>

		<script type="module">
			// =============== 模块导入区域 ===============
			// 导入Three.js核心库的所有功能，THREE是Three.js的全局命名空间
			import * as THREE from 'three';
			// 导入轨道控制器，用于桌面模式下的摄像机控制（鼠标拖拽旋转视角）
			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
			// 导入WebXR按钮组件，用于创建进入VR/AR模式的按钮
			import { XRButton } from 'three/addons/webxr/XRButton.js';
			// 导入XR控制器模型工厂，用于创建控制器的3D模型
			import { XRControllerModelFactory } from 'three/addons/webxr/XRControllerModelFactory.js';

			// =============== 全局变量声明区域 ===============
			// DOM元素引用
			let container;           // 主容器div，用于包裹Three.js的canvas元素
			
			// Three.js核心对象
			let camera;              // 摄像机：定义观察者的视角
			let scene;               // 场景：包含所有3D对象的容器
			let renderer;            // 渲染器：将3D场景渲染到2D画布上
			
			// XR控制器相关
			let controller1;         // 第一个XR控制器（左手或主手）
			let controller2;         // 第二个XR控制器（右手或副手）
			let controllerGrip1;     // 第一个控制器的握把部分（可见的3D模型）
			let controllerGrip2;     // 第二个控制器的握把部分（可见的3D模型）
			
			// 深度感应状态
			let isDepthSupplied = false;  // 标志位：深度纹理是否已经提供给着色器
			
			// 交互检测
			let raycaster;           // 光线投射器：用于检测控制器射线与物体的交点
			
			// 数据存储
			const intersected = [];  // 数组：存储当前被控制器射线相交的物体
			const tempMatrix = new THREE.Matrix4();  // 临时矩阵：用于避免重复创建矩阵对象，提高性能
			
			// 其他对象
			let controls;            // 轨道控制器实例（桌面模式使用）
			let group;               // 组对象：包含所有可交互的几何体，便于统一管理

			// =============== 主程序入口 ===============
			// 注意：这里先调用init()初始化，然后调用animate()开始动画循环
			// 这是因为Three.js需要先创建所有对象，然后才能开始渲染
			init();      // 初始化场景、摄像机、渲染器、物体等
			animate();   // 开始动画循环（渲染循环）

			// =============== 初始化函数 ===============
			function init() {
				// 1. 创建并添加容器元素
				container = document.createElement('div');
				document.body.appendChild(container);

				// 2. 创建场景
				// 场景是Three.js中所有3D对象的容器，类似于一个虚拟世界
				scene = new THREE.Scene();
				scene.background = new THREE.Color(0x808080);  // 设置场景背景色为中灰色
				
				// 3. 创建透视摄像机
				// 参数说明：视野角度(FOV), 宽高比, 近裁剪面, 远裁剪面
				// 近裁剪面0.1米，远裁剪面10米，这个范围外的物体不会被渲染
				camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 10);
				camera.position.set(0, 1.6, 3);  // 设置摄像机位置：X=0, Y=1.6（人眼高度）, Z=3（向后3米）
				
				// 4. 创建轨道控制器（仅用于桌面模式）
				// 允许用户用鼠标拖拽旋转视角，滚轮缩放
				controls = new OrbitControls(camera, container);
				controls.target.set(0, 1.6, 0);  // 设置控制器的目标点（看向的位置）
				controls.update();  // 立即更新控制器状态
				
				// 5. 创建地板
				// 地板是一个6x6的平面，使用阴影材质，可以接收阴影
				const floorGeometry = new THREE.PlaneGeometry(6, 6);
				const floorMaterial = new THREE.ShadowMaterial({
					opacity: 0.25,          // 阴影透明度
					blending: THREE.CustomBlending,  // 自定义混合模式
					transparent: false      // 材质不透明
				});
				const floor = new THREE.Mesh(floorGeometry, floorMaterial);
				floor.rotation.x = -Math.PI / 2;  // 将平面旋转90度，使其水平放置
				floor.receiveShadow = true;       // 启用接收阴影功能
				scene.add(floor);
				
				// 6. 添加照明系统
				// 6.1 添加半球光（环境光）
				// 参数：天空色，地面色，光照强度
				scene.add(new THREE.HemisphereLight(0xbcbcbc, 0xa5a5a5, 3));
				
				// 6.2 添加平行光（主光源）
				const light = new THREE.DirectionalLight(0xffffff, 3);
				light.position.set(0, 6, 0);  // 从正上方照射
				light.castShadow = true;      // 启用投射阴影
				// 设置阴影相机范围（形成一个6x6的阴影区域）
				light.shadow.camera.top = 3;
				light.shadow.camera.bottom = -3;
				light.shadow.camera.right = 3;
				light.shadow.camera.left = -3;
				light.shadow.mapSize.set(4096, 4096);  // 阴影贴图分辨率，越高阴影越清晰
				scene.add(light);
				
				// 7. 创建物体组
				// 组(Group)是一种特殊的Object3D，可以将多个物体作为一个整体管理
				group = new THREE.Group();
				scene.add(group);
				
				// 8. 定义几种基础几何体类型
				const geometries = [
					new THREE.BoxGeometry(0.2, 0.2, 0.2),           // 立方体：宽高深各0.2米
					new THREE.ConeGeometry(0.2, 0.2, 64),           // 圆锥体：底面半径0.2，高0.2，64个面
					new THREE.CylinderGeometry(0.2, 0.2, 0.2, 64),  // 圆柱体：底面半径0.2，高0.2，64个面
					new THREE.IcosahedronGeometry(0.2, 8),          // 二十面体：半径0.2，细分级别8
					new THREE.TorusGeometry(0.2, 0.04, 64, 32)      // 圆环体：半径0.2，管道半径0.04
				];
				
				// 9. 创建50个随机几何体
				for (let i = 0; i < 50; i++) {
					// 9.1 随机选择几何体类型
					const geometry = geometries[Math.floor(Math.random() * geometries.length)];
					
					// 9.2 创建自定义着色器材质
					// ShaderMaterial允许我们编写自己的GLSL着色器代码
					const material = new THREE.ShaderMaterial({
						// 顶点着色器：处理每个顶点的位置和属性
						vertexShader: /* glsl */`
							// 声明要传递给片元着色器的变量
							varying vec3 vNormal;  // 顶点法线（用于光照计算）
							varying vec2 vUv;      // UV坐标（可用于纹理映射）
							
							void main() {
								// 将法线从物体空间转换到视图空间
								// normalMatrix是模型视图矩阵的法线变换矩阵
								vNormal = normalize(normalMatrix * normal);
								
								// 传递UV坐标
								vUv = uv;
								
								// 计算顶点的最终裁剪空间位置
								// 这是顶点着色器必须完成的任务
								gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
							}
						`,
						
						// 片元着色器：处理每个像素的颜色
						fragmentShader: /* glsl */`
							// 材质属性统一变量（从JavaScript传入）
							uniform vec3 diffuseColor;   // 漫反射颜色
							uniform float roughness;     // 粗糙度（影响高光范围）
							uniform float metalness;     // 金属度（影响反射特性）
							uniform float emissive;      // 自发光强度
							
							// 从顶点着色器接收的变量
							varying vec3 vNormal;  // 插值后的法线
							varying vec2 vUv;      // 插值后的UV坐标
							
							// 深度感应相关统一变量
							uniform sampler2DArray depthColor;  // 深度纹理（2D数组纹理，包含左右眼）
							uniform float depthWidth;           // 深度纹理宽度（像素）
							uniform float depthHeight;          // 深度纹理高度（像素）
							
							// 工具宏：将值限制在0.0到1.0之间
							#define saturate(a) clamp(a, 0.0, 1.0)
							
							// 函数：从深度纹理获取摄像机深度（单位：米）
							// 参数：深度纹理，UV坐标，纹理数组索引（0=左眼，1=右眼）
							// 返回：深度值（米）
							float Depth_GetCameraDepthInMeters(const sampler2DArray depthTexture,
									const vec2 depthUv, int arrayIndex) {
								// 从深度纹理的红色通道读取深度值
								return texture(depthTexture, vec3(depthUv.x, depthUv.y, arrayIndex)).r;
							}
							
							// 函数：计算遮挡值（基于物体深度与深度纹理的比较）
							// 原理：如果深度纹理中的深度值比物体深度小，说明有物体遮挡
							float Depth_GetOcclusion(const sampler2DArray depthTexture, 
									const vec2 depthUv, float assetDepthM, int arrayIndex) {
								// 获取当前位置的深度纹理值
								float depthMm = Depth_GetCameraDepthInMeters(depthTexture, depthUv, arrayIndex);
								
								// 深度容差：每米0.001米（1毫米）
								// 这个值决定了遮挡的柔和程度
								const float kDepthTolerancePerM = 0.001;
								
								// 计算遮挡系数：
								// 1. (depthMm - assetDepthM)：深度差异
								// 2. 除以(kDepthTolerancePerM * assetDepthM)：根据距离调整容差
								// 3. 通过clamp确保结果在0.0-1.0之间
								return clamp(1.0 -
									0.5 * (depthMm - assetDepthM) /
										(kDepthTolerancePerM * assetDepthM) +
									0.5, 0.0, 1.0);
							}
							
							// 函数：获取UV周围模糊化的遮挡值（使用5x5卷积核）
							// 目的：使遮挡边缘更柔和，避免锯齿
							float Depth_GetBlurredOcclusionAroundUV(const sampler2DArray depthTexture, 
									const vec2 uv, float assetDepthM, int arrayIndex) {
								// 使用的5x5卷积核权重分布：
								// 0   4   7   4   0
								// 4   16  26  16  4
								// 7   26  41  26  7
								// 4   16  26  16  4
								// 0   4   7   4   0
								// 总权重：4*8 + 7*4 + 16*4 + 26*8 + 41 = 269
								const float kKernelTotalWeights = 269.0;
								float sum = 0.0;  // 加权和
								
								// 模糊量：决定采样点的间隔
								const float kOcclusionBlurAmount = 0.0005;
								vec2 blurriness = vec2(kOcclusionBlurAmount, kOcclusionBlurAmount);
								
								// 开始计算加权遮挡值
								float current = 0.0;
								
								// 权重为4的8个采样点（对角线方向）
								current += Depth_GetOcclusion(depthTexture, uv + vec2(-1.0, -2.0) * blurriness, assetDepthM, arrayIndex);
								current += Depth_GetOcclusion(depthTexture, uv + vec2(+1.0, -2.0) * blurriness, assetDepthM, arrayIndex);
								current += Depth_GetOcclusion(depthTexture, uv + vec2(-1.0, +2.0) * blurriness, assetDepthM, arrayIndex);
								current += Depth_GetOcclusion(depthTexture, uv + vec2(+1.0, +2.0) * blurriness, assetDepthM, arrayIndex);
								current += Depth_GetOcclusion(depthTexture, uv + vec2(-2.0, +1.0) * blurriness, assetDepthM, arrayIndex);
								current += Depth_GetOcclusion(depthTexture, uv + vec2(+2.0, +1.0) * blurriness, assetDepthM, arrayIndex);
								current += Depth_GetOcclusion(depthTexture, uv + vec2(-2.0, -1.0) * blurriness, assetDepthM, arrayIndex);
								current += Depth_GetOcclusion(depthTexture, uv + vec2(+2.0, -1.0) * blurriness, assetDepthM, arrayIndex);
								sum += current * 4.0;  // 应用权重4
								
								// 权重为7的4个采样点（水平和垂直方向）
								current = 0.0;
								current += Depth_GetOcclusion(depthTexture, uv + vec2(-2.0, -0.0) * blurriness, assetDepthM, arrayIndex);
								current += Depth_GetOcclusion(depthTexture, uv + vec2(+2.0, +0.0) * blurriness, assetDepthM, arrayIndex);
								current += Depth_GetOcclusion(depthTexture, uv + vec2(+0.0, +2.0) * blurriness, assetDepthM, arrayIndex);
								current += Depth_GetOcclusion(depthTexture, uv + vec2(-0.0, -2.0) * blurriness, assetDepthM, arrayIndex);
								sum += current * 7.0;  // 应用权重7
								
								// 权重为16的4个采样点（次对角线方向）
								current = 0.0;
								current += Depth_GetOcclusion(depthTexture, uv + vec2(-1.0, -1.0) * blurriness, assetDepthM, arrayIndex);
								current += Depth_GetOcclusion(depthTexture, uv + vec2(+1.0, -1.0) * blurriness, assetDepthM, arrayIndex);
								current += Depth_GetOcclusion(depthTexture, uv + vec2(-1.0, +1.0) * blurriness, assetDepthM, arrayIndex);
								current += Depth_GetOcclusion(depthTexture, uv + vec2(+1.0, +1.0) * blurriness, assetDepthM, arrayIndex);
								sum += current * 16.0;  // 应用权重16
								
								// 权重为26的4个采样点（十字方向）
								current = 0.0;
								current += Depth_GetOcclusion(depthTexture, uv + vec2(+0.0, +1.0) * blurriness, assetDepthM, arrayIndex);
								current += Depth_GetOcclusion(depthTexture, uv + vec2(-0.0, -1.0) * blurriness, assetDepthM, arrayIndex);
								current += Depth_GetOcclusion(depthTexture, uv + vec2(-1.0, -0.0) * blurriness, assetDepthM, arrayIndex);
								current += Depth_GetOcclusion(depthTexture, uv + vec2(+1.0, +0.0) * blurriness, assetDepthM, arrayIndex);
								sum += current * 26.0;  // 应用权重26
								
								// 中心点采样（权重41）
								sum += Depth_GetOcclusion(depthTexture, uv, assetDepthM, arrayIndex) * 41.0;
								
								// 返回加权平均值
								return sum / kKernelTotalWeights;
							}
							
							// 片元着色器主函数
							void main() {
								// 1. 基础光照计算
								// 重新规范化法线（因为插值可能改变长度）
								vec3 normal = normalize(vNormal);
								
								// 漫反射颜色
								vec3 diffuse = diffuseColor;
								
								// 计算镜面反射（简单的高光模型）
								// 假设视线方向是(0,0,1)，计算法线与视线方向的点积
								float specularIntensity = pow(max(dot(normal, normalize(vec3(0, 0, 1))), 0.0), 64.0);
								// 混合基础反射率0.04和漫反射颜色，根据金属度调整
								vec3 specular = vec3(specularIntensity) * mix(vec3(0.04), diffuse, metalness);
								
								// 组合基础颜色：漫反射 + 高光，再乘以自发光因子
								vec4 baseColor = vec4(diffuse * (1.0 - specular) + specular, 1.0) * (1.0 + emissive);
								gl_FragColor = baseColor;
								
								// 2. 深度感应效果（如果深度纹理可用）
								if (depthWidth > 0.0) {
									int arrayIndex = 0;   // 纹理数组索引，0=左眼，1=右眼
									vec2 depthUv;         // 深度纹理的UV坐标
									
									// 判断当前片段属于左眼还是右眼
									// 在立体渲染中，左右眼分别渲染到画布的不同区域
									if (gl_FragCoord.x >= depthWidth) {
										// 右眼区域：片段X坐标 >= 深度纹理宽度
										arrayIndex = 1;  // 使用右眼深度纹理
										// 计算右眼的UV坐标（需要减去左眼区域的宽度）
										depthUv = vec2((gl_FragCoord.x - depthWidth) / depthWidth, gl_FragCoord.y / depthHeight);
									} else {
										// 左眼区域
										arrayIndex = 0;  // 使用左眼深度纹理
										depthUv = vec2(gl_FragCoord.x / depthWidth, gl_FragCoord.y / depthHeight);
									}
									
									// 当前片段的深度值（来自深度缓冲区）
									float assetDepthM = gl_FragCoord.z;
									
									// 计算遮挡效果
									float occlusion = Depth_GetBlurredOcclusionAroundUV(depthColor, depthUv, assetDepthM, arrayIndex);
									
									// 获取深度纹理中的深度值
									float depthMm = Depth_GetCameraDepthInMeters(depthColor, depthUv, arrayIndex);
									
									// 3. 深度差异可视化（边缘高亮效果）
									// 计算当前物体深度与深度纹理深度的绝对差异
									float absDistance = abs(assetDepthM - depthMm);
									float v = 0.0025;  // 阈值：0.0025米（2.5毫米）
									// 将深度差异转换为0-1的值：差异越小，值越大
									absDistance = saturate(v - absDistance) / v;
									
									// 添加边缘高亮效果：蓝色更明显
									gl_FragColor.rgb += vec3(absDistance * 2.0,   // 红色分量
															 absDistance * 2.0,   // 绿色分量
															 absDistance * 12.0); // 蓝色分量（最强）
									
									// 4. 应用遮挡效果
									// 将当前颜色与黑色混合，混合系数为遮挡值*0.7
									// occlusion越大（遮挡越严重），颜色越接近黑色
									gl_FragColor = mix(gl_FragColor, vec4(0.0, 0.0, 0.0, 0.0), occlusion * 0.7);
								}
							}
						`,
						
						// 着色器统一变量（Uniforms）定义
						// 这些值可以从JavaScript代码中动态修改
						uniforms: {
							// 漫反射颜色：随机生成一个颜色
							diffuseColor: { value: new THREE.Color(Math.random() * 0xffffff) },
							roughness: { value: 0.7 },     // 粗糙度：0.7（比较粗糙）
							metalness: { value: 0.0 },     // 金属度：0.0（非金属）
							emissive: { value: 0.0 },      // 自发光强度：0.0（默认不发光）
							
							// 深度纹理参数（初始化为0，表示没有深度纹理）
							depthWidth: { value: 0.0 },    // 深度纹理宽度
							depthHeight: { value: 0.0 },   // 深度纹理高度
							depthColor: { value: new THREE.Texture() }  // 深度纹理对象
						}
					});
					
					// 9.3 使用几何体和材质创建网格对象
					const object = new THREE.Mesh(geometry, material);
					
					// 9.4 设置随机位置
					object.position.x = Math.random() * 4 - 2;  // X轴：-2到2米之间
					object.position.y = Math.random() * 2;      // Y轴：0到2米之间
					object.position.z = Math.random() * 4 - 2;  // Z轴：-2到2米之间
					
					// 9.5 设置随机旋转
					object.rotation.x = Math.random() * 2 * Math.PI;  // 绕X轴随机旋转
					object.rotation.y = Math.random() * 2 * Math.PI;  // 绕Y轴随机旋转
					object.rotation.z = Math.random() * 2 * Math.PI;  // 绕Z轴随机旋转
					
					// 9.6 设置随机缩放
					object.scale.setScalar(Math.random() + 0.5);  // 缩放因子：0.5到1.5之间
					
					// 9.7 启用阴影
					object.castShadow = true;    // 物体投射阴影
					object.receiveShadow = true; // 物体接收阴影
					
					// 9.8 将物体添加到组中
					group.add(object);
				}
				
				// 10. 创建WebGL渲染器
				renderer = new THREE.WebGLRenderer({
					antialias: true  // 启用抗锯齿，使边缘更平滑
				});
				renderer.setPixelRatio(window.devicePixelRatio);  // 设置设备像素比（适配高DPI屏幕）
				renderer.setSize(window.innerWidth, window.innerHeight);  // 设置渲染器尺寸为全屏
				renderer.shadowMap.enabled = true;   // 启用阴影映射
				renderer.shadowMap.type = THREE.PCFSoftShadowMap;  // 使用PCF软阴影（边缘更柔和）
				renderer.xr.enabled = true;          // 启用WebXR支持
				container.appendChild(renderer.domElement);  // 将canvas元素添加到容器
				
				// 11. 创建WebXR按钮
				// 这个按钮允许用户进入/退出VR/AR模式
				document.body.appendChild(XRButton.createButton(renderer, {
					'optionalFeatures': ['depth-sensing'],  // 请求深度感应功能（可选）
					'depthSensing': {
						'usagePreference': ['gpu-optimized'],  // 偏好GPU优化的深度数据
						'dataFormatPreference': []             // 数据格式偏好（空数组表示使用默认）
					}
				}));
				
				// 12. 设置XR控制器
				// 12.1 创建第一个控制器
				controller1 = renderer.xr.getController(0);  // 获取索引为0的控制器
				controller1.addEventListener('selectstart', onSelectStart);  // 选择开始事件（按下扳机）
				controller1.addEventListener('selectend', onSelectEnd);      // 选择结束事件（释放扳机）
				scene.add(controller1);  // 将控制器添加到场景
				
				// 12.2 创建第二个控制器
				controller2 = renderer.xr.getController(1);  // 获取索引为1的控制器
				controller2.addEventListener('selectstart', onSelectStart);
				controller2.addEventListener('selectend', onSelectEnd);
				scene.add(controller2);
				
				// 13. 创建控制器模型
				// 控制器模型是用户看到的3D手柄模型
				const controllerModelFactory = new XRControllerModelFactory();
				
				// 13.1 第一个控制器模型
				controllerGrip1 = renderer.xr.getControllerGrip(0);  // 获取控制器握把
				controllerGrip1.add(controllerModelFactory.createControllerModel(controllerGrip1));
				scene.add(controllerGrip1);
				
				// 13.2 第二个控制器模型
				controllerGrip2 = renderer.xr.getControllerGrip(1);
				controllerGrip2.add(controllerModelFactory.createControllerModel(controllerGrip2));
				scene.add(controllerGrip2);
				
				// 14. 创建控制器射线指示器
				// 射线是从控制器向前延伸的线，用于指示指向位置
				const lineGeometry = new THREE.BufferGeometry().setFromPoints([
					new THREE.Vector3(0, 0, 0),     // 起点：控制器位置
					new THREE.Vector3(0, 0, -1)     // 终点：向前1米
				]);
				
				// 创建射线对象（使用基础线材质）
				const line = new THREE.Line(lineGeometry);
				line.name = 'line';  // 设置名称，便于后续查找
				line.scale.z = 5;    // 设置初始长度为5米
				
				// 为两个控制器添加射线
				controller1.add(line.clone());  // 使用clone()创建独立的副本
				controller2.add(line.clone());
				
				// 15. 创建光线投射器
				// 用于检测射线与物体的交点
				raycaster = new THREE.Raycaster();
				
				// 16. 添加窗口大小变化监听器
				window.addEventListener('resize', onWindowResize);
				
				// 17. 初始化完成
				console.log('Three.js WebXR场景初始化完成');
				console.log('支持的功能：', {
					webgl: !!renderer.context,
					webxr: renderer.xr.enabled,
					depthSensing: renderer.xr.hasDepthSensing ? '可能支持' : '不支持'
				});
			}
			
			// =============== 窗口大小变化处理函数 ===============
			function onWindowResize() {
				// 1. 更新摄像机宽高比
				camera.aspect = window.innerWidth / window.innerHeight;
				
				// 2. 更新摄像机投影矩阵
				// 注意：更改摄像机参数后必须调用此方法
				camera.updateProjectionMatrix();
				
				// 3. 更新渲染器尺寸
				renderer.setSize(window.innerWidth, window.innerHeight);
				
				console.log('窗口大小已调整：', window.innerWidth, 'x', window.innerHeight);
			}
			
			// =============== 选择开始事件处理函数 ===============
			// 当用户按下控制器扳机键时触发
			function onSelectStart(event) {
				// 1. 获取触发事件的控制器
				const controller = event.target;
				
				// 2. 获取控制器射线与物体的交点
				const intersections = getIntersections(controller);
				
				// 3. 如果射线与物体相交
				if (intersections.length > 0) {
					// 3.1 获取第一个交点（最近的物体）
					const intersection = intersections[0];
					const object = intersection.object;  // 相交的物体
					
					// 3.2 高亮显示被选中的物体（设置自发光）
					object.material.uniforms.emissive.value = 1;
					
					// 3.3 将物体附加到控制器上（实现拖拽）
					// attach()方法将物体从当前父级移除，并添加到控制器下
					controller.attach(object);
					
					// 3.4 记录当前选中的物体
					controller.userData.selected = object;
					
					console.log('开始拖拽物体：', object.uuid);
				}
				
				// 4. 记录控制器的目标射线模式
				// 这个信息用于区分不同的XR交互模式
				controller.userData.targetRayMode = event.data.targetRayMode;
			}
			
			// =============== 选择结束事件处理函数 ===============
			// 当用户释放控制器扳机键时触发
			function onSelectEnd(event) {
				// 1. 获取触发事件的控制器
				const controller = event.target;
				
				// 2. 如果当前有选中的物体
				if (controller.userData.selected !== undefined) {
					// 2.1 获取选中的物体
					const object = controller.userData.selected;
					
					// 2.2 取消高亮（关闭自发光）
					object.material.uniforms.emissive.value = 0;
					
					// 2.3 将物体从控制器分离，重新添加到组中
					// 这样物体就不再跟随控制器移动
					group.attach(object);
					
					// 2.4 清除选中状态
					controller.userData.selected = undefined;
					
					console.log('结束拖拽物体：', object.uuid);
				}
			}
			
			// =============== 获取交点函数 ===============
			// 计算控制器射线与场景中物体的交点
			function getIntersections(controller) {
				// 1. 更新控制器的世界矩阵
				// 这是必要的，因为控制器的位置在每帧都可能改变
				controller.updateMatrixWorld();
				
				// 2. 从控制器世界矩阵中提取旋转部分
				// 我们只需要旋转信息来确定射线方向
				tempMatrix.identity().extractRotation(controller.matrixWorld);
				
				// 3. 设置光线投射器的起点（射线原点）
				// 起点是控制器的世界空间位置
				raycaster.ray.origin.setFromMatrixPosition(controller.matrixWorld);
				
				// 4. 设置光线投射器的方向
				// 初始方向是-Z方向（向前），然后应用控制器的旋转
				raycaster.ray.direction.set(0, 0, -1).applyMatrix4(tempMatrix);
				
				// 5. 执行相交测试
				// 检测射线与组中所有物体的交点
				// 第二个参数false表示不检查子物体的子物体
				return raycaster.intersectObjects(group.children, false);
			}
			
			// =============== 物体相交检测函数 ===============
			// 每帧调用，用于检测控制器射线是否指向物体（悬停效果）
			function intersectObjects(controller) {
				// 1. 检查是否为移动AR模式（屏幕点击）
				// 在移动AR中，通常不需要射线悬停效果
				if (controller.userData.targetRayMode === 'screen') return;
				
				// 2. 检查是否已经有选中的物体
				// 如果正在拖拽物体，不需要显示悬停效果
				if (controller.userData.selected !== undefined) return;
				
				// 3. 获取控制器的射线指示器
				const line = controller.getObjectByName('line');
				
				// 4. 获取控制器射线与物体的交点
				const intersections = getIntersections(controller);
				
				// 5. 如果有交点
				if (intersections.length > 0) {
					// 5.1 获取第一个交点
					const intersection = intersections[0];
					const object = intersection.object;
					
					// 5.2 高亮显示被指向的物体
					object.material.uniforms.emissive.value = 1;
					
					// 5.3 将物体添加到相交数组中（用于后续清理）
					intersected.push(object);
					
					// 5.4 调整射线长度到交点位置
					// 这样射线看起来就像"碰到"了物体
					line.scale.z = intersection.distance;
				} else {
					// 6. 如果没有交点，恢复射线的默认长度
					line.scale.z = 5;
				}
			}
			
			// =============== 清理相交状态函数 ===============
			// 每帧调用，清理上一帧的悬停状态
			function cleanIntersected() {
				// 循环处理所有上一帧被悬停的物体
				while (intersected.length) {
					// 从数组末尾取出物体（后进先出）
					const object = intersected.pop();
					
					// 取消物体的高亮状态
					// 注意：如果物体当前被选中，这里不会取消高亮
					object.material.uniforms.emissive.value = 0;
				}
			}
			
			// =============== 动画循环启动函数 ===============
			function animate() {
				// 设置动画循环
				// setAnimationLoop是Three.js推荐的动画循环方法
				// 它会自动处理VR模式下的渲染频率（通常90Hz或更高）
				renderer.setAnimationLoop(render);
				
				console.log('动画循环已启动');
			}
			
			// =============== 渲染函数 ===============
			// 这是每一帧都会调用的核心函数
			function render() {
				// 1. 深度纹理处理
				// 检查是否支持深度感应并且深度纹理尚未提供
				if (renderer.xr.hasDepthSensing() && !isDepthSupplied) {
					// 如果支持深度感应，将深度纹理传递给所有物体的着色器
					group.children.forEach(child => {
						// 从WebXR会话获取深度纹理
						child.material.uniforms.depthColor.value = renderer.xr.getDepthTexture();
						
						// 设置深度纹理尺寸
						// 注意：这里使用了硬编码的尺寸，实际应该从深度纹理获取
						child.material.uniforms.depthWidth.value = 1680;   // 宽度
						child.material.uniforms.depthHeight.value = 1760;  // 高度
						
						// 标记深度纹理已提供
						isDepthSupplied = true;
					});
					
					console.log('深度纹理已应用到所有物体');
				} else if (!renderer.xr.hasDepthSensing() && isDepthSupplied) {
					// 如果之前提供了深度纹理但现在不支持了，清除深度纹理
					group.children.forEach(child => {
						// 将尺寸设置为0，片元着色器会跳过深度处理
						child.material.uniforms.depthWidth.value = 0;
						child.material.uniforms.depthHeight.value = 0;
						
						// 标记深度纹理已清除
						isDepthSupplied = false;
					});
					
					console.log('深度纹理已清除（深度感应不可用）');
				}
				
				// 2. 清理上一帧的悬停状态
				cleanIntersected();
				
				// 3. 检测控制器与物体的悬停交互
				intersectObjects(controller1);
				intersectObjects(controller2);
				
				// 4. 更新轨道控制器（仅桌面模式有效）
				// 在XR模式下，controls会自动禁用
				controls.update();
				
				// 5. 渲染场景
				// 这是Three.js的核心渲染调用
				// 在XR模式下，这会渲染左右眼两个视图
				// 在桌面模式下，渲染单个视图
				renderer.render(scene, camera);
				
				// 注意：在VR模式下，这个函数会被以90Hz或更高的频率调用
				// 在桌面模式下，通常是60Hz
			}
		</script>
	</body>
</html>