如何利用 Vue 结合 `Three.js` 或 `Babylon.js`，构建一个高性能的 3D 可视化应用？

各位观众老爷们，今天咱们来聊聊怎么用 Vue.js 这个前端小清新，和 Three.js 或者 Babylon.js 这俩 3D 大佬，一起搞个高性能的 3D 可视化应用出来。 这可是个硬核话题，但别怕，咱们一步一步来，保证让你听得明白，学得会，以后也能在妹子（或者汉子）面前秀一把操作。

开场白：Vue + Three/Babylon：前端与 3D 的激情碰撞

想象一下，Vue.js 就像一个精明的管家，负责管理你的页面结构、数据和交互。而 Three.js 或 Babylon.js 就像一个技艺精湛的雕塑家，负责在浏览器里创造栩栩如生的 3D 世界。 把它们俩结合起来，就能打造出既有强大的数据驱动能力，又有酷炫 3D 效果的应用。 听起来是不是有点小激动？

第一幕：选角：Three.js vs. Babylon.js

首先，咱们得选个 “3D 引擎男/女主角”。 Three.js 和 Babylon.js 都是 JavaScript 世界里顶尖的 3D 引擎，各有千秋。 咱们用表格来简单对比一下：

特性	Three.js	Babylon.js
学习曲线	相对平缓，社区庞大，教程丰富	稍微陡峭，但官方文档非常完整，示例丰富
功能	核心功能精简，生态丰富，插件众多	功能全面，开箱即用，PBR 渲染出色
性能	优化空间大，需要手动精细调整	优化良好，场景管理更智能
适用场景	各种 3D 应用，尤其适合需要高度定制的场景	游戏开发、产品展示、虚拟现实等，全能型选手
社区活跃度	非常活跃	非常活跃

简单来说，如果你喜欢自由发挥，喜欢折腾，Three.js 绝对适合你。 如果你希望开箱即用，快速上手，Babylon.js 也是个不错的选择。 今天，为了照顾大多数观众，咱们先拿 Three.js 开刀，毕竟入门相对容易一些。 不过，别担心，学会了 Three.js，再学 Babylon.js 也是水到渠成的事情。

第二幕：舞台搭建：Vue 项目初始化

首先，用 Vue CLI 快速创建一个 Vue 项目：

vue create my-3d-app

一路回车，选择默认配置就行。 然后，安装 Three.js：

cd my-3d-app
npm install three

接下来，创建一个 components/ThreeScene.vue 组件，用来放置我们的 3D 场景代码。

第三幕：剧本编写：Three.js 场景初始化

在 ThreeScene.vue 组件中，编写如下代码：

<template>
  <div ref="container" style="width: 100%; height: 500px;"></div>
</template>

<script>
import * as THREE from 'three';

export default {
  mounted() {
    this.init();
    this.animate();
  },
  methods: {
    init() {
      // 1. 创建场景
      this.scene = new THREE.Scene();

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

      // 3. 创建渲染器
      this.renderer = new THREE.WebGLRenderer({ antialias: true });
      this.renderer.setSize(window.innerWidth, 500);
      this.$refs.container.appendChild(this.renderer.domElement);

      // 4. 创建物体
      const geometry = new THREE.BoxGeometry();
      const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
      this.cube = new THREE.Mesh(geometry, material);
      this.scene.add(this.cube);

      // 5. 添加环境光
      const ambientLight = new THREE.AmbientLight(0x404040); // soft white light
      this.scene.add(ambientLight);

      // 6. 添加方向光
      const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
      directionalLight.position.set(1, 1, 1);
      this.scene.add(directionalLight);
    },
    animate() {
      requestAnimationFrame(this.animate);

      this.cube.rotation.x += 0.01;
      this.cube.rotation.y += 0.01;

      this.renderer.render(this.scene, this.camera);
    },
  },
};
</script>

这段代码做了以下几件事：

1. 创建场景 (scene): 想象成一个空旷的舞台，所有 3D 物体都在这里表演。
2. 创建相机 (camera): 就像摄像机一样，决定了我们从哪个角度观看场景。 PerspectiveCamera 是一种透视相机，模拟人眼的视觉效果。
3. 创建渲染器 (renderer): 负责把 3D 场景绘制到屏幕上。 WebGLRenderer 利用 WebGL 技术，提供高性能的 3D 渲染能力。
4. 创建物体 (cube): 这里创建了一个绿色的立方体，并添加到场景中。
5. 添加光照: 让场景更有立体感和真实感。 这里添加了环境光和方向光。
6. 动画循环 (animate): 不断旋转立方体，并重新渲染场景，从而形成动画效果。 requestAnimationFrame 是一种高效的动画 API，可以保证动画的流畅性。

