发布于 由admin

什么是 ‘Declarative 3D’？对比 Three.js 命令式写法与 React 声明式写法的运行时性能差异

各位技术同仁，下午好！

今天，我们将深入探讨一个在现代 Web 3D 开发领域日益受到关注的话题——“声明式 3D”（Declarative 3D）。我们将解构其核心理念，并通过与传统的 Three.js 命令式写法进行对比，重点剖析两者在运行时性能上的差异，尤其是在 React 生态系统背景下的考量。

一、引言：从命令式到声明式，3D世界的新范式

在编程世界中，“命令式”（Imperative）与“声明式”（Declarative）是两种截然不同的编程范式。简单来说，命令式编程关注“如何做”，开发者需要一步步地给出指令，详细描述程序的执行流程；而声明式编程则关注“是什么”，开发者只需描述最终想要达到的状态，具体的实现细节则由底层系统完成。

这一范式转变在 Web 2D UI 开发领域已经取得了巨大成功，React、Vue 等声明式框架彻底改变了前端开发的面貌。现在，这股浪潮也蔓延到了 3D 领域。传统的 Web 3D 库，如 Three.js，本质上是命令式的。开发者需要手动创建、配置、管理场景中的每一个对象。当场景变得复杂时，这种模式下的状态管理和代码维护变得异常困难。

“声明式 3D”应运而生，其核心思想是将声明式 UI 框架（如 React）的理念引入到 3D 场景的构建中。它允许开发者像描述 2D UI 一样，通过组件和状态来描述 3D 场景的最终形态，而无需关心 Three.js 对象创建、更新、销毁的底层细节。这极大地提升了开发效率和代码的可维护性。

今天，我们主要以 react-three-fiber (简称 R3F) 为例，来探讨声明式 3D 如何在 React 生态中实现，以及它与原生 Three.js 命令式写法在运行时性能上的异同。

二、命令式 3D：Three.js 的传统之路

Three.js 是目前最流行、功能最强大的 WebGL 封装库之一。它提供了一套直观的 API，让开发者能够相对容易地在浏览器中创建和渲染复杂的 3D 图形。然而，Three.js 的使用方式是典型的命令式。

2.1 核心理念

在 Three.js 中，你需要显式地执行以下步骤：

  1. 创建场景 (Scene)：所有 3D 对象都将放置在其中。
  2. 创建相机 (Camera)：定义观察场景的视角。
  3. 创建渲染器 (Renderer)：将场景和相机结合，输出到 <canvas> 元素。
  4. 创建几何体 (Geometry)：定义 3D 对象的形状（如盒子、球体）。
  5. 创建材质 (Material)：定义 3D 对象的外观（如颜色、纹理）。
  6. 创建网格 (Mesh)：将几何体和材质组合成一个可渲染的对象。
  7. 添加到场景 (Add to Scene)：将网格、光源等添加到场景中。
  8. 渲染循环 (Animation Loop)：使用 requestAnimationFrame 不断调用渲染器，以更新和绘制场景。
  9. 更新对象属性: 在渲染循环中或特定事件触发时，直接修改 3D 对象的属性（如位置、旋转、颜色）。

2.2 代码示例：一个旋转的立方体

import * as THREE from 'three';

let scene, camera, renderer, cube;

function init() {
    // 1. 创建场景
    scene = new THREE.Scene();

    // 2. 创建相机 (透视相机)
    camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    camera.position.z = 5;

    // 3. 创建渲染器
    renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    // 4. 5. 6. 创建几何体、材质和网格
    const geometry = new THREE.BoxGeometry(1, 1, 1);
    const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); // 绿色
    cube = new THREE.Mesh(geometry, material);

    // 7. 添加到场景
    scene.add(cube);

    // 添加光源
    const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
    scene.add(ambientLight);
    const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
    directionalLight.position.set(0, 1, 1);
    scene.add(directionalLight);

    // 处理窗口大小变化
    window.addEventListener('resize', onWindowResize, false);
}

function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
}

// 8. 渲染循环
function animate() {
    requestAnimationFrame(animate);

    // 9. 更新对象属性：立方体旋转
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;

    renderer.render(scene, camera);
}

init();
animate();

