vue3安装three.js

要在Vue 3中安装和使用Three.js，你需要执行以下步骤：

1. 创建一个新的Vue项目。如果你已经有一个项目，可以跳过这一步。

vue create my-project

2. 进入项目目录。

cd my-project

3. 安装Three.js库。

npm install three

4. 在需要使用Three.js的组件中导入并使用它。

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

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

export default {
  mounted() {
    this.initThree();
  },
  methods: {
    initThree() {
      const scene = new THREE.Scene();
      const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
      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);
      camera.position.z = 5;

      const animate = function () {
        requestAnimationFrame(animate);

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

        renderer.render(scene, camera);
      };

      animate();
    }
  }
}
</script>

<style>
#app {
  text-align: center;
}
</style>

在上述代码中，我们创建了一个简单的Vue组件来初始化Three.js场景并显示一个旋转的立方体。通过在组件的mounted方法中调用initThree函数，我们可以在组件加载完毕后进行Three.js的初始化。注意要在该组件的template中添加一个canvas元素，我们会在代码中引用它。

现在你可以运行项目并查看Three.js的效果了。

npm run serve

希望这可以帮助到你！