<!-- Three.js 立方体实例化演示 - 详细功能描述与技术分析
一、整体功能概述
这是一个基于Three.js的高性能3D图形演示程序，主要展示5000个动态旋转的立方体。这些立方体共享相同的几何形状和纹理，但每个都有独立的位置和旋转状态。程序的核心特点是极致性能优化，通过多种高级技术实现大规模对象的流畅渲染。

主要功能亮点：
大规模实例渲染：同时渲染5000个立方体并保持60FPS

动态动画效果：每个立方体都有独立的旋转动画，同时整体场景也在旋转

纹理贴图：所有立方体使用相同的木箱纹理

实时性能监控：内置FPS/内存监控面板

响应式布局：自适应窗口大小变化

二、核心技术点详解
1. 实例化渲染（Instanced Rendering）
传统渲染方式的问题：

javascript
// 传统方式：每个立方体都是独立的Mesh对象
for(let i=0; i<5000; i++) {
    const cube = new THREE.Mesh(geometry, material);
    scene.add(cube);  // 5000次绘制调用！
}
实例化渲染的优势：

javascript
// 实例化方式：所有立方体共享一个Mesh
const mesh = new THREE.InstancedMesh(geometry, material, 5000);
// 只需1次绘制调用！
技术原理：

单次绘制调用：通过gl.drawArraysInstanced()或gl.drawElementsInstanced()一次绘制所有实例

实例ID传递：GPU通过gl_InstanceID内置变量区分不同实例

变换矩阵缓冲区：每个实例的变换矩阵存储在单独的缓冲区中

2. 交错缓冲区（Interleaved Buffer）
传统缓冲区布局（分离式）：

text
位置缓冲区: [x1,y1,z1, x2,y2,z2, x3,y3,z3, ...]
UV缓冲区:   [u1,v1, u2,v2, u3,v3, ...]
交错缓冲区布局：

text
交错缓冲区: [x1,y1,z1,u1,v1, x2,y2,z2,u2,v2, x3,y3,z3,u3,v3, ...]
性能优势分析：

对比项	传统缓冲区	交错缓冲区
缓存命中率	低（需多次读取）	高（一次读取所有属性）
内存访问	2次内存访问/顶点	1次内存访问/顶点
适合场景	属性使用频率不同	所有属性频繁使用
3. 四元数旋转系统
为什么使用四元数而不是欧拉角？

欧拉角问题：

javascript
// 万向节锁示例：当pitch为90度时，yaw和roll效果相同
cube.rotation.x = Math.PI/2;  // 90度
cube.rotation.y = 0.5;        // 这些旋转
cube.rotation.z = 0.5;        // 会产生相同的效果
四元数优势：

无万向节锁：任意方向都能平滑旋转

高效插值：球面线性插值（SLERP）更自然

计算效率：比旋转矩阵更少的计算量

代码中的旋转实现：

javascript
// 预定义旋转四元数
const moveQ = new THREE.Quaternion(0.5, 0.5, 0.5, 0.0).normalize();

// 每帧应用基于时间的旋转
const delta = (time - lastTime) / 5000;
tmpQ.set(moveQ.x * delta, moveQ.y * delta, moveQ.z * delta, 1).normalize();
4. 性能优化技术体系
4.1 视锥体剔除（Frustum Culling）
javascript
// 每帧更新包围球，用于快速剔除
mesh.computeBoundingSphere();
原理：计算包含所有实例的最小球体

优化：如果球体在相机视野外，跳过整个实例组的渲染

效果：减少约30-50%的GPU负载

4.2 矩阵更新优化
javascript
// 标记矩阵需要更新（避免不必要的GPU上传）
mesh.instanceMatrix.needsUpdate = true;
惰性更新：只在矩阵实际变化时更新GPU缓冲区

批量传输：所有矩阵一次性上传到GPU

4.3 Delta Time时间系统
javascript
const delta = (time - lastTime) / 5000;
帧率无关：确保不同刷新率下动画速度一致

平滑动画：避免帧率波动导致的动画卡顿

5. WebGL渲染管线流程
text
CPU端（JavaScript）                      GPU端（WebGL）
1. 准备顶点数据                       
   ↓                                 4. 顶点着色器
2. 设置变换矩阵                         ↙ ↘
   ↓                               5. 图元装配 → 6. 光栅化
