Three.js 与 Vue/React 的结合：如何将 3D 场景嵌入前端框架

Three.js 与 Vue/React 的结合：如何将 3D 场景嵌入前端框架

Three.js 是一个强大的 JavaScript 3D 渲染库，提供了创建 3D 场景、渲染器、几何体、材质等功能。然而，在现代前端开发中，如何将它与 Vue 或 React 结合，实现更好的组件化开发，是一个常见需求。

本文将详细介绍如何将 Three.js 嵌入 Vue 和 React 项目，带你一步步完成 3D 场景的渲染和交互。

---

一、Three.js 嵌入前端框架的关键点

Three.js 的核心流程是直接操作 HTML 的 <canvas> 元素进行渲染，而 Vue 和 React 的组件化框架则强调将 DOM 的更新交由框架管理。因此，结合时需要注意以下几点：

1. 生命周期管理：确保 Three.js 的初始化、更新和销毁在框架组件生命周期内正确处理。
2. 性能优化：避免频繁的 DOM 操作，通过 requestAnimationFrame 实现高效渲染。
3. 事件绑定：处理鼠标、键盘等交互事件时，需要在 Three.js 和框架间协调。

---

二、在 Vue 中使用 Three.js

1. 安装依赖

在 Vue 项目中安装 Three.js：

npm install three

2. 创建一个基础 3D 场景

目录结构

假设项目目录如下：

src/
  components/
    ThreeScene.vue
  main.js

实现基础组件

<template>
  <div ref="threeContainer" class="three-container"></div>
</template>

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

export default {
   
  name: "ThreeScene",
  data() {
   
    return {
   
      scene: null,
      camera: null,
      renderer: null,
    };
  },
  mounted() {
   
    this.initThree();
    window.addEventListener("resize", this.onWindowResize);
  },
  beforeDestroy() {
   
    window.removeEventListener("resize", this.onWindowResize);
    this.disposeThree()