vue 展示 3d模型 怎么显示2D标记

在Vue.js中展示3D模型并添加2D标记通常涉及使用WebGL库如Three.js，结合Vue组件化的方式来实现。以下是基本步骤：

1. 安装依赖：首先需要在项目中安装Three.js库，可以使用npm或yarn命令行工具：

   npm install three @vue/compodietn
   # 或者
   yarn add three @vue/component

2. 创建组件：创建一个新的Vue组件，例如`ModelWithMarkers.vue`，并将Three.js的渲染逻辑封装在里面：

<template>
  <div ref="container" style="width: 100%; height: 100%; perspective: 1px;"></div>
</template>

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

export default {
  setup() {
    const container = this.$refs.container;
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

    // 加载3D模型
    const loader = new THREE.GLTFLoader();
    loader.load('path/to/model.gltf', (gltf) => {
      scene.add(gltf.scene);
      
      // 添加2D标记
      const markerGeometry = new THREE.PlaneGeometry(1, 1); // 标记大小
      const markerMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 }); // 红色标记
      const marker = new THREE.Mesh(markerGeometry, markerMaterial);
      marker.position.set(gltf.scene.children[0].position.x, gltf.scene.children[0].position.y + 1, gltf.scene.children[0].position.z); // 把标记放在模型上方一点
      scene.add(marker);
    });

    // 渲染
    function animate() {
      requestAnimationFrame(animate);
      camera.updateMatrixWorld(true);
      renderer.render(scene, camera);
    }

    const renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setSize(window.innerWidth, window.innerHeight);
    container.appendChild(renderer.domElement);

    animate();

    return { scene, camera, renderer };
  }
};
</script>

在这个例子中，我们加载了一个3D模型，并在其上方创建了一个红色的平面作为2D标记。动画函数`animate`负责更新视图。