<!-- Three.js WebGPU 变形目标演示代码分析
🎯 核心功能概述
这是一个基于Three.js WebGPU渲染器的变形目标（Morph Targets）技术演示，展示了如何通过实时调整顶点位置在多个预定义形状之间进行平滑过渡。

主要功能演示：
立方体到球体的变形 - 通过数学公式将立方体顶点映射到球面

立方体的螺旋扭曲 - 基于顶点X坐标值进行不同程度的旋转扭曲

实时交互控制 - 通过GUI滑块独立控制两种变形效果的程度

3D场景交互 - 支持鼠标/触摸旋转视角查看不同角度

🛠 核心技术点详解
1. WebGPU渲染技术
javascript
// 使用下一代图形API WebGPU
const renderer = new THREE.WebGPURenderer({ antialias: true });
WebGPU vs WebGL：WebGPU提供更底层的GPU访问，更好的并行处理能力

性能优势：相比WebGL有显著的性能提升，特别是复杂场景

现代特性：支持最新的GPU特性，如计算着色器

2. 变形目标（Morph Targets）技术
javascript
// 创建变形目标属性
geometry.morphAttributes.position = [];

// 添加变形目标数据
geometry.morphAttributes.position[0] = new THREE.Float32BufferAttribute(spherePositions, 3);
技术原理：
基础概念：存储多个"目标形状"的顶点位置数据

插值计算：运行时根据权重在基础形状和目标形状之间插值

数学公式：

javascript
// 立方体到球体的映射公式
x' = x * √(1 - y²/2 - z²/2 + y²z²/3)
y' = y * √(1 - z²/2 - x²/2 + z²x²/3)
z' = z * √(1 - x²/2 - y²/2 + x²y²/3)

// 扭曲变形公式（绕X轴旋转）
vertex.applyAxisAngle(direction, Math.PI * x / 2)
3. 几何体细分策略
javascript
// 高度细分的立方体（32x32x32个细分面）
const geometry = new THREE.BoxGeometry(2, 2, 2, 32, 32, 32);
细分目的：更多的顶点数 = 更平滑的变形效果

性能权衡：顶点数从标准立方体的8个增加到数千个

视觉效果：实现从棱角分明到完全平滑的过渡

4. 实时权重控制系统
javascript
// 通过GUI控制变形权重
mesh.morphTargetInfluences[0] = value; // 球化权重
mesh.morphTargetInfluences[1] = value; // 扭曲权重
独立控制：两种变形效果可以独立调整

权重叠加：支持同时应用多个变形目标

实时反馈：无需重新渲染，立即看到效果变化

5. 场景构建架构
text
场景结构：
├── 场景(Scene)
│   ├── 环境光(AmbientLight)
│   ├── 相机(Camera)
│   │   └── 点光源(PointLight)
│   └── 网格(Mesh)
│       ├── 几何体(Geometry)
│       │   ├── 原始顶点位置
│       │   ├── 球体变形目标[0]
│       │   └── 扭曲变形目标[1]
│       └── 材质(Material)
🔧 关键代码模块解析
1. 初始化模块 (init())
创建完整的3D场景架构

设置相机和视角参数

配置光照系统

初始化渲染器和控制器

2. 几何体创建模块 (createGeometry())
javascript
function createGeometry() {
    // 1. 创建基础几何体
    // 2. 计算第一个变形目标：球体映射
    // 3. 计算第二个变形目标：螺旋扭曲
    // 4. 封装为BufferAttribute
}
数据处理：将数学计算结果转换为Three.js可用的格式

内存优化：使用Float32BufferAttribute提高性能

顶点遍历：对每个顶点应用变换公式

3. 用户交互模块 (initGUI())
调试器集成：Three.js Inspector工具

参数绑定：将GUI控件与变形权重连接

实时更新：onChange回调确保即时反馈

4. 响应式设计模块 (onWindowResize())
自适应窗口大小变化

保持正确的宽高比

更新投影矩阵

🎨 视觉效果特点
1. 材质和光照
Phong材质：提供光滑表面效果

平面着色(Flat Shading)：强调几何形状而非平滑渐变

双光源系统：

环境光：均匀的基础照明

点光源：跟随相机，提供动态高光

2. 颜色方案
背景：浅蓝色(0x8FBCD4)

