<!-- Three.js VR 过山车体验 - 代码功能与技术点分析
🎢 项目概述
这是一个基于Three.js构建的WebVR过山车模拟器，提供沉浸式的虚拟现实过山车体验。用户可以通过VR设备或普通浏览器体验在复杂3D轨道上运行的过山车，场景包含自然地形、树木、天空和动态游乐设施。

🎯 核心功能
1. VR沉浸式体验
支持WebXR API，兼容主流VR设备

第一人称视角过山车体验

头部追踪控制视角方向

2. 动态过山车模拟
基于参数化数学曲线的轨道系统

简化的物理引擎（重力加速度模拟）

自动速度调节（根据轨道坡度）

循环闭合轨道设计

3. 完整的3D场景
程序化生成的自然地形

基于地形分布的树木系统

动态旋转的游乐设施

天空穹顶环境

轨道阴影效果

4. 交互与视觉
响应式设计（适配不同屏幕尺寸）

平滑的动画系统（帧率独立）

优化渲染性能

直观的用户界面（VR入口按钮）

💻 主要技术点
1. Three.js渲染架构
javascript
// WebGPU优先，WebGL回退的渲染策略
const renderer = new THREE.WebGPURenderer({
    antialias: true,
    forceWebGL: true,  // 兼容性保障
    multiview: false
});
WebGPU渲染：下一代图形API，提供更好的性能和更低的CPU开销

自动回退机制：确保在不支持WebGPU的设备上使用WebGL

抗锯齿优化：提升视觉质量，减少边缘锯齿

2. WebXR集成
javascript
renderer.xr.enabled = true;
renderer.xr.setReferenceSpaceType('local');
document.body.appendChild(VRButton.createButton(renderer));
标准化VR支持：通过WebXR Device API连接VR设备

参考空间管理：'local'坐标系提供稳定的VR体验

一键式VR入口：符合W3C标准的VR会话启动

3. 程序化内容生成
地形生成算法
javascript
// 基于距离的高度衰减算法
const distance = (vertex.distanceTo(scene.position) / 5) - 25;
vertex.y = Math.random() * Math.max(0, distance);
随机地形：Perlin噪声风格的高度图

中心高边缘低：自然的地形过渡效果

顶点法线计算：动态更新法线确保光照正确

树木系统
基于地形分布：树木在合适的高度区域生成

顶点颜色渲染：减少draw call，优化性能

双面材质：确保从各个角度可见

4. 数学驱动的轨道系统
javascript
// 参数化曲线方程
const x = Math.sin(t * 3) * Math.cos(t * 4) * 50;
const y = Math.sin(t * 10) * 2 + Math.cos(t * 17) * 2 + 5;
const z = Math.sin(t) * Math.sin(t * 4) * 50;
三角函数组合：创建复杂的3D空间曲线

数值微分切线：计算运动方向向量

参数化设计：易于调整和扩展轨道形状

5. 物理模拟系统
javascript
// 简化的重力模型
velocity -= tangent.y * 0.0000001 * delta;
velocity = Math.max(0.00004, Math.min(0.0002, velocity));
帧率独立动画：基于时间增量而非帧数

能量守恒：下坡加速，上坡减速

速度限制：防止无限加速或停止

6. 相机与运动系统
javascript
// 相机跟随算法
train.lookAt(lookAt.copy(position).sub(tangent));
第一人称视角：相机绑定到火车对象

平滑朝向计算：看向运动方向前方

高度偏移：确保视角在轨道上方

7. 材质与光照系统
javascript
// 多层次材质应用
new THREE.MeshPhongMaterial({ vertexColors: true });  // 轨道
new THREE.MeshLambertMaterial({ color: 0x407000 });   // 地形
new THREE.MeshBasicMaterial({ transparent: true });   // 阴影
Phong材质：轨道的镜面高光效果

Lambert材质：地形的漫反射效果

透明阴影：深度写入禁用避免渲染冲突

半球光照：模拟自然天空光和地面反射

8. 性能优化策略
顶点颜色技术：减少材质切换和纹理加载

几何体复用：共享几何体数据减少内存占用

合理的细分级别：平衡视觉效果和渲染性能

对象池模式：避免重复创建销毁对象

9. 响应式设计
javascript
window.addEventListener('resize', onWindowResize);
function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
}
自适应视口：根据窗口大小调整渲染

相机投影更新：保持正确的透视比例