3. 调用drawElementsInstanced()              ↓
                                      7. 片段着色器
                                          ↓
                                      8. 帧缓冲区
着色器伪代码（概念性）：

glsl
// 顶点着色器
attribute vec3 position;
attribute vec2 uv;
uniform mat4 instanceMatrices[5000];  // 实例矩阵数组
uniform mat4 viewProjectionMatrix;

void main() {
    // 获取当前实例的变换矩阵
    mat4 instanceMatrix = instanceMatrices[gl_InstanceID];
    
    // 应用变换
    vec4 worldPosition = instanceMatrix * vec4(position, 1.0);
    gl_Position = viewProjectionMatrix * worldPosition;
    
    // 传递UV坐标
    vUv = uv;
}
6. 内存与性能数据
内存占用估算：

text
单个立方体数据：
- 顶点数：24个
- 每个顶点：位置(3) + UV(2) + 填充(3) = 8个float
- 总浮点数：24 × 8 = 192个
- 内存：192 × 4字节 = 768字节

5000个实例：
- 变换矩阵：5000 × 16个float × 4字节 = 320KB
- 总内存：< 1MB

对比传统方式：
- 5000个独立Mesh：约5000 × 768字节 = 3.75MB
- 节省：约75%内存
渲染性能对比：

渲染方式	绘制调用次数	适合场景
传统渲染	5000次	少量独特对象
实例化渲染	1次	大量相同对象
混合渲染	N次（分组实例）	多种类型对象
7. 扩展应用场景
这个技术栈适用于：

游戏开发：大量相同敌人/NPC/子弹

数据可视化：大规模数据点云展示

建筑可视化：重复的建筑元素（窗户、砖块）

自然场景：树林、草地、星空

粒子系统：烟雾、火焰、雨雪效果

8. 兼容性与降级方案
javascript
// 检测硬件实例化支持
if (!renderer.capabilities.isWebGL2) {
    document.getElementById('notSupported').style.display = 'block';
    // 可以在这里提供降级方案
    // 例如：减少实例数量、使用传统渲染
}
三、技术总结
这个演示展示了现代WebGL应用的核心优化策略：

算法级优化：实例化渲染减少绘制调用

内存级优化：交错缓冲区提高缓存效率

数学优化：四元数避免旋转问题

运行时优化：视锥体剔除减少不必要的渲染

工程优化：Delta Time确保动画稳定性 -->


<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 页面标题：描述这是一个使用three.js实现WebGL索引实例化的立方体演示 -->
    <title>three.js WebGL索引实例化演示 - 单立方体交错缓冲区实现</title>
    <!-- 字符编码设置为UTF-8，支持多语言字符 -->
    <meta charset="utf-8">
    <!-- 视口设置：适应移动设备，禁止用户手动缩放，设置最小和最大缩放比例为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">
