在 Vue3 项目中安装和配置 Three.js

简介

Three.js 是一个轻量级的 WebGL 封装库，用于在浏览器中渲染复杂的 3D 图形。它提供了便捷的 API，可以快速构建 3D 场景、对象和动画。

Vue.js 是一个渐进式 JavaScript 框架，擅长构建用户界面。其响应式数据绑定和组件系统使得复杂的交互开发更加简单。

通过将 Three.js 和 Vue.js 结合，我们可以利用 Vue 的组件化和响应式特性，轻松管理和更新 3D 场景中的对象和状态，从而创建高效且交互性强的 3D 应用。

创建一个基于 Vite 的 Vue3 项目

初始化项目

pnpm create vite@latest vue-threejs-demo --template vue
cd vue-threejs-demo
npm install

安装 Three.js

npm install three

运行项目

npm run dev

至此，我们已经创建了一个基于 Vite 的 Vue3 项目，并安装了 Three.js 库。

在 Vue 组件中集成 Three.js

目录

以下是初始的目录结构

vue-threejs-demo/
├── src/
│   ├── assets/         # 放置静态资源
│   ├── components/     # 放置 Vue 组件
│   │   ├── ThreeScene.vue
│   ├── App.vue         # 应用根组件
│   ├── main.js         # 项目入口文件
│   └── styles/         # 可选：放置全局样式
├── public/             # 放置静态文件
├── package.json
├── vite.config.js
└── README.md

创建 ThreeScene.vue 组件

创建文件夹和文件： 在项目的 src/components 文件夹下，新建一个文件 ThreeScene.vue，用于管理 3D 场景逻辑。

src/
├── components/
│   └── ThreeScene.vue

在组件中初始化 Three.js 场景： 将以下代码复制到 ThreeScene.vue 文件中：

<template>
  <div id="three-container">
    <canvas ref="threeCanvas"></canvas>
  </div>
</template>

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

export default {
  name: "ThreeScene",
  mounted() {
    this.initThree();
  },
  methods: {
    initThree() {
      const canvas = this.$refs.threeCanvas;

      // 初始化场景、相机和渲染器
      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({ canvas });
      renderer.setSize(window.innerWidth, window.innerHeight);

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

      // 动画循环
      function animate() {
        requestAnimationFrame(animate);
        cube.rotation.x += 0.01;
        cube.rotation.y += 0.01;
        renderer.render(scene, camera);
      }

      animate();
    },
  },
};
</script>

<style scoped>
#three-container {
  width: 100%;
  height: 100vh;
}
canvas {
  display: block;
  width: 100%;
  height: 100%;
}
</style>

修改 App.vue 文件

将 ThreeScene.vue 组件引入并使用。

App.vue 文件结构：

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

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

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

<style>
#app {
  margin: 0;
  padding: 0;
  overflow: hidden;
}
</style>

修改 main.js 文件

import { createApp } from "vue";
import App from "./App.vue";

const app = createApp(App);
app.mount("#app");

完整的文件结构

完成上述步骤后，项目的文件结构应该类似于以下：

vue-threejs-demo/
├── src/
│   ├── assets/         # 可选：存放图片、材质等静态资源
│   ├── components/
│   │   └── ThreeScene.vue   # 3D 场景组件
│   ├── styles/         # 可选：全局样式文件夹
│   │   └── global.css  # 可选：定义全局 CSS 样式
│   ├── App.vue         # 根组件
│   ├── main.js         # 入口文件
├── public/             # 存放静态文件
│   └── index.html      # HTML 模板
├── package.json        # 项目信息
├── vite.config.js      # Vite 配置文件
└── README.md           # 项目说明

运行项目

完成后，运行以下命令启动开发服务器：

npm run dev

打开浏览器访问 http://localhost:5173 你将看到一个旋转的绿色立方体在页面中显示。

补充说明

• 关于动态加载材质：将材质文件（如图片）放置在 src/assets 或 public 文件夹中，并通过 Three.js 的 TextureLoader 加载。

• 关于响应式调整：可以监听窗口大小的变化，在 initThree 方法中加入如下代码：

window.addEventListener("resize", () => {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
});