在这个例子中，我们直接通过 cube.rotation.x += 0.01; 这样的语句来修改立方体的旋转属性。每当我们需要改变场景中的任何一个对象时，我们都需要获取到该对象的引用，然后直接调用其方法或修改其属性。

2.3 命令式 Three.js 的优缺点

优点：

  • 极致的控制力：开发者对 Three.js 的内部机制有最直接和细致的控制，可以进行各种微观优化。
  • 性能潜力高：由于没有抽象层的额外开销，理论上在特定场景下可以实现最高的原生性能。
  • 灵活性强：可以与任何前端框架结合，也可以独立运行。

缺点：

  • 样板代码多：创建和配置一个简单的 3D 对象都需要多行代码。
  • 状态管理复杂：当场景中对象数量庞大、交互复杂时，手动管理所有对象的状态和引用会变得非常困难。
  • 难以维护：随着项目规模扩大，代码可读性和可维护性下降，团队协作成本高。
  • 与现代前端框架集成不便：与 React 等声明式框架的理念格格不入，难以享受组件化、响应式状态管理等优势。

三、声明式 UI：React 的崛起与范式革命

在深入声明式 3D 之前，我们有必要回顾一下 React 如何将声明式编程带入 2D UI 领域。

3.1 核心理念

React 的核心理念是：UI 是应用程序状态的函数。开发者不再直接操作 DOM 元素，而是通过 JSX 描述 UI 的期望状态。当应用程序的状态（state 或 props）发生变化时，React 会自动计算出如何高效地更新 DOM，使其与新的状态匹配。

这一过程依赖于以下关键机制：

  • 虚拟 DOM (Virtual DOM)：一个轻量级的 JavaScript 对象树，是真实 DOM 的一个抽象表示。
  • 协调 (Reconciliation)：当状态变化时，React 会重新渲染组件，生成新的虚拟 DOM 树。然后，它会将新旧虚拟 DOM 树进行高效的比较（Diffing 算法），找出最小的差异，并只更新真实 DOM 中需要改变的部分。

3.2 代码示例：一个计数器组件

import React, { useState } from 'react';

function Counter() {
    const [count, setCount] = useState(0);

    const increment = () => {
        setCount(count + 1);
    };

    return (
        <div>
            <h1>Count: {count}</h1>
            <button onClick={increment}>Increment</button>
        </div>
    );
}

export default Counter;

在这个例子中，我们没有直接操作 DOM 元素来更新 <h1> 标签的文本或修改按钮的事件监听器。我们只是声明了 count 状态和当按钮点击时如何更新 count 的逻辑。React 会负责在 count 改变时，重新渲染 Counter 组件，并通过虚拟 DOM 协调机制高效地更新浏览器中的真实 DOM。

3.3 声明式 UI 的优缺点

优点：

  • 开发体验好 (DX)：代码更简洁、更易读，开发者专注于业务逻辑，而非 DOM 操作细节。
  • 可维护性高：组件化让大型应用更易于管理和理解。
  • 状态管理清晰：通过 useState、useReducer 等 Hook，状态流向一目了然。
  • 性能优化：虽然有虚拟 DOM 的开销，但 React 的协调算法通常非常高效，并通过批量更新等机制减少真实 DOM 操作。

缺点：

  • 抽象层开销：虚拟 DOM 的 Diffing 和协调过程会引入一定的 CPU 开销。
  • 学习曲线：需要理解 React 的生命周期、Hook、虚拟 DOM 等概念。

四、声明式 3D 的桥梁：React-Three-Fiber (R3F)

react-three-fiber (R3F) 是将 React 的声明式编程范式引入 Three.js 的一个开创性库。它不是 Three.js 的替代品，而是 Two.js 和 React 之间的桥梁。

4.1 核心理念

R3F 的核心思想是：将 Three.js 对象（如 THREE.Mesh、THREE.Light、THREE.Camera）抽象成 React 组件。这样，你就可以像编写普通 React 组件一样，使用 JSX 来描述你的 3D 场景。R3F 会在底层负责管理这些 Three.js 对象的创建、更新和销毁。