</head>
<body>

    <!-- 3D场景渲染的主要容器，WebGL画布将插入到此div中 -->
    <div id="container"></div>
    <!-- 页面信息显示区域，位于页面左上角或右上角 -->
    <div id="info">
        <!-- three.js官网链接 -->
        <a href="https://three.js.org" target="_blank" rel="noopener">three.js</a> - 索引实例化（单立方体）与交错缓冲区技术演示
        <!-- 当浏览器或显卡不支持硬件实例化时显示的提示信息（初始状态为隐藏） -->
        <div id="notSupported" style="display:none">抱歉，您的显卡或浏览器不支持硬件实例化功能</div>
    </div>

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

    <!-- 主JavaScript代码模块，type="module"表示使用ES6模块系统 -->
    <script type="module">
        // ==================== 模块导入部分 ====================
        // 导入three.js库的所有功能，THREE将成为命名空间对象
        import * as THREE from 'three';
        // 导入性能统计器，用于监控FPS（帧率）、MS（渲染时间）和MB（内存使用）
        import Stats from 'three/addons/libs/stats.module.js';

        // ==================== 全局变量声明部分 ====================
        let container, stats;           // container: DOM容器引用; stats: 性能统计器实例
        let camera, scene, renderer, mesh;  // 3D场景核心对象：相机、场景、渲染器、网格
        const instances = 5000;         // 要创建的立方体实例数量，这里设置为5000个
        let lastTime = 0;               // 记录上一帧的时间戳，用于计算时间差（delta time）

        // 四元数（Quaternion）用于表示3D旋转，这里定义一个每帧应用的旋转量
        // 参数(0.5, 0.5, 0.5, 0.0)定义了一个旋转轴和角度，normalize()确保它是单位四元数
        const moveQ = new THREE.Quaternion( 0.5, 0.5, 0.5, 0.0 ).normalize();
        const tmpQ = new THREE.Quaternion();  // 临时四元数，用于计算每帧的实际旋转量
        const tmpM = new THREE.Matrix4();     // 临时4x4矩阵，用于将四元数旋转转换为矩阵形式
        const currentM = new THREE.Matrix4(); // 当前实例的变换矩阵，用于读取和更新每个实例的变换

        // ==================== 初始化函数调用 ====================
        // 页面加载后立即执行初始化
        init();

        /**
         * 初始化函数 - 整个3D应用程序的入口点
         * 功能：创建所有必要的3D对象、设置场景、加载资源、配置渲染器
         * 执行顺序：DOM元素获取 → 相机创建 → 场景创建 → 几何体/材质创建 → 渲染器设置
         */
        function init() {
            // 获取HTML中的容器元素，后续将把WebGL画布插入到此元素中
            container = document.getElementById( 'container' );

            // ==================== 相机创建 ====================
            // 创建透视投影相机（Perspective Camera），模拟人眼视角
            // 参数说明：50°垂直视野角，窗口宽高比，近裁剪面（1单位），远裁剪面（1000单位）
            camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 1000 );
            // 注意：这里没有设置相机位置，默认位置是(0,0,0)，后续可能需要调整

            // ==================== 场景创建 ====================
            // 创建3D场景对象，所有3D对象（网格、灯光、相机等）都将添加到此场景中
            scene = new THREE.Scene();
            // 设置场景背景颜色为深灰色（十六进制颜色代码0x101010）
            scene.background = new THREE.Color( 0x101010 );

            // ==================== 几何体创建部分 ====================
            /**
             * 使用InstancedBufferGeometry创建实例化几何体
             * 与传统BufferGeometry的区别：支持实例化渲染，可以为每个实例提供不同的变换矩阵
             * 优势：一次绘制调用可以渲染多个实例，极大提升渲染性能
             */
            const geometry = new THREE.InstancedBufferGeometry();

            /**
             * 创建交错缓冲区（Interleaved Buffer）
             * 概念解释：交错缓冲区将不同顶点属性（位置、UV、法线等）交错存储在一个缓冲区中
             * 传统方式：位置数据一个缓冲区，UV数据一个缓冲区...
             * 交错方式：[顶点1位置,顶点1UV,顶点1法线,顶点2位置,顶点2UV,顶点2法线...]
             * 
             * 优势：提高缓存命中率，因为GPU可以一次性读取一个顶点的所有相关数据
             * 数据结构：每个顶点8个浮点数 [x, y, z, w, u, v, s, t]
             * 实际使用：x,y,z是位置坐标，u,v是纹理坐标，w,s,t是填充值（用于内存对齐到4的倍数）
             * 内存对齐：GPU通常以4个浮点数（16字节）为单位读取数据，填充确保对齐
             * 
             * 这里定义了一个立方体的24个顶点（6个面 × 每个面4个顶点）
             * 每个面的4个顶点定义了一个矩形，两个三角形将共用这些顶点
             */
            const vertexBuffer = new THREE.InterleavedBuffer( new Float32Array( [
                // 立方体前面（正对屏幕的面）的4个顶点
                // 格式：[x, y, z, w填充, u纹理坐标, v纹理坐标, s填充, t填充]
                -1,  1,  1, 0, 0, 0, 0, 0,  // 左上顶点：位置(-1,1,1), UV(0,0)
                1,  1,  1, 0, 1, 0, 0, 0,   // 右上顶点：位置(1,1,1), UV(1,0)
                -1, -1,  1, 0, 0, 1, 0, 0,  // 左下顶点：位置(-1,-1,1), UV(0,1)
                1, -1,  1, 0, 1, 1, 0, 0,   // 右下顶点：位置(1,-1,1), UV(1,1)
                
                // 立方体后面（远离屏幕的面）的4个顶点
                1,  1, -1, 0, 1, 0, 0, 0,   // 注意：顶点顺序会影响法线方向（这里可能用于背面剔除）
                -1,  1, -1, 0, 0, 0, 0, 0,
                1, -1, -1, 0, 1, 1, 0, 0,
                -1, -1, -1, 0, 0, 1, 0, 0,
                
                // 立方体左面的4个顶点
                -1,  1, -1, 0, 1, 1, 0, 0,
                -1,  1,  1, 0, 1, 0, 0, 0,
                -1, -1, -1, 0, 0, 1, 0, 0,
                -1, -1,  1, 0, 0, 0, 0, 0,
                
                // 立方体右面的4个顶点
                1,  1,  1, 0, 1, 0, 0, 0,
                1,  1, -1, 0, 1, 1, 0, 0,
                1, -1,  1, 0, 0, 0, 0, 0,
                1, -1, -1, 0, 0, 1, 0, 0,
                
                // 立方体顶面的4个顶点
                -1,  1,  1, 0, 0, 0, 0, 0,
                1,  1,  1, 0, 1, 0, 0, 0,
                -1,  1, -1, 0, 0, 1, 0, 0,
                1,  1, -1, 0, 1, 1, 0, 0,
                
                // 立方体底面的4个顶点
                1, -1,  1, 0, 1, 0, 0, 0,
                -1, -1,  1, 0, 0, 0, 0, 0,
                1, -1, -1, 0, 1, 1, 0, 0,
                -1, -1, -1, 0, 0, 1, 0, 0
            ] ), 8 ); // 第二个参数8表示每个顶点有8个浮点数分量

            /**
             * 从交错缓冲区创建位置属性（Position Attribute）
             * 参数说明：
             *   vertexBuffer: 数据源缓冲区
             *   3: 每个位置有3个分量（x,y,z）
             *   0: 从缓冲区中的偏移量（位置数据从第0个元素开始）
             */
            const positions = new THREE.InterleavedBufferAttribute( vertexBuffer, 3, 0 );
            // 将位置属性设置到几何体上
            geometry.setAttribute( 'position', positions );
            
            /**
             * 从交错缓冲区创建UV属性（纹理坐标）
             * 参数说明：
             *   vertexBuffer: 数据源缓冲区
             *   2: 每个UV坐标有2个分量（u,v）
             *   4: 从缓冲区中的偏移量（UV数据从第4个元素开始，跳过了x,y,z,w）
             */
            const uvs = new THREE.InterleavedBufferAttribute( vertexBuffer, 2, 4 );
            // 将UV属性设置到几何体上
            geometry.setAttribute( 'uv', uvs );

            /**
             * 索引缓冲区（Index Buffer）
             * 功能：定义顶点如何连接成三角形，避免重复定义顶点
             * 原理：只存储顶点的索引，多个三角形可以共享同一个顶点
             * 优势：减少内存占用，提高渲染效率
             * 
             * 立方体有6个面，每个面由2个三角形组成，每个三角形有3个顶点
             * 总共：6面 × 2三角形 × 3顶点 = 36个索引
             * 
             * 顶点顺序：通常是逆时针方向，这决定了三角形的正面（影响背面剔除和法线计算）
             */
            const indices = new Uint16Array( [
                // 前面（第一个三角形和第二个三角形）
                0, 2, 1,   // 三角形1：顶点0→2→1（逆时针）
                2, 3, 1,   // 三角形2：顶点2→3→1
                
                // 后面（注意顶点顺序确保法线向外）
                4, 6, 5,
                6, 7, 5,
                
                // 左面
                8, 10, 9,
                10, 11, 9,
                
                // 右面
                12, 14, 13,
                14, 15, 13,
                
                // 顶面（这里的顶点顺序与前面的面不同，但仍然是逆时针）
                16, 17, 18,
                18, 17, 19,
                
                // 底面
                20, 21, 22,
                22, 21, 23
            ] );

            // 将索引数据设置为几何体的索引属性，1表示每个索引是16位无符号整数
            geometry.setIndex( new THREE.BufferAttribute( indices, 1 ) );

            // ==================== 材质创建部分 ====================
            // 创建基础网格材质（不受光照影响，直接显示颜色/纹理）
            const material = new THREE.MeshBasicMaterial();
            // 使用纹理加载器加载木箱纹理图片
            material.map = new THREE.TextureLoader().load( 'textures/crate.gif' );
            // 设置纹理颜色空间为sRGB，使颜色显示更符合人眼感知
            material.map.colorSpace = THREE.SRGBColorSpace;
            // 禁用Y轴翻转（three.js默认纹理Y轴向下，但有些图片Y轴向上）
            material.map.flipY = false;

            // ==================== 实例化数据准备 ====================
            // 用于计算每个实例变换的临时变量
            const matrix = new THREE.Matrix4();      // 4x4变换矩阵：包含平移、旋转、缩放信息
            const offset = new THREE.Vector3();      // 3D位置向量：每个实例在空间中的位置
            const orientation = new THREE.Quaternion(); // 四元数：每个实例的旋转姿态
            const scale = new THREE.Vector3( 1, 1, 1 ); // 缩放向量：所有实例统一缩放为1（不缩放）
            let x, y, z, w;                           // 临时变量：用于生成随机值

            /**
             * 创建实例化网格（InstancedMesh）
             * 参数说明：
             *   geometry: 几何体（所有实例共享）
             *   material: 材质（所有实例共享）
             *   instances: 实例数量（5000个）
             * 
             * InstancedMesh与传统Mesh的区别：
             * 1. 每个实例有自己的变换矩阵
             * 2. 一次绘制调用渲染所有实例
             * 3. 支持硬件实例化（需要显卡支持）
             */
            mesh = new THREE.InstancedMesh( geometry, material, instances );

            /**
             * 为每个实例生成随机位置和旋转
             * 循环5000次，为每个立方体实例设置不同的变换
             */
            for ( let i = 0; i < instances; i ++ ) {
                // 步骤1：生成随机位置（在-50到50的范围内）
                x = Math.random() * 100 - 50;  // Math.random()返回0-1，乘以100得0-100，减50得-50~50
                y = Math.random() * 100 - 50;
                z = Math.random() * 100 - 50;

                /**
                 * 步骤2：计算最终位置（确保实例不会全部集中在原点）
                 * 技巧：从原点向随机方向延伸至少5个单位
                 */
                offset.set( x, y, z ).normalize();      // normalize(): 将向量转换为单位向量（长度为1）
                offset.multiplyScalar( 5 );            // 将单位向量乘以5，得到长度为5的向量
                // 最终位置 = 原始随机位置 + 向外延伸5个单位
                offset.set( x + offset.x, y + offset.y, z + offset.z );

                /**
                 * 步骤3：生成随机旋转（使用四元数）
                 * 四元数优点：避免万向节锁，平滑插值
                 */
                x = Math.random() * 2 - 1;  // 生成-1到1的随机值
                y = Math.random() * 2 - 1;
                z = Math.random() * 2 - 1;
                w = Math.random() * 2 - 1;
                orientation.set( x, y, z, w ).normalize(); // 设置四元数并归一化（确保是单位四元数）

                /**
                 * 步骤4：组合变换矩阵
                 * matrix.compose()将位置、旋转、缩放组合成一个4x4变换矩阵
                 * 这是3D图形中的标准操作：T（平移） × R（旋转） × S（缩放）
                 */
                matrix.compose( offset, orientation, scale );
                
                /**
                 * 步骤5：为第i个实例设置变换矩阵
                 * setMatrixAt()将矩阵数据存储到实例化网格的内部缓冲区
                 */
                mesh.setMatrixAt( i, matrix );
            }

            // 将实例化网格添加到场景中，现在场景中有5000个立方体
            scene.add( mesh );

            // ==================== 渲染器创建与配置 ====================
            // 创建WebGL渲染器，three.js会自动检测浏览器支持的WebGL版本（1.0或2.0）
            renderer = new THREE.WebGLRenderer();
            // 设置设备像素比，确保在高DPI屏幕（如Retina）上清晰显示
            renderer.setPixelRatio( window.devicePixelRatio );
            // 设置渲染器画布大小为整个窗口大小
            renderer.setSize( window.innerWidth, window.innerHeight );
            /**
             * 设置动画循环回调函数
             * 替代传统的requestAnimationFrame，three.js提供的更简洁方式
             * animate函数将在每一帧被调用
             */
            renderer.setAnimationLoop( animate );
            // 将渲染器的DOM元素（canvas画布）添加到页面容器中
            container.appendChild( renderer.domElement );

            // ==================== 性能统计器设置 ====================
            // 创建Stats.js性能监视器实例
            stats = new Stats();
            // 默认显示FPS（帧率）面板，点击可以切换到MS（渲染时间）和MB（内存）面板
            container.appendChild( stats.dom );

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

        /**
         * 窗口大小变化事件处理函数
         * 功能：当浏览器窗口大小改变时，调整相机和渲染器以适应新尺寸
         * 触发条件：用户调整窗口大小、切换全屏、设备旋转等
         */
        function onWindowResize() {
            // 更新相机的宽高比（防止图像拉伸或压缩）
            camera.aspect = window.innerWidth / window.innerHeight;
            /**
             * 更新相机的投影矩阵
             * 重要：更改相机参数后必须调用此方法，否则更改不会生效
             * 投影矩阵定义了3D空间如何投影到2D屏幕
             */
            camera.updateProjectionMatrix();
            // 更新渲染器画布大小，使其填充整个窗口
            renderer.setSize( window.innerWidth, window.innerHeight );
        }

        /**
         * 动画循环函数 - 每一帧都执行
         * 功能：更新场景状态、计算实例旋转、重新渲染
         * 调用频率：通常是每秒60次（取决于浏览器和硬件）
         */
        function animate() {
            // 获取当前时间戳（毫秒），用于计算时间差和基于时间的动画
            const time = performance.now();

            /**
             * 整体网格旋转：让所有立方体一起绕Y轴缓慢旋转
             * time * 0.00005：基于时间的旋转，确保动画平滑且与帧率无关
             * 乘以0.00005（即除以20000）使旋转速度适中
             */
            mesh.rotation.y = time * 0.00005;

            /**
             * 计算时间差（delta time）
             * (time - lastTime)：当前帧与上一帧的时间间隔（毫秒）
             * 除以5000：将时间差标准化，用于控制旋转速度
             * 使用delta time确保动画在不同帧率下速度一致
             */
            const delta = ( time - lastTime ) / 5000;
            
            /**
             * 计算本帧要应用的旋转四元数
             * 原理：将预定义的旋转量(moveQ)乘以时间差，得到实际旋转量
             * 四元数乘法表示旋转的组合
             */
            tmpQ.set( moveQ.x * delta, moveQ.y * delta, moveQ.z * delta, 1 ).normalize();
            
            /**
             * 将四元数转换为旋转矩阵
             * GPU使用矩阵进行变换计算，所以需要转换
             */
            tmpM.makeRotationFromQuaternion( tmpQ );

            /**
             * 遍历所有实例，更新每个实例的旋转
             * 这里实现了每个立方体除了整体旋转外，还有各自的独立旋转
             */
            for ( let i = 0, il = instances; i < il; i ++ ) {
                // 步骤1：获取第i个实例当前的变换矩阵
                mesh.getMatrixAt( i, currentM );
                /**
                 * 步骤2：将临时旋转矩阵与当前矩阵相乘
                 * 矩阵乘法顺序重要：currentM × tmpM 表示先应用当前变换，再应用新旋转
                 * 在3D图形中，矩阵乘法顺序通常是从右到左应用变换
                 */
                currentM.multiply( tmpM );
                // 步骤3：将更新后的矩阵设置回第i个实例
                mesh.setMatrixAt( i, currentM );
            }

            /**
             * 标记实例矩阵需要更新
             * 重要：修改实例矩阵后必须设置此标志，否则GPU不会使用新数据
             * 原理：three.js使用缓冲区对象存储矩阵数据，修改后需要通知WebGL更新
             */
            mesh.instanceMatrix.needsUpdate = true;
            
            /**
             * 重新计算包围球（Bounding Sphere）
             * 功能：计算包含所有实例的最小球体
             * 用途：用于视锥体剔除（Frustum Culling），提高渲染性能
             * 原理：如果包围球在相机视锥体外，则跳过渲染整个实例化网格
             * 注意：由于实例在旋转，包围球需要每帧更新
             */
            mesh.computeBoundingSphere();

            // 更新上一帧时间戳，用于下一帧计算delta time
            lastTime = time;

            /**
             * 渲染场景
             * 执行WebGL绘制调用，将3D场景渲染到2D画布上
             * 内部过程：清理缓冲区 → 设置着色器 → 绑定纹理 → 绘制几何体
             */
            renderer.render( scene, camera );

            /**
             * 更新性能统计器显示
             * 更新FPS计数器和渲染时间统计
             */
            stats.update();
        }
    </script>
</body>
</html>