<!-- Three.js 3D动态文本动画 - 功能描述和技术点分析
🎯 核心功能概述
这是一个基于Three.js创建的动态3D文本动画，显示旋转的"three.js"字样，具有以下视觉效果：

1. 主要视觉效果
彩虹色渐变文字：文本每个顶点都有独特的HSL颜色，形成彩虹渐变效果

呼吸波动效果：文本顶点随时间进行正弦波动的位移

缓慢旋转：文本绕Y轴持续缓慢旋转

动态颜色变换：整体颜色在HSL色彩空间中缓慢偏移

随机粒子扰动：每个顶点都有微小的随机位移，产生类似粒子系统的动态效果

发光/光晕效果：通过加法混合模式实现明亮的发光效果

2. 用户交互
自适应窗口：自动调整到浏览器窗口大小

响应式设计：支持不同分辨率和设备像素比

实时性能监控：显示帧率(FPS)等性能指标

🔧 主要技术点详解
1. Three.js核心架构
场景图结构：Scene → Camera → Mesh(Text) → Geometry + Material

WebGL渲染器：利用硬件加速的3D渲染

模块化导入：使用ES6模块系统管理依赖

2. 自定义着色器系统
javascript
// 关键技术：ShaderMaterial + 自定义GLSL
const shaderMaterial = new THREE.ShaderMaterial({
    uniforms: uniforms,  // CPU→GPU的全局变量
    vertexShader: ...,   // 顶点处理程序
    fragmentShader: ..., // 像素着色程序
    blending: THREE.AdditiveBlending,  // 特殊混合模式
});
3. 顶点属性与缓冲区
几何体数据：TextGeometry生成的3D文字网格

自定义顶点属性：

displacement：每个顶点的位移向量

customColor：每个顶点的RGB颜色

缓冲区管理：使用Float32BufferAttribute高效存储

4. 动画系统设计
javascript
// 四层动画叠加：
1. 旋转动画：line.rotation.y = 0.25 * time
2. 振幅动画：Math.sin(0.5 * time)
3. 颜色动画：color.offsetHSL(0.0005, 0, 0)
4. 随机扰动：array[i] += 0.3 * (0.5 - Math.random())
5. 性能优化技术
增量属性更新：只更新需要修改的缓冲区属性

设备像素比适配：renderer.setPixelRatio(window.devicePixelRatio)

抗锯齿渲染：{ antialias: true }

深度测试优化：禁用深度测试避免线条闪烁

6. 渲染管线流程
text
1. 数据准备
   ├─ 加载字体文件(JSON)
   ├─ 创建3D文本几何体
   └─ 添加自定义属性(位移、颜色)

2. 着色器处理(每帧)
   ├─ 顶点着色器阶段
   │   ├─ 计算位移：position + amplitude * displacement
   │   └─ 传递颜色：vColor = customColor
   │
   └─ 片段着色器阶段
       └─ 最终颜色：vColor * uniformColor

3. 渲染输出
   └─ WebGL绘制到Canvas
7. 内存与GPU管理
缓冲区重用：复用几何体的顶点缓冲区

属性标记更新：needsUpdate = true机制

统一变量传递：uniforms作为CPU与GPU的桥梁

🎨 视觉技术细节
颜色系统
HSL色彩空间：使用色相(H)、饱和度(S)、亮度(L)模型

彩虹渐变：color.setHSL(i / l, 0.5, 0.5)基于顶点索引

动态偏移：offsetHSL随时间缓慢改变整体色相

位移效果
javascript
// 位移合成公式
新位置 = 原始位置 + 
         振幅 × 位移向量 + 
         随机扰动 × 时间累积
混合模式
加法混合(Additive Blending)：新颜色 = 源颜色 + 目标颜色

视觉效果：产生发光、明亮的效果，适合粒子系统和光效

透明度控制：统一控制整体透明度(0.3)

📊 性能监控与调试
Stats.js集成
FPS显示：实时帧率监控

MS显示：每帧渲染时间(毫秒)

MB显示：内存使用情况

渲染优化
三角形数量：由TextGeometry参数控制(曲线分段、斜面分段)

顶点数量：字体复杂度和几何参数决定

着色器复杂度：简单的向量运算，GPU友好