R3F 的工作原理与 React 处理真实 DOM 有异曲同工之妙，但它并非为 Three.js 对象创建另一个“虚拟 DOM”。相反，R3F 利用 React 的协调器（Reconciler）将 JSX 结构直接映射到 Three.js 的实际实例上。当 React 组件的 props 发生变化时，R3F 的协调器会直接更新对应的 Three.js 实例的属性，而不是生成一个新的虚拟 Three.js 树再进行 Diffing。这使得 R3F 能够以极低的开销直接操作 Three.js。

4.2 代码示例：R3F 中的旋转立方体

import React, { useRef, useState } from 'react';
import { Canvas, useFrame } from '@react-three/fiber';
import { OrbitControls } from '@react-three/drei'; // drei 是 R3F 的一个实用工具库

// 立方体组件
function Box(props) {
    // 1. 使用 useRef 获取 Three.js 网格实例的引用
    const meshRef = useRef();
    // 2. 使用 useState 管理组件的状态（例如是否被点击）
    const [hovered, setHover] = useState(false);
    const [active, setActive] = useState(false);

    // 3. useFrame Hook 在每一帧渲染时调用，用于动画或更新
    // 这里的操作是命令式的，直接修改 three.js 实例
    useFrame(() => {
        if (meshRef.current) {
            meshRef.current.rotation.x += 0.01;
            meshRef.current.rotation.y += 0.01;
        }
    });

    return (
        // 4. 使用 JSX 声明 Three.js 对象
        <mesh
            {...props}
            ref={meshRef} // 将 ref 绑定到 three.js 实例
            scale={active ? 1.5 : 1} // 声明式地根据状态改变缩放
            onClick={() => setActive(!active)} // 声明式地处理点击事件
            onPointerOver={() => setHover(true)} // 声明式地处理鼠标悬停
            onPointerOut={() => setHover(false)}>
            <boxGeometry args={[1, 1, 1]} /> {/* 声明立方体几何体 */}
            <meshStandardMaterial color={hovered ? 'hotpink' : 'orange'} /> {/* 声明材质，颜色随状态变化 */}
        </mesh>
    );
}

// 主应用组件
function App() {
    return (
        <div style={{ width: '100vw', height: '100vh' }}>
            {/* Canvas 组件是 R3F 的入口，负责设置 Three.js 场景、相机、渲染器 */}
            <Canvas>
                <ambientLight intensity={0.5} /> {/* 声明环境光 */}
                <spotLight position={[10, 10, 10]} angle={0.15} penumbra={1} /> {/* 声明点光源 */}
                <pointLight position={[-10, -10, -10]} /> {/* 声明点光源 */}

                <Box position={[-1.2, 0, 0]} /> {/* 声明第一个立方体 */}
                <Box position={[1.2, 0, 0]} /> {/* 声明第二个立方体 */}

                <OrbitControls /> {/* 声明轨道控制器，来自 drei */}
            </Canvas>
        </div>
    );
}

export default App;

在这个 R3F 示例中：

  • 我们用 <Canvas> 组件来包裹整个 3D 场景，它会自动设置 Three.js 的渲染器、场景和相机。
  • 我们用 <mesh>、<boxGeometry>、<meshStandardMaterial> 等 JSX 标签来声明 Three.js 对象，而不是手动 new THREE.Mesh(...)。
  • position、scale、color 等属性直接通过 props 传递，R3F 会负责将其应用到对应的 Three.js 实例上。
  • onClick、onPointerOver 等事件可以直接在 JSX 元素上定义，R3F 会处理事件冒泡和事件监听。
  • useFrame Hook 允许我们在每一帧执行命令式操作（如 meshRef.current.rotation.x += 0.01），这是性能敏感动画的常用手段。

4.3 R3F 如何工作

  1. React Reconciler: R3F 的核心是其自定义的 React Reconciler。这个 Reconciler 告诉 React 如何处理 Three.js 元素，而不是标准的 DOM 元素。
  2. 实例管理: 当你在 JSX 中写 <mesh> 时，R3F 的 Reconciler 会创建一个真正的 THREE.Mesh 实例，并将其存储在一个内部映射中。这个实例就是 React 组件所“渲染”的“真实”对象。
  3. 属性映射: 当 <mesh> 组件的 props（如 position, color）改变时，Reconciler 会直接将这些 props 应用到对应的 THREE.Mesh 实例上，而无需创建新的 Three.js 对象或进行复杂的 Diffing。
  4. 事件系统: R3F 提供了一个统一的事件系统，将 Three.js 的 Raycaster 拾取事件与 React 的合成事件系统结合起来，使得你可以像处理 DOM 事件一样处理 3D 对象的交互。