物体：亮红色(0xff0000)

灯光：白色，高强度

📊 技术实现流程
text
创建基础几何体
    ↓
计算变形目标数据
    ↓
创建材质和网格
    ↓
设置场景和相机
    ↓
初始化渲染器
    ↓
添加用户控制
    ↓
启动渲染循环
🔍 学习价值
1. Three.js进阶概念
变形目标的实现和使用

WebGPU渲染器的配置

自定义几何体创建

实时参数控制

2. 图形学知识
顶点变换算法

形状插值原理

3D坐标系统

光照和材质交互

3. Web开发技术
ES6模块系统

Import Maps配置

响应式设计

性能优化策略

⚡ 性能考虑
顶点数量：32x32x32细分产生大量顶点，影响性能

实时计算：变形计算在CPU端完成，GPU负责插值渲染

WebGPU优势：相比WebGL能更好地处理大量顶点数据

内存使用：每个变形目标都需要存储完整的顶点位置数据

🚀 扩展可能性
更多变形目标：添加额外的形状变换

动画序列：自动过渡而不是手动控制

法线变形：添加表面法线的变形目标

复杂几何体：应用到更复杂的3D模型

物理模拟：结合物理引擎实现动态变形 -->


<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<!-- 
			页面标题
			three.js WebGPU - 变形目标演示
			变形目标（Morph Targets）也称为混合形状（Blend Shapes），是3D动画中常用的一种技术，
			它通过在多个预定义形状之间进行插值来实现平滑的形状变换。
		-->
		<title>three.js WebGPU - 变形目标演示</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样式表
			example.css 可能包含页面布局和样式定义
		-->
		<link type="text/css" rel="stylesheet" href="example.css">
	</head>

	<body>
		<!-- 
			3D场景渲染容器
			这是Three.js渲染器输出的画布元素将插入的位置
		-->
		<div id="container"></div>

		<!-- 
			信息展示区域 - 已替换为中文内容
			这个区域展示项目标题、链接和描述信息
		-->
		<div id="info">
			<!-- 
				Three.js官方网站链接
				target="_blank": 在新标签页打开链接
				rel="noopener": 安全特性，防止新页面访问原始页面的window对象
				class="logo-link": 可能包含Three.js的logo样式
			-->
			<a href="https://threejs.org/" target="_blank" rel="noopener" class="logo-link"></a>

			<div class="title-wrapper">
				<!-- 主标题链接 -->
				<a href="https://threejs.org/" target="_blank" rel="noopener">three.js</a>
				<!-- 副标题 -->
				<span>变形目标演示</span>
			</div>

			<small>
				<!-- 项目描述 -->
				这是一个使用简单几何体展示变形目标/混合形状技术的示例。
				通过调整下方的滑块，您可以观察立方体如何平滑地变形为球体或扭曲形状。
			</small>
		</div>

		<!-- 
			导入映射（Import Map）配置
			这是现代JavaScript模块系统的一部分，用于将模块标识符映射到实际URL
			在支持import maps的浏览器中，可以更方便地管理模块依赖
		-->
		<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 WebGPU版本的所有导出
			// WebGPU是新一代图形API，相比WebGL有更好的性能和功能
			import * as THREE from 'three/webgpu';

			// 导入调试器/检查器
			// Inspector提供了一个可视化界面，用于检查和调试Three.js场景
			import { Inspector } from 'three/addons/inspector/Inspector.js';

			// 导入轨道控制器
			// OrbitControls允许用户通过鼠标/触摸屏旋转、平移和缩放相机
			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

			// ============================================
			// 全局变量声明
			// ============================================
			
			// container: 3D场景的DOM容器
			// camera: 场景相机，决定观看视角
			// scene: 3D场景，包含所有对象（网格、灯光等）
			// renderer: 渲染器，负责将3D场景绘制到2D画布
			// mesh: 主要网格对象，即我们要变形的立方体
			let container, camera, scene, renderer, mesh;

			// 立即调用初始化函数
			// 这是程序的入口点
			init();

			/**
			 * 初始化函数 - Three.js应用的启动点
			 * 这个函数负责创建所有必要的Three.js对象并设置场景
			 * 函数流程：
			 * 1. 获取DOM容器
			 * 2. 创建场景和相机
			 * 3. 添加灯光
			 * 4. 创建几何体和材质
			 * 5. 创建渲染器
			 * 6. 设置事件监听器
			 * 7. 初始化GUI控制面板
			 */
			function init() {

				// ----------------------------------------------------
				// 1. DOM元素获取
				// ----------------------------------------------------
				
				// 获取页面上id为"container"的DOM元素
				// 后续渲染器的画布将添加到这个元素中
				container = document.getElementById( 'container' );

				// ----------------------------------------------------
				// 2. 场景和相机设置
				// ----------------------------------------------------
				
				// 创建3D场景对象
				// 场景是所有3D对象的容器，类似一个虚拟的舞台
				scene = new THREE.Scene();
				
				// 设置场景背景颜色
				// 0x8FBCD4 是一个浅蓝色，十六进制颜色值
				scene.background = new THREE.Color( 0x8FBCD4 );

				// 创建透视相机
				// 参数说明：
				// 45 - 视野角度(FOV)，单位是度，越大看到的范围越广
				// window.innerWidth / window.innerHeight - 宽高比
				// 1 - 近裁剪面，比这个距离近的对象不会被渲染
				// 20 - 远裁剪面，比这个距离远的对象不会被渲染
				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 20 );
				
				// 设置相机位置
				// z轴正方向是屏幕外（指向用户），负方向是屏幕内
				// z=10 表示相机在z轴上距离原点10个单位
				camera.position.z = 10;
				
				// 将相机添加到场景中
				// 相机也是场景中的一个对象，但通常不直接渲染
				scene.add( camera );

				// ----------------------------------------------------
				// 3. 灯光设置
				// ----------------------------------------------------
				
				// 添加环境光
				// 环境光提供均匀的照明，没有方向性，不会产生阴影
				// 参数：颜色(0x8FBCD4)，强度(1.5)
				scene.add( new THREE.AmbientLight( 0x8FBCD4, 1.5 ) );

				// 创建点光源
				// 点光源从一个点向所有方向发射光线，类似灯泡
				// 参数：颜色(白色)，强度(200)
				const pointLight = new THREE.PointLight( 0xffffff, 200 );
				
				// 将点光源添加到相机
				// 这样光源会随着相机移动，确保物体始终被照亮
				camera.add( pointLight );

				// ----------------------------------------------------
				// 4. 几何体和材质创建
				// ----------------------------------------------------
				
				// 调用自定义函数创建包含变形目标的几何体
				// 这个函数会创建一个细分立方体，并添加两个变形目标
				const geometry = createGeometry();

				// 创建Phong材质
				// Phong材质模拟光滑表面，支持高光反射
				// 参数对象：
				// color: 材质基础颜色 (红色 0xff0000)
				// flatShading: 平面着色，每个面都是单一颜色，不是平滑渐变
				const material = new THREE.MeshPhongMaterial( {
					color: 0xff0000,
					flatShading: true
				} );

				// 创建网格对象
				// 网格 = 几何体 + 材质，是实际可渲染的3D对象
				mesh = new THREE.Mesh( geometry, material );
				
				// 将网格添加到场景
				scene.add( mesh );

				// ----------------------------------------------------
				// 5. 渲染器设置
				// ----------------------------------------------------
				
				// 创建WebGPU渲染器
				// WebGPU是下一代图形API，相比WebGL性能更好
				// antialias: true 开启抗锯齿，使边缘更平滑
				renderer = new THREE.WebGPURenderer( { antialias: true } );
				
				// 附加调试器到渲染器
				// 按特定快捷键（通常是Ctrl+Shift+I）可以打开调试面板
				renderer.inspector = new Inspector();
				
				// 设置设备像素比
				// 在高DPI屏幕（如Retina显示屏）上，这可以确保清晰渲染
				renderer.setPixelRatio( window.devicePixelRatio );
				
				// 设置渲染器大小与窗口大小一致
				renderer.setSize( window.innerWidth, window.innerHeight );
				
				// 设置动画循环
				// 这是一个持续运行的循环，每帧都会调用一次
				// 在WebGPU中，使用setAnimationLoop替代requestAnimationFrame
				renderer.setAnimationLoop( function () {
					// 每帧执行一次渲染
					renderer.render( scene, camera );
				} );
				
				// 将渲染器的DOM元素（canvas画布）添加到容器中
				container.appendChild( renderer.domElement );

				// ----------------------------------------------------
				// 6. 控制器和事件监听
				// ----------------------------------------------------
				
				// 创建轨道控制器
				// 允许用户通过鼠标拖拽旋转视角
				// 参数：要控制的相机，事件监听的DOM元素
				const controls = new OrbitControls( camera, renderer.domElement );
				
				// 禁用缩放功能
				controls.enableZoom = false;

				// 添加窗口大小调整事件监听器
				// 当浏览器窗口大小改变时，调用onWindowResize函数
				window.addEventListener( 'resize', onWindowResize );

				// ----------------------------------------------------
				// 7. GUI初始化
				// ----------------------------------------------------
				
				// 初始化图形用户界面（控制面板）
				initGUI();

			}

			/**
			 * 创建包含变形目标的几何体
			 * 
			 * 变形目标技术原理：
			 * 1. 创建一个基础几何体（这里是立方体）
			 * 2. 定义多个"目标形状"（这里是球体和扭曲形状）
			 * 3. 每个顶点在基础形状和目标形状之间都有对应的位置
			 * 4. 通过权重系数在基础形状和目标形状之间插值
			 * 
			 * 技术细节：
			 * - morphAttributes: 存储变形目标数据的属性数组
			 * - 每个变形目标都是一个完整的顶点位置数组
			 * - morphTargetInfluences: 控制每个目标的影响系数（0-1）
			 * 
			 * @returns {THREE.BufferGeometry} 包含两个变形目标的几何体
			 */
			function createGeometry() {

				// 创建立方体几何体
				// 参数说明：
				// 2, 2, 2 - 立方体的宽度、高度、深度
				// 32, 32, 32 - 宽度、高度、深度方向的分段数
				// 分段数越高，立方体的面越多，变形效果越平滑
				const geometry = new THREE.BoxGeometry( 2, 2, 2, 32, 32, 32 );

				// 创建变形目标属性数组
				// geometry.morphAttributes 是一个对象，存储不同类型的变形属性
				// position 表示我们要变形的是顶点位置（还可以有normal法线等）
				geometry.morphAttributes.position = [];

				// 获取原始立方体的顶点位置属性
				// 这是变形的基础形状
				const positionAttribute = geometry.attributes.position;

				// ----------------------------------------------------
				// 第一个变形目标：将立方体顶点映射到球体表面
				// ----------------------------------------------------
				
				// 存储所有顶点在球体目标上的位置
				const spherePositions = [];

				// ----------------------------------------------------
				// 第二个变形目标：扭曲立方体顶点
				// ----------------------------------------------------
				
				// 存储所有顶点在扭曲目标上的位置
				const twistPositions = [];
				
				// 定义扭曲方向（绕X轴扭曲）
				const direction = new THREE.Vector3( 1, 0, 0 );
				
				// 临时向量，用于计算
				const vertex = new THREE.Vector3();

				// 遍历几何体的所有顶点
				// positionAttribute.count 是顶点总数
				for ( let i = 0; i < positionAttribute.count; i ++ ) {

					// 获取当前顶点的原始坐标
					const x = positionAttribute.getX( i );
					const y = positionAttribute.getY( i );
					const z = positionAttribute.getZ( i );

					// ----------------------------------------------------
					// 计算球体变形目标的位置
					// ----------------------------------------------------
					
					// 将立方体顶点映射到球体表面的公式
					// 这是一个数学变换，将立方体坐标转换为球体坐标
					// 公式来源：将立方体表面映射到单位球体的常用方法
					spherePositions.push(
						// x坐标变换
						x * Math.sqrt( 1 - ( y * y / 2 ) - ( z * z / 2 ) + ( y * y * z * z / 3 ) ),
						// y坐标变换
						y * Math.sqrt( 1 - ( z * z / 2 ) - ( x * x / 2 ) + ( z * z * x * x / 3 ) ),
						// z坐标变换
						z * Math.sqrt( 1 - ( x * x / 2 ) - ( y * y / 2 ) + ( x * x * y * y / 3 ) )
					);

					// ----------------------------------------------------
					// 计算扭曲变形目标的位置
					// ----------------------------------------------------
					
					// 沿X轴拉伸立方体（乘以2），这样扭曲效果更明显
					vertex.set( x * 2, y, z );

					// 应用扭曲变换
					// applyAxisAngle: 将顶点绕指定轴旋转指定角度
					// 参数：
					// direction - 旋转轴（X轴）
					// Math.PI * x / 2 - 旋转角度，与x坐标成正比
					// 这意味着立方体左侧（x为负）和右侧（x为正）会向相反方向扭曲
					vertex.applyAxisAngle( direction, Math.PI * x / 2 );
					
					// 将计算后的顶点位置添加到数组中
					// toArray方法将Vector3的三个分量存入数组
					vertex.toArray( twistPositions, twistPositions.length );

				}

				// ----------------------------------------------------
				// 将变形目标添加到几何体
				// ----------------------------------------------------
				
				// 创建第一个变形目标的BufferAttribute
				// Float32BufferAttribute: 存储32位浮点数的缓冲区属性
				// 参数：数据数组，每个顶点的分量数（position是x,y,z所以是3）
				geometry.morphAttributes.position[ 0 ] = new THREE.Float32BufferAttribute( spherePositions, 3 );

				// 创建第二个变形目标的BufferAttribute
				geometry.morphAttributes.position[ 1 ] = new THREE.Float32BufferAttribute( twistPositions, 3 );

				// 返回包含变形目标的几何体
				return geometry;

			}

			/**
			 * 初始化GUI控制面板
			 * 
			 * GUI（图形用户界面）允许用户实时调整参数
			 * 在这个示例中，我们创建了两个滑块来控制两个变形目标的影响系数
			 * 
			 * 技术原理：
			 * 每个变形目标都有一个影响系数（morphTargetInfluences）
			 * 系数范围是0到1：
			 * - 0: 完全不影响，保持原始形状
			 * - 1: 完全应用变形目标
			 * - 0.5: 原始形状和变形目标各占50%
			 * 
			 * 多个变形目标可以同时应用，效果会叠加
			 */
			function initGUI() {

				// 定义控制参数对象
				// 这些值将与GUI滑块绑定
				const params = {
					Spherify: 0, // 球化程度，控制第一个变形目标
					Twist: 0,    // 扭曲程度，控制第二个变形目标
				};

				// 通过调试器创建参数面板
				// 'Morph Targets' 是面板的标题
				const gui = renderer.inspector.createParameters( 'Morph Targets' );

				// ----------------------------------------------------
				// 创建"球化"控制滑块
				// ----------------------------------------------------
				
				// gui.add 创建滑块控件
				// 参数说明：
				// params, 'Spherify' - 要控制的对象和属性
				// 0, 1 - 滑块的最小值和最大值
				// 0.01 - 滑块的步进值
				gui.add( params, 'Spherify', 0, 1, 0.01 )
				   // onChange: 当滑块值改变时调用的回调函数
				   .onChange( function ( value ) {
						// 设置第一个变形目标的影响系数
						// mesh.morphTargetInfluences 是一个数组
						// 索引0对应第一个变形目标（球化）
						mesh.morphTargetInfluences[ 0 ] = value;
					} );
				
				// ----------------------------------------------------
				// 创建"扭曲"控制滑块
				// ----------------------------------------------------
				gui.add( params, 'Twist', 0, 1, 0.01 )
				   .onChange( function ( value ) {
						// 设置第二个变形目标的影响系数
						// 索引1对应第二个变形目标（扭曲）
						mesh.morphTargetInfluences[ 1 ] = value;
					} );

			}

			/**
			 * 窗口大小调整处理函数
			 * 
			 * 当浏览器窗口大小改变时，需要：
			 * 1. 更新相机的宽高比
			 * 2. 更新相机的投影矩阵
			 * 3. 更新渲染器的大小
			 * 
			 * 如果不做这些更新，3D场景可能会被拉伸或变形
			 */
			function onWindowResize() {

				// 更新相机的宽高比
				// 使用新的窗口宽高比
				camera.aspect = window.innerWidth / window.innerHeight;
				
				// 更新相机的投影矩阵
				// 当相机参数改变后，必须调用此方法使更改生效
				camera.updateProjectionMatrix();

				// 更新渲染器的尺寸，使其与窗口新尺寸匹配
				renderer.setSize( window.innerWidth, window.innerHeight );

			}

		</script>

	</body>
</html>