vue 使用three3d模型 在模型上添加标注

在Vue中使用Three.js库来渲染3D模型，并在模型上添加标注的过程如下：

1. 安装Three.js和Vue-Three.js依赖：

npm install three vue-threejs

2. 创建一个Vue组件，命名为`ThreeModel`：

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

<script>
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';

export default {
  name: 'ThreeModel',
  mounted() {
    // 创建场景
    const scene = new THREE.Scene();

    // 创建渲染器
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(this.$refs.container.offsetWidth, this.$refs.container.offsetHeight);
    this.$refs.container.appendChild(renderer.domElement);

    // 创建相机
    const camera = new THREE.PerspectiveCamera(75, this.$refs.container.offsetWidth / this.$refs.container.offsetHeight, 0.1, 1000);
    camera.position.z = 5;

    // 添加控制器
    const controls = new OrbitControls(camera, renderer.domElement);

    // 添加3D模型
    const loader = new THREE.GLTFLoader();
    loader.load('path/to/your/model.gltf', (gltf) => {
      scene.add(gltf.scene);
      // 在模型上添加标注
      const label = this.createLabel('Your Label');
      gltf.scene.add(label);
    });

    // 添加灯光
    const light = new THREE.DirectionalLight(0xffffff, 1);
    light.position.set(0, 1, 1).normalize();
    scene.add(light);

    // 渲染场景
    function animate() {
      requestAnimationFrame(animate);
      renderer.render(scene, camera);
    }
    animate();
  },
  methods: {
    createLabel(text) {
      const canvas = document.createElement('canvas');
      const ctx = canvas.getContext('2d');
      ctx.font = 'Bold 24px Arial';
      ctx.textAlign = 'center';
      ctx.fillStyle = 'rgba(255, 255, 255, 0.9)';
      ctx.fillText(text, canvas.width / 2, canvas.height / 2);

      const texture = new THREE.CanvasTexture(canvas);
      const material = new THREE.SpriteMaterial({ map: texture });
      const sprite = new THREE.Sprite(material);
      sprite.scale.set(2, 1, 1);

      return sprite;
    },
  },
};
</script>

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

3. 在父组件中使用`ThreeModel`组件：

<template>
  <div>
    <ThreeModel />
  </div>
</template>

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

export default {
  components: {
    ThreeModel,
  },
};
</script>

请确保将路径`path/to/your/model.gltf`替换为实际的模型文件路径。在`createLabel`方法中，您可以根据需要自定义标注的样式和内容。

这样，您就可以在Vue中使用Three.js来渲染3D模型，并在模型上添加标注了。