设备像素比适配：支持高DPI显示屏

🚀 技术架构亮点
模块化设计
使用ES6模块化导入导出

清晰的职责分离（渲染、动画、物理、UI）

可扩展的曲线和几何体系统

兼容性策略
WebGPU优先，WebGL回退的双重保障

渐进增强的VR支持

跨浏览器兼容性考虑

动画系统
基于requestAnimationFrame的高性能动画循环

帧率独立的物理计算

平滑的插值和过渡

内存管理
重用Vector3对象减少GC压力

合理的几何体细分控制内存使用

及时的资源清理

📊 渲染管线概览
text
场景加载 → 几何体生成 → 材质应用 → 光照计算
    ↓
动画循环 → 物理模拟 → 相机更新 → 渲染绘制
    ↓
VR会话 → 姿态追踪 → 双目渲染 → 显示输出 -->


<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<!-- 页面元信息 -->
		<title>Three.js VR 过山车体验</title>
		<!-- 字符编码设置为UTF-8以支持中文 -->
		<meta charset="utf-8">
		<!-- 移动端适配：设置视口宽度为设备宽度，初始缩放1.0，禁止用户手动缩放 -->
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
		<!-- 引入外部CSS样式表，用于页面基本样式 -->
		<link type="text/css" rel="stylesheet" href="main.css">
	</head>
	<body>
		<!-- 页面信息展示区域 -->
		<div id="info">
			<h1>Three.js VR 过山车体验</h1>
		</div>

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

		<!-- 主JavaScript模块：包含所有Three.js应用逻辑 -->
		<script type="module">
			// 导入Three.js的WebGPU版本
			// WebGPU是新一代图形API，提供更好的性能和更低的CPU开销
			// 如果浏览器不支持WebGPU，Three.js会自动回退到WebGL
			import * as THREE from 'three/webgpu';

			// 从Three.js附加组件中导入过山车示例所需的专用几何体类
			// 这些几何体类专门为过山车场景优化设计
			import {
				RollerCoasterGeometry,          // 过山车轨道几何体：定义轨道的3D形状和路径
				RollerCoasterShadowGeometry,    // 轨道阴影几何体：模拟轨道在地面上的投影
				RollerCoasterLiftersGeometry,   // 轨道支架几何体：支撑轨道的结构部件
				TreesGeometry,                  // 树木几何体：程序化生成的树木模型
				SkyGeometry                     // 天空几何体：环境天空穹顶
			} from 'three/addons/misc/RollerCoaster.js';
			// 导入VR按钮创建工具类，用于生成WebXR VR会话的入口按钮
			import { VRButton } from 'three/addons/webxr/VRButton.js';

			// 通用变量声明，用于在函数间共享场景对象
			let mesh;      // 3D网格对象：包含几何体和材质的可渲染对象
			let material;  // 材质对象：定义物体表面的外观特性（颜色、光泽度等）
			let geometry;  // 几何体对象：定义物体的形状和顶点数据

			// 创建WebGPU渲染器实例
			// 渲染器是Three.js的核心组件，负责将3D场景绘制到2D画布上
			const renderer = new THREE.WebGPURenderer({ 
				antialias: true,                // 启用抗锯齿：平滑边缘锯齿，提高视觉质量
				forceWebGL: true,               // 强制使用WebGL：如果WebGPU不可用则回退到WebGL
				outputBufferType: THREE.UnsignedByteType, // 输出缓冲区类型：无符号字节类型，标准颜色格式
				multiview: false                // 禁用多视图：对于某些VR设备优化，这里禁用
			});
			// 设置设备像素比：适配高DPI（视网膜）显示屏，防止画面模糊
			renderer.setPixelRatio(window.devicePixelRatio);
			// 设置渲染器尺寸为当前浏览器窗口的尺寸
			renderer.setSize(window.innerWidth, window.innerHeight);
			// 设置动画循环函数：浏览器每帧都会调用此函数进行渲染
			renderer.setAnimationLoop(animate);
			// 启用XR（扩展现实）功能：支持VR/AR设备
			renderer.xr.enabled = true;
			// 设置XR参考空间类型为'local'：相对于用户初始位置的坐标系
			// 其他选项：'local-floor'（包含地板高度）、'bounded-floor'（有限空间）等
			renderer.xr.setReferenceSpaceType('local');
			// 将渲染器的DOM元素（canvas画布）添加到网页body中
			document.body.appendChild(renderer.domElement);

			// 创建并添加VR按钮到页面
			// VRButton.createButton会生成一个符合WebXR标准的VR入口按钮
			// 点击按钮会启动VR会话，需要浏览器和硬件支持WebXR API
			document.body.appendChild(VRButton.createButton(renderer));

			// 创建场景对象：场景是所有3D对象的容器，相当于一个虚拟世界
			const scene = new THREE.Scene();
			// 设置场景背景色为浅蓝紫色（十六进制颜色代码：0xRRGGBB）
			scene.background = new THREE.Color(0xf0f0ff);

			// 创建半球光：模拟自然光照（天空光和地面反射光）
			// 参数：天空颜色，地面颜色，光照强度
			const light = new THREE.HemisphereLight(0xfff0f0, 0x60606, 3);
			// 设置光源位置：影响阴影方向
			light.position.set(1, 1, 1);
			// 将光源添加到场景中
			scene.add(light);

			// 创建火车对象：这是一个空的Object3D对象，用作相机和后续火车模型的容器
			// Object3D是Three.js中所有3D对象的基类，可以包含子对象和变换
			const train = new THREE.Object3D();
			scene.add(train);

			// 创建透视相机：模拟人眼视角的3D相机
			// 参数：视野角度（FOV）、宽高比、近裁剪面、远裁剪面
			const camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 500);
			// 将相机添加到火车对象中，这样相机会跟随火车一起运动
			train.add(camera);

			// ==================== 创建地形环境 ====================
			// 创建地形几何体：一个500x500单位的平面，划分为15x15个网格
			geometry = new THREE.PlaneGeometry(500, 500, 15, 15);
			// 将平面绕X轴旋转-90度，使平面从垂直变为水平（作为地面）
			geometry.rotateX(-Math.PI / 2);

			// 获取顶点位置属性数组：几何体的所有顶点坐标（x,y,z交替存储）
			const positions = geometry.attributes.position.array;
			// 创建临时向量对象，用于顶点计算
			const vertex = new THREE.Vector3();

			// 遍历所有顶点，为地形添加随机高度变化
			// 循环步长为3，因为每个顶点有x,y,z三个坐标值
			for (let i = 0; i < positions.length; i += 3) {
				// 从数组中读取第i个顶点的坐标到临时向量
				vertex.fromArray(positions, i);
				
				// 为x和z坐标添加随机偏移（-5到5之间），打破平面的规整性
				vertex.x += Math.random() * 10 - 5;
				vertex.z += Math.random() * 10 - 5;

				// 计算基于距离的高度衰减：离场景中心越远，高度越低
				// vertex.distanceTo(scene.position)计算顶点到场景中心(0,0,0)的距离
				// 公式：距离/5 - 25，产生中心高边缘低的自然地形效果
				const distance = (vertex.distanceTo(scene.position) / 5) - 25;
				// 设置顶点高度：随机值乘以距离因子，确保边缘高度为0或正值
				vertex.y = Math.random() * Math.max(0, distance);

				// 将修改后的顶点坐标写回数组
				vertex.toArray(positions, i);
			}

			// 重新计算顶点法线：法线是垂直于表面的向量，用于光照计算
			// 修改顶点位置后必须重新计算法线，否则光照会不正确
			geometry.computeVertexNormals();

			// 创建地形材质：使用Lambert材质（漫反射，无镜面高光）
			material = new THREE.MeshLambertMaterial({
				color: 0x407000  // 深绿色，模拟草地
			});

			// 创建地形网格对象：将几何体和材质组合成可渲染的网格
			mesh = new THREE.Mesh(geometry, material);
			// 将地形添加到场景中
			scene.add(mesh);

			// ==================== 创建树木 ====================
			// 使用TreesGeometry基于地形自动生成树木
			// TreesGeometry会在地形的合适位置（根据高度等条件）生成树木
			geometry = new TreesGeometry(mesh);
			// 树木使用BasicMaterial并启用顶点颜色
			// DoubleSide表示双面渲染（从两面都能看到树叶）
			material = new THREE.MeshBasicMaterial({
				side: THREE.DoubleSide,  // 双面渲染：树木从各个角度都应可见
				vertexColors: true       // 使用顶点颜色：几何体顶点包含颜色信息
			});
			mesh = new THREE.Mesh(geometry, material);
			scene.add(mesh);

			// ==================== 创建天空 ====================
			// 创建天空几何体：通常是一个巨大的球体或半球体
			geometry = new SkyGeometry();
			material = new THREE.MeshBasicMaterial({ color: 0xffffff });  // 纯白色天空
			mesh = new THREE.Mesh(geometry, material);
			scene.add(mesh);

			// ==================== 创建过山车轨道 ====================
			// 定义数学常数：2π，用于角度计算
			const PI2 = Math.PI * 2;

			// 使用IIFE（立即执行函数表达式）创建过山车轨道曲线
			// 曲线定义了过山车在3D空间中的运动路径
			const curve = (function () {
				// 创建临时向量变量，避免在函数中重复创建对象
				const vector = new THREE.Vector3();   // 用于计算曲线点
				const vector2 = new THREE.Vector3();  // 用于计算切线

				// 返回曲线对象，包含获取点和切线的方法
				return {
					// 根据参数t（0-1）获取曲线上的点
					// t=0表示曲线起点，t=1表示曲线终点（回到起点，形成闭环）
					getPointAt: function (t) {
						// 将参数t映射到0-2π范围，用于三角函数计算
						t = t * PI2;

						// 使用三角函数组合创建复杂的3D空间曲线
						// 这种参数方程可以产生丰富多样的曲线形状
						const x = Math.sin(t * 3) * Math.cos(t * 4) * 50;  // x坐标：正弦和余弦函数乘积
						const y = Math.sin(t * 10) * 2 + Math.cos(t * 17) * 2 + 5; // y坐标：高度变化，多个频率叠加
						const z = Math.sin(t) * Math.sin(t * 4) * 50;      // z坐标：正弦函数乘积

						// 将计算结果存储到向量中并放大2倍，然后返回
						return vector.set(x, y, z).multiplyScalar(2);
					},

					// 根据参数t获取曲线在该点的切线方向（单位向量）
					// 切线方向用于确定过山车的朝向
					getTangentAt: function (t) {
						const delta = 0.0001;  // 微小增量，用于数值微分计算导数
						const t1 = Math.max(0, t - delta);  // t点前一点
						const t2 = Math.min(1, t + delta);  // t点后一点

						// 数值微分法计算切线：两点之间的方向向量
						// 公式：切线 = (P(t+Δt) - P(t-Δt)) / (2Δt)，然后归一化
						return vector2.copy(this.getPointAt(t2))
							.sub(this.getPointAt(t1)).normalize();  // normalize()将向量长度变为1
					}
				};
			}()) // 立即执行函数，立即返回曲线对象

			// 创建过山车轨道几何体：基于曲线生成1500段细分的轨道
			geometry = new RollerCoasterGeometry(curve, 1500);
			// 使用Phong材质：支持镜面高光，比Lambert材质更逼真
			material = new THREE.MeshPhongMaterial({
				vertexColors: true  // 使用顶点颜色：轨道不同部分可能有不同颜色
			});
			mesh = new THREE.Mesh(geometry, material);
			scene.add(mesh);

			// 创建轨道支架几何体：支撑轨道的结构
			geometry = new RollerCoasterLiftersGeometry(curve, 100);  // 100段细分，比轨道少
			material = new THREE.MeshPhongMaterial();  // 同样使用Phong材质
			mesh = new THREE.Mesh(geometry, material);
			mesh.position.y = 0.1;  // 稍微上移，避免与地面或阴影的z-fighting（深度冲突）
			scene.add(mesh);

			// 创建轨道阴影几何体：模拟轨道在地面上的投影
			geometry = new RollerCoasterShadowGeometry(curve, 500);
			// 使用BasicMaterial并启用透明效果
			material = new THREE.MeshBasicMaterial({
				color: 0x305000,       // 深绿色阴影
				depthWrite: false,     // 禁用深度写入：阴影不影响深度缓冲，防止渲染问题
				transparent: true      // 启用透明度：阴影通常是半透明的
			});
			mesh = new THREE.Mesh(geometry, material);
			mesh.position.y = 0.1;  // 稍微上移，与支架对齐
			scene.add(mesh);

			// 创建游乐场设施数组：存储所有旋转的装饰对象
			const funfairs = [];

			// ==================== 创建第一个游乐设施 ====================
			// 创建圆柱体几何体：上半径10，下半径10，高度5，侧面分段数15
			geometry = new THREE.CylinderGeometry(10, 10, 5, 15);
			material = new THREE.MeshLambertMaterial({
				color: 0xff8080  // 粉红色
			});
			mesh = new THREE.Mesh(geometry, material);
			// 设置设施位置：场景左后区域
			mesh.position.set(-80, 10, -70);
			// 旋转90度，使圆柱体平躺
			mesh.rotation.x = Math.PI / 2;
			scene.add(mesh);
			funfairs.push(mesh);  // 添加到设施数组，后续可以统一操作

			// ==================== 创建第二个游乐设施 ====================
			// 创建锥台几何体：上半径5，下半径6，高度4，侧面分段数10
			geometry = new THREE.CylinderGeometry(5, 6, 4, 10);
			material = new THREE.MeshLambertMaterial({
				color: 0x8080ff  // 蓝色
			});
			mesh = new THREE.Mesh(geometry, material);
			// 设置设施位置：场景右前区域
			mesh.position.set(50, 2, 30);
			scene.add(mesh);
			funfairs.push(mesh);  // 添加到设施数组

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

			// 窗口大小变化处理函数
			function onWindowResize() {
				// 更新相机宽高比：相机需要知道渲染区域的比例
				camera.aspect = window.innerWidth / window.innerHeight;
				// 更新投影矩阵：相机内部参数变化后必须调用此方法
				camera.updateProjectionMatrix();

				// 更新渲染器大小：确保渲染画布与窗口大小一致
				renderer.setSize(window.innerWidth, window.innerHeight);
			}

			// ==================== 动画和物理模拟变量 ====================
			// 创建向量对象，用于动画计算（避免在动画循环中重复创建）
			const position = new THREE.Vector3();  // 过山车当前位置
			const tangent = new THREE.Vector3();   // 当前位置的切线方向
			const lookAt = new THREE.Vector3();    // 相机看向的目标点

			// 运动状态变量
			let velocity = 0;     // 过山车当前速度（沿曲线的参数变化率）
			let progress = 0;     // 在曲线上的进度（0-1，表示在曲线上的位置比例）
			let prevTime = performance.now();  // 上一帧的时间戳（毫秒）

			// ==================== 主动画循环函数 ====================
			// 此函数由renderer.setAnimationLoop设置，每帧自动调用
			function animate() {
				// 获取当前时间戳（页面加载以来的毫秒数）
				const time = performance.now();
				// 计算时间增量：距离上一帧过去的时间（毫秒）
				// 用于实现帧率独立的动画（与帧率无关的运动）
				const delta = time - prevTime;

				// 更新所有游乐场设施的旋转
				// 使设施随时间缓慢旋转，增加场景活力
				for (let i = 0; i < funfairs.length; i++) {
					// 绕Y轴旋转，速度与时间相关（每毫秒0.0004弧度）
					funfairs[i].rotation.y = time * 0.0004;
				}

				// ========== 过山车物理模拟 ==========
				// 更新进度：根据速度和时间增量向前移动
				progress += velocity;
				// 取模运算确保进度保持在0-1范围内，实现循环轨道
				progress = progress % 1;

				// 从曲线获取当前位置
				position.copy(curve.getPointAt(progress));
				// 稍微抬升位置，使相机（火车）在轨道上方运行，而不是在轨道中心
				position.y += 0.3;

				// 更新火车（包含相机）的位置
				train.position.copy(position);

				// 获取当前点的切线方向（轨道的方向）
				tangent.copy(curve.getTangentAt(progress));

				// 模拟简单的重力加速度效果：
				// 当下坡时（切线y分量为负），速度增加
				// 当上坡时（切线y分量为正），速度减少
				// 系数0.0000001控制重力强度，delta确保帧率独立
				velocity -= tangent.y * 0.0000001 * delta;
				
				// 限制速度在最小值和最大值之间
				// 防止过山车停止或过快
				velocity = Math.max(0.00004, Math.min(0.0002, velocity));

				// 设置火车（相机）的朝向
				// 火车应该看向运动方向的前方
				// lookAt = position - tangent：看向切线反方向的前方
				train.lookAt(lookAt.copy(position).sub(tangent));

				// ========== 渲染场景 ==========
				// 调用渲染器的render方法，将3D场景绘制到2D画布上
				// 参数：要渲染的场景，使用的相机
				renderer.render(scene, camera);

				// 保存当前时间，用于下一帧的时间增量计算
				prevTime = time;
			}
		</script>
	</body>
</html>