将 three.js 引入 Vue 3，探索 3D 几何世界

在现代网络开发的浪潮中，three.js 犹如一颗璀璨的明星，为我们开启了构建 captivating 3D 体验的大门。它凭借着 user-friendly 的 API 和丰富的功能，使得将虚拟世界无缝融入 Vue 3 应用程序成为可能。本文将引领你踏上一段奇妙的旅程，探索如何在 Vue 3 中运用 three.js 绘制一些基本的几何体，揭开 3D 可视化神秘面纱的一角。

将 three.js 引入 Vue 3 项目

在 Vue 3 应用程序中集成 three.js 其实并不复杂。首先，我们需要借助 npm 安装 three.js，只需在终端中执行以下命令即可：

npm install three

安装完成后，便可在 Vue 组件中导入 three.js，代码如下：

import * as THREE from 'three';

搭建场景和相机

渲染 3D 场景，犹如在搭建一个舞台，而场景对象和相机对象则是这个舞台的基石。场景对象代表着三维空间，而相机对象则定义了我们观察这个空间的视角。在 Vue 3 中，我们可以利用 Vue 的 composition API 来创建场景和相机：

import { ref, onMounted } from 'vue';

export default {
  setup() {
    const scene = ref(new THREE.Scene());
    const camera = ref(new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000));

    onMounted(() => {
      // 将场景和相机添加到 three.js 渲染器中
      const renderer = new THREE.WebGLRenderer();
      renderer.setSize(window.innerWidth, window.innerHeight);
      document.body.appendChild(renderer.domElement);

      // 创建动画循环以渲染场景
      const animate = () => {
        renderer.render(scene.value, camera.value);
        requestAnimationFrame(animate);
      };

      animate();
    });

    return {
      scene,
      camera,
    };
  },
};

这段代码创建了一个场景和一个透视相机。透视相机模拟了人眼观察世界的方式，能够产生近大远小的透视效果，使场景更具立体感。

添加几何体

现在，我们的舞台已经搭建完毕，可以开始添加一些演员了，也就是几何体。three.js 提供了丰富的几何体类型，例如立方体、圆柱体、球体等等。下面演示如何在 Vue 3 中创建这些形状：

import { ref } from 'vue';

export default {
  setup() {
    const scene = ref(new THREE.Scene());

    onMounted(() => {
      // 创建一个立方体几何体
      const geometry = new THREE.BoxGeometry(1, 1, 1);
      const material = new THREE.MeshLambertMaterial({ color: 0xff0000 });
      const cube = new THREE.Mesh(geometry, material);

      // 将立方体添加到场景中
      scene.value.add(cube);
    });

    return {
      scene,
    };
  },
};

这段代码创建了一个红色的立方体。BoxGeometry 定义了立方体的形状，MeshLambertMaterial 定义了立方体的材质和颜色，Mesh 则将几何体和材质组合起来，创建了一个可以被渲染的立方体对象。

添加光照

为了让我们的几何体能够被看见，舞台上还需要灯光。three.js 提供了多种光源类型，例如环境光、点光源、聚光灯等等。下面演示如何在 Vue 3 中添加环境光：

import { ref } from 'vue';

export default {
  setup() {
    const scene = ref(new THREE.Scene());

    onMounted(() => {
      // 创建一个环境光
      const light = new THREE.AmbientLight(0xffffff, 0.5);

      // 将环境光添加到场景中
      scene.value.add(light);
    });

    return {
      scene,
    };
  },
};

这段代码创建了一个白色的环境光。环境光会均匀地照亮场景中的所有物体，就像自然光一样。

常见问题解答

1. 如何改变几何体的颜色？
   可以通过修改材质的颜色属性来改变几何体的颜色，例如 material.color.set(0x00ff00) 可以将颜色设置为绿色。

2. 如何让几何体旋转？
   可以在动画循环中修改几何体的旋转属性，例如 cube.rotation.x += 0.01 可以让立方体绕 x 轴旋转。

3. 如何添加其他类型的几何体？
   three.js 提供了丰富的几何体类型，例如 SphereGeometry、CylinderGeometry 等等，可以通过查阅 three.js 的文档来了解如何创建这些几何体。

4. 如何添加其他类型的灯光？
   three.js 也提供了多种光源类型，例如 PointLight、SpotLight 等等，可以通过查阅 three.js 的文档来了解如何创建这些灯光。

5. 如何加载外部模型？
   可以使用 three.js 的加载器来加载外部模型，例如 GLTFLoader 可以加载 glTF 格式的模型。

通过本文的介绍，我们初步了解了如何在 Vue 3 中使用 three.js 绘制简单的 3D 几何体，也体会到了光照在 3D 场景中的重要作用。这仅仅是 three.js 强大功能的冰山一角，它能够帮助我们构建各种各样的 3D 体验，为 Vue 应用程序增添新的维度。随着我们不断深入探索，更多精彩的可能性将会呈现在我们面前。