使用vue3,编写three.js的工具组件

下面是一个示例代码，展示如何使用Vue 3和Three.js编写一个工具组件：

<template>
  <div ref="container"></div>
</template>

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

export default {
  name: 'ThreeTool',
  props: {
    width: {
      type: Number,
      default: 500
    },
    height: {
      type: Number,
      default: 500
    },
    cameraPosition: {
      type: Object,
      default: () => ({
        x: 0,
        y: 0,
        z: 5
      })
    }
  },
  data() {
    return {
      scene: null,
      camera: null,
      renderer: null,
      mesh: null,
      animationId: null
    };
  },
  mounted() {
    this.init();
    this.animate();
  },
  beforeUnmount() {
    cancelAnimationFrame(this.animationId);
    this.renderer.dispose();
  },
  methods: {
    init() {
      this.scene = new THREE.Scene();

      this.camera = new THREE.PerspectiveCamera(
        75,
        this.width / this.height,
        0.1,
        1000
      );
      this.camera.position.copy(this.cameraPosition);

      this.renderer = new THREE.WebGLRenderer();
      this.renderer.setSize(this.width, this.height);
      this.$refs.container.appendChild(this.renderer.domElement);

      const geometry = new THREE.BoxGeometry();
      const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
      this.mesh = new THREE.Mesh(geometry, material);
      this.scene.add(this.mesh);
    },
    animate() {
      this.animationId = requestAnimationFrame(this.animate);

      this.mesh.rotation.x += 0.01;
      this.mesh.rotation.y += 0.01;

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

这个组件包含了一个`div`元素，用来作为Three.js场景的容器。在`mounted`钩子中，我们调用了`init`方法来初始化场景、相机、渲染器和网格。在`beforeUnmount`钩子中，我们清除了动画帧以及释放了渲染器的资源。

`init`方法中，我们创建了一个立方体网格，并将其添加到场景中。然后，我们使用`WebGLRenderer`将场景渲染到DOM中。

在`animate`方法中，我们使用`requestAnimationFrame`来创建动画帧，并在每一帧中旋转立方体网格，然后将场景渲染到DOM中。

使用此组件非常简单。只需将其导入到您的Vue组件中，并将其添加到模板中，如下所示：

<template>
  <div>
    <ThreeTool />
  </div>
</template>

<script>
import ThreeTool from './ThreeTool.vue';

export default {
  name: 'MyComponent',
  components: {
    ThreeTool
  }
};
</script>

您可以使用`props`属性来自定义此组件的宽度、高度和相机位置。这些属性都具有默认值，因此您可以选择性地传递它们，如下所示：

<template>
  <div>
    <ThreeTool
      :width="800"
      :height="600"
      :cameraPosition="{ x: 0, y: 0, z: 10 }"
    />
  </div>
</template>