第四幕：演员登场：在 Vue 中使用 ThreeScene 组件

在 App.vue 中，引入 ThreeScene 组件：

<template>
  <div id="app">
    <ThreeScene />
  </div>
</template>

<script>
import ThreeScene from './components/ThreeScene.vue';

export default {
  components: {
    ThreeScene,
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

运行项目：

npm run serve

如果一切顺利，你就能看到一个旋转的绿色立方体了！ 恭喜你，迈出了 3D 可视化的第一步！

第五幕：性能优化：让 3D 飞起来

光有 3D 效果还不够，咱们还得让它跑得飞快才行。 下面是一些常用的性能优化技巧：

1. 减少 Draw Calls: Draw Calls 是 CPU 向 GPU 发出的绘制指令。 Draw Calls 越多，CPU 和 GPU 的负担就越重。 尽量合并物体，使用 BufferGeometry 和 InstancedMesh 来减少 Draw Calls。

   • BufferGeometry: 更高效的几何体数据结构，可以直接传递给 GPU。
   • InstancedMesh: 可以渲染成千上万个相同的物体，而只需要一次 Draw Call。

   例如，如果要渲染 1000 个立方体，不要这样写：

   for (let i = 0; i < 1000; i++) {
     const geometry = new THREE.BoxGeometry();
     const material = new THREE.MeshBasicMaterial({ color: Math.random() * 0xffffff });
     const cube = new THREE.Mesh(geometry, material);
     scene.add(cube);
   }

   而应该这样写：

   const geometry = new THREE.BoxGeometry();
   const material = new THREE.MeshBasicMaterial({ color: Math.random() * 0xffffff });
   const mesh = new THREE.InstancedMesh(geometry, material, 1000);
   
   for (let i = 0; i < 1000; i++) {
     const dummy = new THREE.Object3D();
     dummy.position.set(Math.random() * 10, Math.random() * 10, Math.random() * 10);
     dummy.updateMatrix();
     mesh.setMatrixAt(i, dummy.matrix);
   }
   
   scene.add(mesh);

   InstancedMesh 的用法稍微复杂一些，但效果非常明显。

2. 使用 LOD (Level of Detail): 根据物体距离相机的远近，使用不同精度的模型。 距离相机越远的物体，使用精度越低的模型，可以减少 GPU 的渲染压力。

   const lod = new THREE.LOD();
   
   const geometryHigh = new THREE.SphereGeometry(1, 32, 32);
   const geometryLow = new THREE.SphereGeometry(1, 16, 16);
   const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
   
   const meshHigh = new THREE.Mesh(geometryHigh, material);
   const meshLow = new THREE.Mesh(geometryLow, material);
   
   lod.addLevel(meshHigh, 0); // 距离相机 0 时，使用高精度模型
   lod.addLevel(meshLow, 20); // 距离相机 20 时，使用低精度模型
   
   scene.add(lod);

   当物体距离相机超过 20 个单位时，会自动切换到低精度模型。

3. 材质优化: 尽量使用简单的材质，避免复杂的着色器。 使用纹理压缩技术，减少纹理的内存占用。

   • 压缩纹理: 使用 .ktx 或 .dds 等压缩纹理格式，可以显著减少纹理的体积。

4. 阴影优化: 阴影会消耗大量的性能。 如果不需要高质量的阴影，可以关闭阴影效果。 如果需要阴影，尽量使用简单的阴影算法，并控制阴影的范围。

   renderer.shadowMap.enabled = true; // 启用阴影
   renderer.shadowMap.type = THREE.PCFSoftShadowMap; // 设置阴影类型
   
   directionalLight.castShadow = true; // 允许光照投射阴影
   directionalLight.shadow.mapSize.width = 512; // 阴影贴图尺寸
   directionalLight.shadow.mapSize.height = 512;

   合理设置阴影贴图的尺寸，可以平衡阴影质量和性能。

5. 避免频繁创建和销毁物体: 频繁的内存分配和释放会影响性能。 尽量复用物体，或者使用对象池来管理物体。

6. 利用 Web Worker: 将耗时的计算任务放到 Web Worker 中执行，避免阻塞主线程。 例如，可以在 Web Worker 中进行物理模拟、路径规划等计算。

7. 使用性能分析工具: Three.js 提供了 stats.js 工具，可以实时监控渲染帧率 (FPS)、内存占用等指标。 利用这些指标，可以定位性能瓶颈，并进行针对性的优化。

   import Stats from 'three/examples/jsm/libs/stats.module.js';
   
   // ...
   
   this.stats = new Stats();
   this.$refs.container.appendChild(this.stats.dom);
   
   // ...
   
   animate() {
     requestAnimationFrame(this.animate);
   
     // ...
   
     this.stats.update();
   }

   stats.js 会在屏幕上显示一个小的性能监控面板。

8. 使用 Vue 的 shouldComponentUpdate 或 memo: 避免不必要的组件渲染。 如果组件的 props 没有变化，可以跳过渲染，提高性能。

   <template>
     <div>{{ data }}</div>
   </template>
   
   <script>
   export default {
     props: ['data'],
     shouldComponentUpdate(nextProps, nextState) {
       return nextProps.data !== this.data; // 只有 data 发生变化时才更新
     },
   };
   </script>

   或者使用 Vue 3 的 memo：

   <template>
     <div>{{ data }}</div>
   </template>
   
   <script setup>
   import { defineProps, memo } from 'vue';
   
   const props = defineProps(['data']);
   
   memo(() => [props.data]); // 只有 props.data 发生变化时才更新
   </script>

第六幕：数据驱动：Vue 与 Three.js 的完美结合

Vue 的数据绑定机制，可以让我们轻松地控制 Three.js 场景中的物体属性。 例如，我们可以用 Vue 的 v-model 指令，来控制立方体的颜色：

<template>
  <div>
    <div ref="container" style="width: 100%; height: 500px;"></div>
    <input type="color" v-model="color" />
  </div>
</template>

<script>
import * as THREE from 'three';

export default {
  data() {
    return {
      color: '#00ff00',
    };
  },
  watch: {
    color(newColor) {
      this.cube.material.color.set(newColor);
    },
  },
  mounted() {
    this.init();
    this.animate();
  },
  methods: {
    init() {
      // ... (省略之前的代码)

      const geometry = new THREE.BoxGeometry();
      this.material = new THREE.MeshBasicMaterial({ color: this.color }); // 使用 data 中的 color
      this.cube = new THREE.Mesh(geometry, this.material);
      this.scene.add(this.cube);

      // ... (省略之前的代码)
    },
    animate() {
      requestAnimationFrame(this.animate);

      this.cube.rotation.x += 0.01;
      this.cube.rotation.y += 0.01;

      this.renderer.render(this.scene, this.camera);
    },
  },
};
</script>

当颜色选择器的值发生变化时，watch 监听器会自动更新立方体的颜色。 这就是 Vue 数据驱动的魅力！

第七幕：Babylon.js 的友情客串

如果想尝试 Babylon.js，也很简单。 首先，安装 Babylon.js：

npm install babylonjs

然后，修改 ThreeScene.vue 组件的代码：

<template>
  <div ref="container" style="width: 100%; height: 500px;"></div>
</template>

<script>
import * as BABYLON from 'babylonjs';
import 'babylonjs-loaders';

export default {
  mounted() {
    this.init();
  },
  methods: {
    init() {
      // 1. 创建引擎
      this.engine = new BABYLON.Engine(this.$refs.container, true);

      // 2. 创建场景
      this.scene = new BABYLON.Scene(this.engine);

      // 3. 创建相机
      this.camera = new BABYLON.ArcRotateCamera("camera", 0, Math.PI / 2, 5, BABYLON.Vector3.Zero(), this.scene);
      this.camera.attachControl(this.$refs.container, true);

      // 4. 创建光照
      const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), this.scene);

      // 5. 创建物体
      const box = BABYLON.MeshBuilder.CreateBox("box", {}, this.scene);

      // 6. 运行引擎
      this.engine.runRenderLoop(() => {
        this.scene.render();
      });

      // 7. 监听窗口大小变化
      window.addEventListener("resize", () => {
        this.engine.resize();
      });
    },
  },
};
</script>

Babylon.js 的代码风格和 Three.js 有些不同，但核心概念是相似的。 主要区别在于：

• 引擎 (Engine): Babylon.js 使用 Engine 来管理渲染循环和资源加载。
• 场景 (Scene): 和 Three.js 的 Scene 类似，用于存放 3D 物体。
• 相机 (Camera): Babylon.js 提供了多种相机类型，例如 ArcRotateCamera，可以围绕目标旋转。
• 光照 (Light): Babylon.js 提供了多种光照类型，例如 HemisphericLight，模拟半球形光照。
• MeshBuilder: Babylon.js 提供了 MeshBuilder 工具，可以快速创建各种基本形状。

第八幕：闭幕：无限可能，等你探索

好了，今天的讲座就到这里。 我们学习了如何使用 Vue.js 结合 Three.js 或 Babylon.js，构建一个高性能的 3D 可视化应用。 这只是一个开始，3D 世界还有无限可能，等待你去探索。 记住，实践是检验真理的唯一标准，多写代码，多尝试，你就能成为 3D 大佬！ 祝大家玩得开心！