🔄 响应式与兼容性
跨平台适配
视口设置：移动端禁用缩放，确保3D场景正确显示

窗口大小监听：实时调整相机和渲染器

高清屏支持：自动适配Retina等高DPI显示屏

资源加载
字体异步加载：JSON格式的字体文件

错误处理：加载失败时的处理机制(示例中未实现但可扩展)

进度反馈：可添加加载进度显示

💡 技术亮点总结
完全自定义渲染管线：从几何体到着色器的完整控制

GPU高效计算：将动画计算卸载到着色器中

多图层动画合成：旋转+波动+颜色+扰动的复合效果

实时动态修改：JavaScript与GLSL的紧密配合

性能与效果的平衡：在视觉效果和渲染性能之间取得良好平衡 -->


<!DOCTYPE html>
<html lang="zh-CN"> <!-- 设置语言为中文 -->
<head>
    <!-- 页面标题：描述这是一个基于three.js的WebGL自定义属性线条动画示例 -->
    <title>Three.js WebGL 示例 - 自定义属性线条动画</title>
    
    <!-- 字符编码设置为UTF-8，支持中文字符和其他多语言字符显示 -->
    <meta charset="utf-8">
    
    <!-- 
        视口（viewport）设置：
        width=device-width - 宽度等于设备宽度
        user-scalable=no - 禁止用户手动缩放页面
        minimum-scale=1.0 - 最小缩放比例为1.0（不缩小）
        maximum-scale=1.0 - 最大缩放比例为1.0（不放大）
        这个设置主要用于移动端适配，确保3D场景在不同设备上正确显示
    -->
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    
    <!-- 
        引入外部CSS样式表文件：
        type="text/css" - 指定文件类型为CSS
        rel="stylesheet" - 定义文档与链接资源的关系为样式表
        href="main.css" - 样式表文件的路径
    -->
    <link type="text/css" rel="stylesheet" href="main.css">
</head>