五、运行时性能：命令式 vs. 声明式

现在，我们进入本次讲座的核心环节——运行时性能对比。我们将从初始渲染、状态更新、内存管理和优化策略等多个维度进行深入分析。

5.1 初始渲染 (Initial Render)

特性 命令式 Three.js 声明式 R3F (基于 React)
JS 执行 直接执行 Three.js API 调用，创建 THREE.Scene, THREE.Camera, THREE.Mesh 等实例，并添加到场景。 首先执行 React 组件的渲染逻辑，构建虚拟 DOM 树。然后，R3F 的 Reconciler 遍历虚拟 DOM 树，根据 JSX 元素创建对应的 THREE.Object3D 实例，并将其添加到 R3F 的内部管理结构中。
抽象层 无额外抽象层开销。 存在 React 虚拟 DOM 的创建和 R3F 内部映射的建立开销。
性能影响 非常直接高效。性能主要取决于 Three.js 对象创建的数量和复杂性，以及浏览器和 GPU 的处理能力。 额外的 JS 执行时间通常可忽略不计。对于大多数应用而言，即使有少量开销，也远低于 Three.js/WebGL 渲染本身的开销。真正的瓶颈通常在于 GPU 渲染复杂几何体、材质和光照。
总结 在初始渲染阶段，两者的主要性能瓶颈都在于底层 Three.js 对象的创建和 WebGL 的渲染。R3F 引入的少量 JS 层抽象开销在多数情况下可以忽略不计。对于极端复杂的场景，R3F 的初始 JS 开销会略高于纯命令式，但往往不是决定性因素。

5.2 状态更新与重渲染 (Updates and Re-renders)

这是两者性能差异最显著的地方，也是讨论的重点。

5.2.1 命令式 Three.js 的更新机制

  • 机制: 开发者通过直接获取 3D 对象的引用（例如 cube 变量），然后手动修改其属性或调用其方法。 
    // 在渲染循环中
cube.rotation.x += 0.01;
cube.position.set(newX, newY, newZ);
material.color.set(newColor);
material.needsUpdate = true; // 有时需要手动标记材质更新
  • 优点:
    • 精准控制: 开发者精确知道哪个对象、哪个属性需要更新，只更新必要的部分。
    • 无抽象层开销: 没有中间层进行 Diffing 或协调，直接对 Three.js 实例进行操作。
    • 极致性能: 如果开发者能完美地管理状态和更新逻辑，可以达到最高的原生性能。
  • 缺点:
    • 手动管理复杂: 需要手动跟踪所有对象引用和状态，容易出现遗漏或过度更新。
    • 代码冗余: 很多更新逻辑需要重复编写。
    • 可维护性差: 在大型项目中，理解和修改更新逻辑变得困难。

5.2.2 声明式 R3F 的更新机制

  • 机制: 当 React 组件的 props 或 state 发生变化时，React 会触发组件的重新渲染。
    1. React 虚拟 DOM Diffing: React 重新执行组件的 render 函数（或函数组件体），生成新的 JSX 树（虚拟 DOM）。然后，React 的 Diffing 算法会比较新旧 JSX 树，找出需要更新的组件。
    2. R3F Reconciler 更新: R3F 的 Reconciler 拦截这些差异。它不会为每个更新的组件重新创建 Three.js 实例。相反，它会：
      • 直接属性更新: 对于已存在的 Three.js 实例，R3F 会直接将 React 组件的 props 映射并应用到 Three.js 实例的对应属性上（例如，position prop 会直接更新 mesh.position）。
      • 对象替换 (如果需要): 如果组件的类型发生变化（例如从 <mesh> 变为 <group>），或者某些内部属性（如 geometry 或 material 的 args）发生变化，R3F 可能会销毁旧的 Three.js 实例并创建新的。
      • 事件处理: 事件监听器会在组件重新渲染时高效更新，R3F 确保 Three.js Raycaster 能够正确拾取并触发 React 事件。

  • 代码示例:

    import React, { useState } from 'react';
