vue2 加 three 实现平面图交互

要在Vue 2中使用Three.js实现平面图交互，你可以按照以下步骤进行操作：

首先，确保你的项目中已经安装了Vue和Three.js。你可以使用npm或yarn来安装它们。

npm install vue
npm install three

创建一个Vue组件，用于包含Three.js场景。在这个组件中，你可以使用mounted生命周期钩子来初始化Three.js场景并添加交互功能。

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

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

export default {
  mounted() {
    // 创建场景
    const scene = new THREE.Scene();

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

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

    // 创建平面
    const geometry = new THREE.PlaneGeometry(5, 5);
    const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
    const plane = new THREE.Mesh(geometry, material);
    scene.add(plane);

    // 添加交互功能
    const controls = new THREE.OrbitControls(camera, renderer.domElement);

    // 渲染场景
    function render() {
      requestAnimationFrame(render);
      controls.update();
      renderer.render(scene, camera);
    }
    render();
  }
};
</script>

在上面的代码中，我们创建了一个基本的Three.js场景，其中包含一个平面。我们还使用了OrbitControls来添加交互功能，使用户能够旋转和缩放场景。

在你的Vue根组件中使用这个Three.js组件。

<template>
  <div id="app">
    <three-component></three-component>
  </div>
</template>

<script>
import ThreeComponent from './components/ThreeComponent.vue';

export default {
  components: {
    ThreeComponent
  }
};
</script>

在这个例子中，我们将Three.js组件作为根组件中的一个子组件使用。

现在你可以运行你的Vue应用，并在平面图上进行交互了