vue使用three.js

在Vue中使用Three.js可以给您的应用程序添加3D渲染和交互功能。下面是一个使用Vue和Three.js的简单示例：

首先，确保您已经引入Vue和Three.js库。

在Vue组件中，您可以创建一个Canvas元素来渲染Three.js场景，并在mounted钩子函数中初始化场景、相机和渲染器。

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

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

export default {
  mounted() {
    this.init();
  },
  methods: {
    init() {
      // 创建场景
      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({ canvas: this.$refs.canvas });
      renderer.setSize(window.innerWidth, window.innerHeight);

      // 创建立方体
      const geometry = new THREE.BoxGeometry();
      const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
      const cube = new THREE.Mesh(geometry, material);
      scene.add(cube);

      // 动画循环
      function animate() {
        requestAnimationFrame(animate);

        cube.rotation.x += 0.01;
        cube.rotation.y += 0.01;

        renderer.render(scene, camera);
      }

      animate();
    },
  }
};
</script>

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

在这个示例中，我们创建了一个Canvas元素来渲染Three.js场景，并在mounted钩子函数中初始化了场景、相机和渲染器。然后，我们创建了一个立方体，并将其添加到场景中。在动画循环中，我们更新立方体的旋转，并使用渲染器在每一帧中渲染场景。

请注意，这只是一个简单的示例，您可以根据具体需求进行进一步的定制和开发。希望对您有所帮助！