Three.js Vue 教程：如何创建交互式 3D 场景

一、安装 Three.js 与 Vue.js

要创建 3D 场景，我们需要使用 Three.js 库。它是用于创建和呈现 3D 图像的 JavaScript 库。我们还需要使用 Vue.js，因为它提供了一些很好的方式来管理我们的应用程序状态。首先，在我们的项目中安装这两个库：

npm i three vue-threejs

现在，我们可以创建我们的 Vue.js 组件来开始构建我们的场景。

二、创建 Three.js 场景和渲染器

要创建 Three.js 场景，我们需要使用下面的代码：

import { Scene, PerspectiveCamera, WebGLRenderer } from 'three';
export default {
  name: 'ThreeRenderer',
  data() {
    return {
      scene: null,
      camera: null,
      renderer: null,
      width: null,
      height: null,
    };
  },
  mounted() {
    this.init();
    this.animate();
  },
  methods: {
    init() {
      const width = this.$el.clientWidth;
      const height = this.$el.clientHeight;
      const scene = new Scene();
      const camera = new PerspectiveCamera(
        75,
        width / height,
        0.1,
        1000,
      );
      const renderer = new WebGLRenderer();
      renderer.setSize(width, height);
      this.$el.appendChild(renderer.domElement);
      this.scene = scene;
      this.camera = camera;
      this.renderer = renderer;
      this.width = width;
      this.height = height;
    },
    animate() {
      requestAnimationFrame(this.animate);
      this.renderer.render(this.scene, this.camera);
    },
  },
};

这将创建一个 Three.js 场景、相机和渲染器，并将渲染器附加到 Vue.js 组件中的元素上。我们可以使用 animate 方法来确保每个帧都进行渲染。

三、添加 3D 模型

在场景中添加 3D 模型比较简单。我们只需要将模型文件下载到我们的项目中，然后使用 Three.js 的加载器来加载模型并将其添加到场景中：

import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
// ...
methods: {
  // ...
  loadModel() {
    const loader = new GLTFLoader();
    loader.load('/path/to/your/model.gltf', (gltf) => {
      this.scene.add(gltf.scene);
    });
  },
},
mounted() {
  // ...
  this.loadModel();
},

在这个例子中，我们使用了 GLTFLoader 来加载 3D 模型。我们可以使用这个方法来加入新的内容到场景中。

四、使用 Three.js 来交互

要使用 Three.js 来处理用户输入和交互，我们可以将其添加到我们使用的事件监听器中：

mounted() {
  // ...
  this.$el.addEventListener('mousedown', this.onDocumentMouseDown);
},
methods: {
  // ...
  onDocumentMouseDown(event) {
    event.preventDefault();
    // 获取鼠标的x和y坐标
    const mouse = new Vector2();
    mouse.x = (event.clientX / this.width) * 2 - 1;
    mouse.y = -(event.clientY / this.height) * 2 + 1;
    // 射线计算
    const raycaster = new Raycaster();
    raycaster.setFromCamera(mouse, this.camera);
    // 获取相交的对象
    const intersects = raycaster.intersectObjects(this.scene.children);
    // 处理相交的对象
    if (intersects.length > 0) {
      const object = intersects[0].object;
      console.log(`Intersected ${object.name}`);
    }
  },
},

在这个例子中，我们使用了 Three.js 中的射线计算来确定场景中的哪个对象被用户点击。另外，我们还使用了事件监听器来处理在场景中的鼠标事件。

五、绑定 Vue.js 状态和 Three.js 属性

在我们的 Vue.js 应用程序中，我们可以使用 v-bind 指令来将 Vue.js 组件的状态绑定到 Three.js 属性。例如，我们可以使用下面的代码将相机的位置绑定到 Vue.js 组件的属性：

<template>
  <div v-bind:style="{ 'height': '300px' }" v-on:resize="onResize"></div>
</template>

<script>
// ...
data() {
  return {
    // ...
    camera: null,
  };
},
methods: {
  onResize() {
    const width = this.$el.clientWidth;
    const height = this.$el.clientHeight;
    this.camera.aspect = width / height;
    this.camera.updateProjectionMatrix();
    this.renderer.setSize(width, height);
    this.width = width;
    this.height = height;
  },
},
</script>

在这个例子中，我们将组件的大小绑定到视窗的大小。我们可以使用相同的模式来将其他属性绑定到 Vue.js 组件的状态上。

六、总结

在这篇文章中，我们学习了如何使用 Three.js 和 Vue.js 创建交互式的 3D 场景。我们了解到了如何创建场景、相机和渲染器，如何将 3D 模型添加到场景中，以及如何使用 Three.js 来监听用户交互。最后，我们还讨论了如何将 Vue.js 应用程序的状态绑定到 Three.js 属性。