如何在 Vue.js 中集成 Three.js —— 创建一个旋转的 3D 立方体

在这篇文章中，我将向大家展示如何将 Three.js 与 Vue.js 结合，创建一个简单的 3D 场景，并展示一个旋转的立方体。通过这个简单的示例，你将学习到如何在 Vue 项目中集成 Three.js，以及如何创建动态的 3D 内容。

1. 安装 Three.js

首先，我们需要在项目中安装 Three.js。你可以使用 npm 或 yarn 来安装它。打开终端，进入你的 Vue 项目目录，运行以下命令：

javascript 复制代码

npm i three

2. 创建 Vue 组件

接下来，我们创建一个 Vue 组件来渲染 3D 立方体。在这个组件中，我们将通过 Three.js 来创建场景、相机、渲染器，以及一个旋转的立方体。

javascript 复制代码

<template>
  <div ref="threeCanvas" style="width: 100%; height: 100%"></div>
</template>

<script>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import * as THREE from 'three';

export default {
  name: 'ThreeExample',
  setup() {
    const threeCanvas = ref(null);

    onMounted(() => {
      // 创建一个 Three.js 场景
      const scene = new THREE.Scene();

      // 创建透视相机
      const camera = new THREE.PerspectiveCamera(
        75, // 视野角度
        window.innerWidth / window.innerHeight, // 宽高比
        0.1, // 最近可视距离
        1000 // 最远可视距离
      );

      // 创建 WebGL 渲染器
      const renderer = new THREE.WebGLRenderer();
      renderer.setSize(window.innerWidth, window.innerHeight); // 设置渲染器大小
      threeCanvas.value.appendChild(renderer.domElement); // 将渲染器添加到 DOM

      // 创建一个绿色的立方体
      const geometry = new THREE.BoxGeometry(1, 1, 1); // 创建立方体几何体
      const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); // 创建材质
      const cube = new THREE.Mesh(geometry, material); // 创建网格对象（立方体）
      scene.add(cube); // 将立方体添加到场景中

      // 设置相机的位置
      camera.position.z = 5;

      // 动画渲染函数
      const animate = function () {
        requestAnimationFrame(animate); // 请求下一帧动画

        // 旋转立方体
        cube.rotation.x += 0.01;
        cube.rotation.y += 0.01;

        // 渲染场景
        renderer.render(scene, camera);
      };

      animate(); // 启动动画

      // 处理窗口尺寸变化
      const handleResize = () => {
        const width = window.innerWidth;
        const height = window.innerHeight;

        // 更新渲染器大小
        renderer.setSize(width, height);

        // 更新相机的纵横比
        camera.aspect = width / height;
        camera.updateProjectionMatrix();
      };

      // 监听窗口大小变化
      window.addEventListener('resize', handleResize);

      // 清理资源
      onBeforeUnmount(() => {
        window.removeEventListener('resize', handleResize);
        renderer.dispose();
      });
    });

    return {
      threeCanvas
    };
  }
};
</script>

<style scoped>
/* 可以根据需要添加一些样式 */
</style>

3. 代码解析

3.1 创建 Three.js 场景和相机

scene：我们首先创建了一个 Three.js 的场景，它是所有 3D 对象的容器。
camera：然后我们创建了一个透视相机，设置了视野角度、纵横比、最近可视距离和最远可视距离。相机的位置会影响我们看到的场景。

3.2 创建渲染器

我们使用了 THREE.WebGLRenderer 创建了一个 WebGL 渲染器，并通过 setSize 方法设置了渲染器的宽度和高度，使得渲染器能够适应浏览器窗口的尺寸。

3.3 创建 3D 立方体

接着，我们创建了一个 THREE.BoxGeometry 立方体几何体，并为它指定了一个绿色的材质 THREE.MeshBasicMaterial。最后，通过 THREE.Mesh 将几何体和材质组合成一个 3D 物体，并将其添加到场景中。

3.4 动画效果

为了让立方体旋转，我们创建了一个 animate 函数，并通过 requestAnimationFrame 来使动画保持连续运行。在每一帧中，立方体会顺时针旋转，效果非常流畅。

3.5 处理窗口尺寸变化

为了响应窗口尺寸变化，我们监听了 resize 事件。当窗口大小发生变化时，我们会调整渲染器的尺寸，并重新计算相机的纵横比，以确保画面不会变形。

3.6 组件销毁时的清理工作

当组件销毁时，我们会移除 resize 事件监听器，并释放渲染器的资源，以避免内存泄漏。

4. 结果展示

当你在页面中加载这个 Vue 组件时，你会看到一个绿色的立方体，它会随着页面加载而旋转。并且当你调整浏览器窗口大小时，立方体的显示效果会自动调整。