随着前端技术的不断发展，3D图形渲染逐渐成为前端开发中的一个热门话题。Vue.js 是一个非常优秀的前端框架，而 Three.js 则是一个强大的 JavaScript 库，通过它可以轻松实现 3D 图形渲染。在这篇博客中，我们将介绍如何在 Vue3 项目中使用 Three.js 实现基本的 3D 图形渲染。下文不仅包含完整的代码示例，还会对每一步进行详细的解释，以帮助您更好地理解其实现过程。

环境准备

在开始之前，需要确保您的开发环境已经安装了以下工具：

• Node.js
• Vue CLI

如果之前从未安装过这些工具，可以分别访问 Node.js 官方网站 和 Vue CLI 官方文档 获取安装指南。

创建 Vue3 项目

首先，我们需要利用 Vue CLI 创建一个新的 Vue3 项目。

vue create vue-threejs-demo

在项目创建过程中，选择 Vue 3.x 版本即可。项目创建完成后，我们可以通过以下命令进入项目目录并启动开发服务器：

cd vue-threejs-demo
npm run serve

此时，打开浏览器访问 http://localhost:8080/，您将看到一个默认的 Vue3 欢迎页面。

安装 Three.js

接下来，我们需要安装 Three.js。通过 npm 安装 Three.js：

npm install three

创建 3D 渲染组件

在 src 目录下创建一个名为 ThreeScene.vue 的新组件。这个组件将负责 3D 场景的渲染工作。组件结构如下：

<template>
  <div ref="sceneContainer" class="scene-container"></div>
</template>

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

export default {
  name: 'ThreeScene',
  mounted() {
    this.initThree();
  },
  methods: {
    initThree() {
      // 场景
      this.scene = new THREE.Scene();
      
      // 相机
      const aspectRatio = this.$refs.sceneContainer.clientWidth / this.$refs.sceneContainer.clientHeight;
      this.camera = new THREE.PerspectiveCamera(75, aspectRatio, 0.1, 1000);
      this.camera.position.z = 5;

      // 渲染器
      this.renderer = new THREE.WebGLRenderer();
      this.renderer.setSize(this.$refs.sceneContainer.clientWidth, this.$refs.sceneContainer.clientHeight);
      this.$refs.sceneContainer.appendChild(this.renderer.domElement);

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

      // 渲染
      this.animate();
    },
    animate() {
      requestAnimationFrame(this.animate);

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

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

<style>
.scene-container {
  width: 100%;
  height: 100vh; 
}
</style>

让我们逐步解析这个组件：

1. 模板部分 (template): 这里定义了一个 div 元素，它将作为 Three.js 渲染 3D 场景的容器。
2. 引入 Three.js: 在脚本部分引用 Three.js 库。
3. 组件生命周期: 组件挂载完成 (mounted) 后，调用 initThree 方法初始化 3D 场景。
4. 初始化方法 (initThree):
   • 创建一个新的 THREE.Scene 对象，这是所有 3D 对象的容器。
   • 创建一个 THREE.PerspectiveCamera，设置视角、宽高比和视距，并将相机放置在 z = 5 的位置。
   • 创建一个 THREE.WebGLRenderer 渲染器，并将其尺寸设置为容器的宽和高。最后，将渲染器的 DOM 元素添加到容器中。
   • 使用 BoxGeometry 和 MeshBasicMaterial 创建一个简单的绿色立方体，并将其添加到场景中。
5. 动画方法 (animate): 使用 requestAnimationFrame 方法递归调用 animate 方法，使立方体不停旋转并重新渲染场景。

在主应用中使用组件

现在我们已经创建好 ThreeScene 组件，接下来需要在主应用中使用它。在 src/App.vue 文件中导入并注册 ThreeScene 组件：

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

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

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

<style>
#app {
  text-align: center;
}
</style>

这样，ThreeScene 组件就会被渲染到页面中，您应该可以看到一个缓慢旋转的绿色立方体。

结论

在这篇博客中，我们详细介绍了如何在 Vue3 项目中使用 Three.js 实现 3D 图形渲染。通过创建一个简单的 3D 场景，并不断地更新立方体的旋转状态，我们展示了如何将 Three.js 与 Vue3 结合使用。

当然，Three.js 的功能远不止这些，您可以添加光源、纹理、模型等，使场景更加复杂和真实。

---

最后问候亲爱的朋友们，并邀请你们阅读我的全新著作