import { Canvas } from '@react-three/fiber';

function DynamicBox() {
    const [xPos, setXPos] = useState(0);
    const [color, setColor] = useState('orange');

    // 每秒更新位置和颜色
    useFrame(({ clock }) => {
        setXPos(Math.sin(clock.getElapsedTime()) * 2);
        if (clock.getElapsedTime() % 2 < 0.02) { // 每两秒切换一次颜色
            setColor(prev => (prev === 'orange' ? 'hotpink' : 'orange'));
        }
    });

    return (
        <mesh position={[xPos, 0, 0]}> {/* 声明式地更新位置 */}
            <boxGeometry args={[1, 1, 1]} />
            <meshStandardMaterial color={color} /> {/* 声明式地更新颜色 */}
        </mesh>
    );
}

function App() {
    return (
        <Canvas>
            <ambientLight />
            <DynamicBox />
        </Canvas>
    );
}
  • 优点:
    • 开发体验极佳: 开发者只需声明期望的状态，R3F 会自动处理更新。
    • 可维护性高: 状态与 UI 之间的关系清晰，组件化使得复杂场景易于管理。
    • 减少错误: 避免了手动操作 DOM 或 Three.js 实例可能导致的错误。
  • 缺点:
    • React 协调开销: 尽管 React 的 Diffing 算法高效，但遍历虚拟 DOM 树并比较差异仍然会消耗 CPU 资源。
    • R3F 属性映射开销: R3F 需要将 React 的 props 转换为 Three.js 实例的属性，这也会有少量开销。
    • 潜在的不必要重渲染: 如果组件设计不当，可能会导致整个组件树或部分子树不必要的重渲染和协调，从而增加 CPU 负担。

5.2.3 性能差异总结 (更新阶段)

| 特性 | 命令式 Three.js | 声明式 R3F (基于 React) Three.js 是 Three.js 的一个 JavaScript 库，用于在 WebGL 中创建和显示 3D 图形。它是命令式的，意味着您必须明确地告诉程序如何执行每个步骤，例如创建对象、设置属性和渲染场景。

优点：

  • 完全控制：您可以完全控制场景中的每个元素，从而实现高度自定义的视觉效果和交互行为。
  • 性能优化：由于没有抽象层，您可以直接访问 WebGL API，从而实现更精细的性能优化。这对于需要处理大量对象或复杂场景的项目非常重要。
  • 灵活性：Three.js 可以与任何 JavaScript 框架或库一起使用，或者独立使用。

缺点：

  • 学习曲线陡峭：Three.js 的 API 复杂且庞大，需要投入大量时间学习和理解。
  • 样板代码：即使是简单的场景，也需要编写大量的样板代码来设置渲染器、场景、相机等。
  • 状态管理困难：在大型项目中，手动管理所有 3D 对象的状态和更新会变得非常困难和容易出错。

5.2.4 声明式 3D：React-Three-Fiber (R3F)

R3F 是一个基于 React 的声明式 3D 库，它将 Three.js 对象包装成 React 组件，让您可以使用 React 的声明式语法来构建 3D 场景。

优点：

  • 开发体验优秀：R3F 继承了 React 的声明式、组件化和响应式特性，大大简化了 3D 场景的构建和管理。您只需描述场景的最终状态，而无需关心 Three.js 的底层操作。
  • 可维护性高：通过组件化，您可以将复杂的 3D 场景分解为更小的、可重用的组件，从而提高代码的可读性和可维护性。
  • 与 React 生态系统无缝集成：您可以利用 React 的所有功能，如 Hooks、Context、Suspense 等，来管理 3D 场景的状态和交互。

缺点：

  • 抽象层开销：R3F 在 Three.js 之上增加了一个抽象层，这会引入一定的运行时开销。在某些极端情况下，这可能会影响性能。
  • 调试复杂：当出现问题时，您可能需要同时理解 React 和 Three.js 的内部机制，从而增加了调试的复杂性。

5.3 内存与垃圾回收 (Memory and GC)

| 特性 | 命令式 Three.js | 声明式 R3F (基于 React) Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three.js 是一个 Three

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注