<body>
    <!-- 
        信息显示区域：
        显示技术信息和链接，中文描述这是一个Three.js自定义属性线条动画示例
        id="info" - 为这个div元素指定ID，可用于CSS样式和JavaScript操作
    -->
    <div id="info">
        <a href="https://threejs.org" target="_blank" rel="noopener">Three.js</a> 
        - 自定义属性线条动画示例 - 动态彩色3D文字效果
    </div>
    
    <!-- 
        主要容器：
        用于承载WebGL渲染器生成的画布（canvas）元素
        id="container" - 为这个div元素指定ID，后续会将Three.js的渲染器dom元素添加到这里
    -->
    <div id="container"></div>

    <!-- 
        顶点着色器（Vertex Shader）脚本：
        type="x-shader/x-vertex" - 自定义类型标识，表示这是顶点着色器代码
        id="vertexshader" - 指定ID，便于JavaScript代码获取着色器文本内容
        顶点着色器在GPU上运行，处理每个顶点（vertex）的位置计算
    -->
    <script type="x-shader/x-vertex" id="vertexshader">
        // ========== 顶点着色器代码开始 ==========
        
        // uniform变量：振幅（amplitude），由CPU传递到GPU，所有顶点共享同一个值
        // float表示单精度浮点数，amplitude用于控制位移的强度
        uniform float amplitude;

        // attribute变量：每个顶点特有的数据，从顶点缓冲区读取
        // vec3 displacement: 三维位移向量，定义每个顶点在x、y、z方向上的偏移
        // vec3 customColor: 三维颜色向量，定义每个顶点的RGB颜色值
        attribute vec3 displacement;
        attribute vec3 customColor;

        // varying变量：在顶点着色器和片段着色器之间传递数据
        // vColor: 顶点颜色，计算后传递给片段着色器进行插值
        varying vec3 vColor;

        // main函数：顶点着色器的主函数，对每个顶点执行一次
        void main() {
            // 计算新的顶点位置：
            // position是内置变量，表示顶点的原始位置（由几何体定义）
            // 新位置 = 原始位置 + 振幅 × 位移向量
            // 这种计算方式可以让顶点产生动态的位移效果
            vec3 newPosition = position + amplitude * displacement;

            // 将自定义颜色赋值给varying变量，传递给片段着色器
            // 在光栅化过程中，GPU会在三角形内部对vColor进行插值
            vColor = customColor;

            // 计算最终的裁剪空间位置（clip space position）：
            // 1. modelViewMatrix：模型视图矩阵，将顶点从模型空间转换到相机空间
            // 2. projectionMatrix：投影矩阵，将相机空间转换到裁剪空间
            // 3. vec4(newPosition, 1.0)：将三维位置转换为齐次坐标（四维向量）
            // 4. gl_Position：内置变量，表示顶点在裁剪空间中的最终位置
            gl_Position = projectionMatrix * modelViewMatrix * vec4(newPosition, 1.0);
            
        }
        // ========== 顶点着色器代码结束 ==========
    </script>

    <!-- 
        片段着色器（Fragment Shader）脚本：
        type="x-shader/x-fragment" - 自定义类型标识，表示这是片段着色器代码
        id="fragmentshader" - 指定ID，便于JavaScript代码获取着色器文本内容
        片段着色器在GPU上运行，处理每个像素（fragment）的颜色计算
    -->
    <script type="x-shader/x-fragment" id="fragmentshader">
        // ========== 片段着色器代码开始 ==========
        
        // uniform变量：由CPU传递到GPU，所有片段共享
        // vec3 color: 基础颜色，三维向量（R, G, B）
        // float opacity: 透明度，0.0表示完全透明，1.0表示完全不透明
        uniform vec3 color;
        uniform float opacity;

        // varying变量：从顶点着色器传递过来的插值后的颜色
        // 由于顶点着色器中的vColor是每个顶点的颜色，在三角形内部会进行插值
        // 这里得到的vColor是当前像素位置经过插值后的颜色
        varying vec3 vColor;

        // main函数：片段着色器的主函数，对每个像素执行一次
        void main() {
            // 计算最终的像素颜色：
            // 1. vColor * color：将插值后的顶点颜色与基础颜色相乘（分量相乘）
            // 2. vec4(... , opacity)：创建四维颜色向量（R, G, B, A）
            // 3. gl_FragColor：内置变量，表示像素的最终输出颜色
            // 这里实现了颜色混合效果：顶点颜色 × 全局颜色 × 透明度
            gl_FragColor = vec4(vColor * color, opacity);
            
        }
        // ========== 片段着色器代码结束 ==========
    </script>

    <!-- 
        Import Maps（导入映射）配置：
        type="importmap" - 定义模块导入的映射关系
        这是ES6模块的现代特性，允许定义模块标识符到实际URL的映射
        使得在代码中可以使用简单的模块名，而不需要完整的相对路径
    -->
    <script type="importmap">
        {
            "imports": {
                "three": "../build/three.module.js",
                
                "three/addons/": "./jsm/"
            }
        }
    </script>

    <!-- 
        主JavaScript模块：
        type="module" - 表示这是一个ES6模块，支持import/export语法
        模块中的代码在严格模式下运行，有自己的作用域
    -->
    <script type="module">
        // ========== 模块导入部分 ==========
        
        // 导入Three.js库的所有导出内容，并将其命名为THREE
        // THREE现在包含了Three.js的所有核心类和函数
        import * as THREE from 'three';

        // 从Three.js附加组件中导入字体加载器
        // FontLoader：用于加载和解析JSON格式的字体文件
        import { FontLoader } from 'three/addons/loaders/FontLoader.js';
        
        // 从Three.js附加组件中导入文本几何体生成器
        // TextGeometry：根据字体和参数创建3D文本几何体
        import { TextGeometry } from 'three/addons/geometries/TextGeometry.js';

        // 从Three.js附加组件中导入性能监控器
        // Stats：显示帧率（FPS）、渲染时间等性能指标的库
        import Stats from 'three/addons/libs/stats.module.js';

        // ========== 全局变量声明部分 ==========
        
        // 渲染器、场景、相机、性能监控器变量声明
        // 使用let而不是var，因为let具有块级作用域
        let renderer;  // WebGL渲染器，负责将3D场景绘制到canvas上
        let scene;     // 3D场景容器，包含所有要渲染的对象（网格、灯光、相机等）
        let camera;    // 相机，定义观察3D场景的视角和投影方式
        let stats;     // 性能监控器实例

        // 线条对象和着色器统一变量声明
        let line;      // 3D线条对象（实际上是文本网格）
        let uniforms;  // 着色器uniform变量集合

        // ========== 字体加载部分 ==========
        
        // 创建字体加载器实例
        // FontLoader是异步加载字体文件的工具类
        const loader = new FontLoader();
        
        // 加载字体文件（helvetiker_bold.typeface.json）
        // 这是一个JSON格式的字体文件，包含字体的矢量轮廓数据
        loader.load(
            'fonts/helvetiker_bold.typeface.json',  // 字体文件路径
            
            // 加载成功后的回调函数
            function (font) {
                // font参数包含已加载的字体数据
                // 调用初始化函数，传入字体对象
                init(font);
            }
            
            // 注意：这里还可以添加加载进度和失败的回调函数
            // 例如：function (xhr) { console.log((xhr.loaded / xhr.total * 100) + '% loaded'); },
            // function (error) { console.error('字体加载失败:', error); }
        );

        // ========== 初始化函数 ==========
        
        /**
         * 初始化Three.js场景
         * @param {THREE.Font} font - 已加载的字体对象
         */
        function init(font) {
            // 步骤1：创建透视相机（PerspectiveCamera）
            // 透视相机模拟人眼的视角，近大远小
            camera = new THREE.PerspectiveCamera(
                30,                               // 视野角度（Field of View, FOV）
                                                   // 单位是度，30度是比较适中的视角
                
                window.innerWidth / window.innerHeight,  // 宽高比（Aspect Ratio）
                                                   // 使用窗口的宽高比，防止图像拉伸
                
                1,                                // 近裁剪面（Near Clipping Plane）
                                                   // 距离相机小于1单位的物体不会被渲染
                
                10000                             // 远裁剪面（Far Clipping Plane）
                                                   // 距离相机大于10000单位的物体不会被渲染
            );
            camera.position.z = 400;               // 设置相机位置：沿Z轴向后移动400单位
                                                   // 这样可以让相机远离场景中的物体

            // 步骤2：创建场景（Scene）
            // 场景是所有3D对象的容器，包括网格、灯光、相机等
            scene = new THREE.Scene();
            scene.background = new THREE.Color(0x050505);  // 设置场景背景颜色
                                                   // 0x050505是深灰色，接近黑色

            // 步骤3：定义着色器uniform变量
            // uniform变量是从JavaScript传递到着色器的全局变量
            // 所有顶点和片段都访问相同的uniform值
            uniforms = {
                // 振幅：控制顶点位移的强度
                // value: 5.0 - 初始值为5.0
                amplitude: { value: 5.0 },
                
                // 透明度：控制整个物体的透明度
                // value: 0.3 - 初始值为0.3（70%透明）
                opacity: { value: 0.3 },
                
                // 基础颜色：与顶点颜色相乘得到最终颜色
                // value: new THREE.Color(0xffffff) - 初始为白色
                color: { value: new THREE.Color(0xffffff) }
            };

            // 步骤4：创建自定义着色器材质（ShaderMaterial）
            // ShaderMaterial允许完全自定义顶点和片段着色器
            const shaderMaterial = new THREE.ShaderMaterial({
                uniforms: uniforms,  // 传入uniform变量集合
                
                // 获取HTML中定义的顶点着色器代码
                vertexShader: document.getElementById('vertexshader').textContent,
                
                // 获取HTML中定义的片段着色器代码
                fragmentShader: document.getElementById('fragmentshader').textContent,
                
                // 混合模式：加法混合（Additive Blending）
                // 新颜色 = 源颜色 + 目标颜色，产生明亮、发光的效果
                blending: THREE.AdditiveBlending,
                
                // 深度测试：禁用
                // 深度测试通常用于确定物体的前后关系，这里禁用可以使线条始终可见
                depthTest: false,
                
                // 透明：启用
                // 允许材质具有透明度，配合opacity uniform使用
                transparent: true
            });

            // 步骤5：创建3D文本几何体（TextGeometry）
            // 使用加载的字体创建"three.js"文本的3D模型
            const geometry = new TextGeometry('three.js', {
                font: font,           // 使用的字体对象
                
                size: 50,             // 字体大小（单位：世界单位）
                depth: 15,            // 文本的3D厚度（挤出深度）
                curveSegments: 10,    // 曲线分段数，值越高曲线越平滑
                
                bevelThickness: 5,    // 斜面厚度（倒角的深度）
                bevelSize: 1.5,       // 斜面大小（倒角的宽度）
                bevelEnabled: true,   // 启用斜面效果（使边缘更圆滑）
                bevelSegments: 10,    // 斜面分段数，值越高斜面越平滑
            });

            // 将几何体居中到其本地坐标系的原点
            // 这样旋转和缩放会以几何体中心为基准
            geometry.center();

            // 步骤6：获取顶点数量并创建自定义属性
            // 我们需要为每个顶点添加位移和颜色属性
            const count = geometry.attributes.position.count;  // 获取顶点总数
            
            // 创建位移属性缓冲区
            // Float32BufferAttribute：使用32位浮点数数组的缓冲区属性
            // count * 3：需要的数组长度（每个顶点有x,y,z三个分量）
            // 3：每个顶点的分量数（itemSize）
            const displacement = new THREE.Float32BufferAttribute(count * 3, 3);
            
            // 将位移属性添加到几何体中
            // 这个属性会在顶点着色器中作为attribute使用
            geometry.setAttribute('displacement', displacement);

            // 创建自定义颜色属性缓冲区
            // 同样为每个顶点创建RGB颜色值
            const customColor = new THREE.Float32BufferAttribute(count * 3, 3);
            geometry.setAttribute('customColor', customColor);

            // 步骤7：为每个顶点设置HSL颜色（创建彩虹色效果）
            // HSL颜色模型：色相(H)、饱和度(S)、亮度(L)
            const color = new THREE.Color(0xffffff);  // 临时颜色对象，初始为白色
            
            // 遍历所有顶点
            // customColor.count：顶点数量（等于count）
            for (let i = 0, l = customColor.count; i < l; i++) {
                // 设置HSL颜色：
                // i / l：色相，根据顶点索引在0到1之间变化，产生彩虹渐变
                // 0.5：饱和度，中等饱和度
                // 0.5：亮度，中等亮度
                color.setHSL(i / l, 0.5, 0.5);
                
                // 将颜色值写入颜色缓冲区
                // toArray：将THREE.Color对象转换为数组
                // customColor.array：底层的Float32Array
                // i * customColor.itemSize：写入的起始索引（每个顶点占3个位置）
                color.toArray(customColor.array, i * customColor.itemSize);
            }

            // 步骤8：创建线条对象（实际是网格对象）
            // THREE.Line：虽然叫Line，但这里实际上是使用三角形网格渲染的3D文本
            // 第一个参数：几何体（包含顶点、面、颜色等数据）
            // 第二个参数：材质（定义如何渲染几何体）
            line = new THREE.Line(geometry, shaderMaterial);
            
            line.rotation.x = 0.2;  // 绕X轴旋转0.2弧度（约11.5度）
                                    // 稍微倾斜以便更好地观察3D效果
                                    
            scene.add(line);  // 将线条对象添加到场景中

            // 步骤9：创建WebGL渲染器
            // WebGLRenderer：Three.js的WebGL渲染器
            renderer = new THREE.WebGLRenderer({ 
                antialias: true  // 启用抗锯齿，使边缘更平滑
            });
            
            // 设置设备像素比（Device Pixel Ratio）
            // 在高DPI屏幕上（如Retina显示屏），这可以确保清晰度
            renderer.setPixelRatio(window.devicePixelRatio);
            
            // 设置渲染器尺寸为整个窗口大小
            renderer.setSize(window.innerWidth, window.innerHeight);
            
            // 设置动画循环回调函数
            // setAnimationLoop：替代旧的requestAnimationFrame方法
            // animate函数将在每次屏幕刷新时被调用（通常是60次/秒）
            renderer.setAnimationLoop(animate);

            // 步骤10：将渲染器画布添加到页面
            // renderer.domElement：渲染器创建的canvas元素
            const container = document.getElementById('container');
            container.appendChild(renderer.domElement);

            // 步骤11：创建并添加性能监控器
            // Stats.js：显示帧率、渲染时间等性能指标
            stats = new Stats();
            container.appendChild(stats.dom);  // 将Stats的DOM元素添加到容器

            // 步骤12：添加窗口大小变化事件监听器
            // 当浏览器窗口大小改变时，调整相机和渲染器
            window.addEventListener('resize', onWindowResize);
            
            // 初始化完成
            // 此时场景已设置好，动画循环已启动
        }

        // ========== 窗口大小变化处理函数 ==========
        
        /**
         * 处理浏览器窗口大小变化事件
         * 调整相机和渲染器以适应新的窗口尺寸
         */
        function onWindowResize() {
            // 更新相机宽高比
            // 当窗口大小改变时，宽高比可能发生变化
            camera.aspect = window.innerWidth / window.innerHeight;
            
            // 更新相机的投影矩阵
            // 必须在更改相机参数后调用此方法
            camera.updateProjectionMatrix();
            
            // 更新渲染器尺寸
            // 使渲染器画布大小与窗口大小保持一致
            renderer.setSize(window.innerWidth, window.innerHeight);
        }

        // ========== 动画循环函数 ==========
        
        /**
         * 动画循环函数
         * 由渲染器的setAnimationLoop调用，每帧执行一次
         */
        function animate() {
            render();      // 渲染场景
            stats.update(); // 更新性能监控器显示（帧率等）
            
            // 注意：这里没有使用requestAnimationFrame
            // 因为renderer.setAnimationLoop已经处理了动画循环
        }

        // ========== 渲染函数 ==========
        
        /**
         * 渲染函数
         * 更新场景状态并执行渲染
         */
        function render() {
            // 获取当前时间（秒）
            // Date.now()返回毫秒数，乘以0.001转换为秒
            const time = Date.now() * 0.001;

            // 更新文本旋转：绕Y轴旋转
            // 0.25 * time：随时间线性增加旋转角度
            // 产生缓慢旋转的效果
            line.rotation.y = 0.25 * time;

            // 更新振幅uniform值
            // Math.sin(0.5 * time)：使用正弦函数产生波动效果
            // 振幅会在-1到1之间周期性变化，乘以uniform.amplitude.value
            // 实际上是在着色器中乘以这个值
            uniforms.amplitude.value = Math.sin(0.5 * time);
            
            // 更新颜色uniform值：HSL偏移
            // offsetHSL：对颜色进行HSL空间的偏移
            // 0.0005：色相偏移量（每次调用增加一点点）
            // 0：饱和度偏移量（保持不变）
            // 0：亮度偏移量（保持不变）
            // 这会产生逐渐变化的颜色效果
            uniforms.color.value.offsetHSL(0.0005, 0, 0);

            // 步骤：更新位移属性，产生动态效果
            // 获取几何体的所有属性
            const attributes = line.geometry.attributes;
            
            // 获取位移属性数组（Float32Array）
            const array = attributes.displacement.array;

            // 遍历位移数组的每个分量（x, y, z）
            // 数组长度是顶点数×3（每个顶点有x,y,z三个分量）
            // 每次循环处理一个顶点的三个分量（i += 3）
            for (let i = 0, l = array.length; i < l; i += 3) {
                // 为每个分量添加随机扰动：
                // Math.random()：生成0到1之间的随机数
                // 0.5 - Math.random()：生成-0.5到0.5之间的随机数
                // 0.3 * (...)：将扰动范围缩放到-0.15到0.15之间
                // +=：累加到原有值上，产生累积效果
                
                array[i] += 0.3 * (0.5 - Math.random());      // X分量扰动
                array[i + 1] += 0.3 * (0.5 - Math.random());  // Y分量扰动
                array[i + 2] += 0.3 * (0.5 - Math.random());  // Z分量扰动
            }

            // 重要：标记位移属性需要更新
            // 当我们修改了缓冲区数组后，必须告诉Three.js需要更新GPU缓冲区
            // 如果不设置needsUpdate = true，修改不会生效
            attributes.displacement.needsUpdate = true;

            // 执行渲染：将3D场景绘制到画布上
            // scene：要渲染的场景
            // camera：观察场景的相机
            renderer.render(scene, camera);
            
            // 注意：这个函数每帧都会调用（通常每秒60次）
            // 因此所有动画效果（旋转、振幅变化、颜色偏移、随机扰动）都会持续更新
        }
        
        // ========== 模块代码结束 ==========
        // 注意：ES6模块有独立作用域，这里定义的函数和变量不会污染全局作用域
    </script>

</body>
</html>