在 Vue 中使用 Three.js 创建交互式 3D 场景

在现代 Web 开发中，通过在页面中嵌入 3D 场景，可以为用户提供更加丰富和交互性的体验。Three.js 是一款强大的 3D JavaScript 库，它简化了在浏览器中创建复杂 3D 场景的过程。本文将介绍如何在 Vue 中使用 Three.js，创建一个简单的交互式 3D 场景。

1. Three.js 简介

Three.js 是一款轻量级的 3D 库，它建立在 WebGL 之上，提供了创建复杂 3D 场景所需的一切。Three.js 的主要特点包括：

跨平台： Three.js 可以在各种浏览器和设备上运行，包括移动端。
简化开发： 提供了易于使用的 API，简化了创建 3D 场景的复杂性。
活跃社区： Three.js 拥有庞大的社区支持，有丰富的文档和示例。

2. 在 Vue 项目中引入 Three.js

首先，通过 npm 安装 Three.js：

bash 复制代码

npm install three

然后，在 Vue 组件中引入 Three.js：

javascript 复制代码

import * as THREE from 'three';

3. 创建基本的 Three.js 场景

接下来，我们将创建一个简单的 Three.js 场景，其中包含一个立方体和一个平面。

vue 复制代码

<template>
  <div ref="scene"></div>
</template>

<script>
export default {
  mounted() {
    // 创建场景
    const scene = new THREE.Scene();

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

    // 创建渲染器
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    this.$refs.scene.appendChild(renderer.domElement);

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

    // 创建平面
    const planeGeometry = new THREE.PlaneGeometry(5, 5);
    const planeMaterial = new THREE.MeshBasicMaterial({ color: 0xaaaaaa, side: THREE.DoubleSide });
    const plane = new THREE.Mesh(planeGeometry, planeMaterial);
    plane.rotation.x = Math.PI / 2;
    plane.position.y = -2;
    scene.add(plane);

    // 渲染场景
    const animate = () => {
      requestAnimationFrame(animate);
      cube.rotation.x += 0.01;
      cube.rotation.y += 0.01;
      renderer.render(scene, camera);
    };

    animate();
  }
}
</script>

<style>
  #scene {
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>

在上述代码中，我们创建了一个简单的场景，包括一个立方体和一个平面。mounted 钩子中的代码用于初始化 Three.js 场景，创建相机、渲染器以及几何体，然后通过动画函数实现场景的旋转效果。

4. 添加交互性

为了使场景更加交互，我们可以使用 Three.js 提供的 Raycaster 来实现鼠标交互。

vue 复制代码

<template>
  <div ref="scene"></div>
</template>

<script>
export default {
  data() {
    return {
      raycaster: new THREE.Raycaster(),
      mouse: new THREE.Vector2()
    };
  },
  mounted() {
    // ...（略去上述代码）

    // 添加鼠标事件监听器
    document.addEventListener('mousemove', this.onMouseMove, false);

    // ...（略去上述代码）
  },
  methods: {
    onMouseMove(event) {
      // 计算鼠标位置
      this.mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
      this.mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;

      // 通过 Raycaster 获取交互对象
      this.raycaster.setFromCamera(this.mouse, this.camera);
      const intersects = this.raycaster.intersectObjects(this.scene.children);

      // 如果有交互对象，执行相应操作
      if (intersects.length > 0) {
        console.log('Interacted with', intersects[0].object);
      }
    }
  },
  // ...（略去上述代码）
}
</script>

在上述代码中，我们添加了鼠标移动事件监听器 onMouseMove，通过 Raycaster 计算鼠标在场景中的位置，并判断是否与场景中的对象发生交互。如果有交互对象，可以执行相应的操作。

5. 应用场景举例

5.1 在网页中嵌入 3D 模型

通过 Three.js，我们可以在网页中嵌入各种 3D 模型，提供更加生动的展示效果。例如，在 Vue 中嵌入一个 3D 模型：

javascript 复制代码

import * as THREE from 'three';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';

export default {
  mounted() {
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    this.$refs.scene.appendChild(renderer.domElement);

    const loader = new GLTFLoader();

    loader.load('/path/to/your/model.gltf', (gltf) => {
      scene.add(gltf.scene);
    });

    camera.position.z = 5;

    const animate = () => {
      requestAnimationFrame(animate);
      renderer.render(scene, camera);
    };

    animate();
  }
}

5.2 3D 数据可视化

使用 Three.js 还可以在数据可视化领域创造出引人入胜的交互式体验。通过将数据以立体的形式呈现给用户，我们能够深入挖掘统计数据、地理信息等信息的内在规律，使得用户更直观地理解复杂的关系和趋势。这种立体呈现的可视化效果不仅增加了数据呈现的吸引力，同时也提供了更深层次的沉浸感，使用户能够更全面、更直观地理解数据所传达的信息。

举例来说，当处理地理信息时，Three.js 可以帮助我们创建立体的地图和地形模型，使用户可以沉浸式地探索地理空间。在统计数据方面，可以通过 Three.js 制作立体的柱状图、饼图等，以一种更生动的方式呈现数据的分布和变化趋势。这样的交互式数据可视化不仅使用户能够更好地理解数据，还能够激发用户的好奇心和探索欲望。

6. 总结

通过在 Vue 中使用 Three.js，我们可以轻松地创建交互式 3D 场景，并将其集成到我们的 Web 项目中。这不仅为用户提供了更加生动的体验，还可以应用于诸如产品展示、数据可视化等多个领域。在实际应用中，可以根据项目需求选择合适的 Three.js 版本和插件，以满足更高层次的开发需求。