Vue.js 自定义 3D 饼图组件

2024-02-16 07:29:23

在现代数据可视化领域，3D 图表因其独特的交互性和视觉效果而受到越来越多开发者的青睐。特别是在 Vue.js 项目中，如何高效地集成 3D 图表成为一个值得探讨的问题。本文将详细介绍如何使用 Vue.js 和 Three.js 构建一个自定义的 3D 饼图组件，并提供详细的代码示例和操作步骤。

组件的架构

构建一个 Vue.js 自定义 3D 饼图组件，我们需要考虑以下几个关键部分：

模板：定义组件的视觉表示，包括场景、相机和光源。
脚本：处理组件的逻辑和交互性，包括数据的处理、饼图的创建和用户交互。
样式：定义组件的外观和样式，包括饼图的配色方案和文本标签。

创建场景和相机

首先，我们需要设置 Three.js 的基本场景和相机。以下是创建场景和相机的代码示例：

// 设置场景
const scene = new THREE.Scene();

// 创建相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

处理数据和创建饼图

接下来，我们需要处理数据并创建饼图。假设我们有一个包含饼图数据的数组：

// 假设 data 是包含饼图数据的数组
const data = [
  { label: "Slice 1", value: 10 },
  { label: "Slice 2", value: 20 },
  { label: "Slice 3", value: 30 },
];

// 创建饼图几何体
const geometry = new THREE.PieGeometry(1, data.length, Math.PI / 2);

// 创建材质，为每个饼图片段设置不同的颜色
const materials = data.map((item) => new THREE.MeshLambertMaterial({ color: 0xffffff }));

// 创建网格并将其添加到场景中
const pie = new THREE.Mesh(geometry, materials);
scene.add(pie);

用户交互

为了增强用户体验，我们可以添加一些用户交互功能，例如监听窗口大小调整事件和鼠标移动事件：

// 监听窗口大小调整事件并更新相机和渲染器
window.addEventListener("resize", () => {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
});

// 监听鼠标移动事件并旋转饼图
window.addEventListener("mousemove", (event) => {
  const mouseX = event.clientX;
  const mouseY = event.clientY;
  pie.rotation.y = mouseX * 0.001;
  pie.rotation.x = mouseY * 0.001;
});

使用组件

最后，我们可以在 Vue.js 组件中使用上述逻辑。以下是一个完整的 Vue.js 组件示例：

<template>
  <div>
    <div id="three-container"></div>
  </div>
</template>

<script>
import { ref, onMounted, onUnmounted } from "vue";
import * as THREE from "three";
import { PieChart } from "./PieChart.js";

export default {
  setup() {
    const containerRef = ref(null);
    let renderer;
    let scene;
    let camera;

    onMounted(() => {
      // 创建场景、相机和渲染器
      scene = new THREE.Scene();
      camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
      camera.position.z = 5;
      renderer = new THREE.WebGLRenderer({ antialias: true });
      renderer.setSize(window.innerWidth, window.innerHeight);
      containerRef.value.appendChild(renderer.domElement);

      // 创建饼图组件并将其添加到场景中
      const pieChart = new PieChart({
        data: [
          { label: "Slice 1", value: 10 },
          { label: "Slice 2", value: 20 },
          { label: "Slice 3", value: 30 },
        ],
        scene: scene,
      });

      // 渲染场景
      const animate = () => {
        requestAnimationFrame(animate);

        // 旋转饼图
        pieChart.mesh.rotation.y += 0.005;
        pieChart.mesh.rotation.x += 0.002;

        // 渲染场景
        renderer.render(scene, camera);
      };
      animate();
    });

    onUnmounted(() => {
      // 清除渲染循环并从 DOM 中删除渲染器
      cancelAnimationFrame(animate);
      renderer.domElement.remove();
    });

    return {
      containerRef,
    };
  },
};
</script>

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