vue怎么使用three.js

### 如何在 Vue 中集成和使用 Three.js 实现 3D 图形渲染

#### 创建 Vue 和 Three.js 的开发环境

为了在 Vue 项目中集成 Three.js，首先需要设置好开发环境。确保已经安装了 Node.js 和 npm 后，在终端执行如下命令创建一个新的 Vue 项目[^4]：

vue create my-threejs-project
cd my-threejs-project
npm install three

这会初始化一个基于 Vue CLI 构建的新项目，并安装 Three.js 库。

#### 初始化 Three.js 组件

接下来，在 `src/components` 文件夹内新建名为 `ThreeScene.vue` 的文件作为 Three.js 渲染组件。在此组件里引入并配置基本的 Three.js 设置——即定义场景(Scene)、摄像机(Camera)以及渲染器(Renderer)[^1][^2]:

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

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

export default {
  name: "ThreeScene",
  mounted() {
    this.init();
    this.animate();
  },
  methods: {
    init() {
      const scene = new THREE.Scene(); // 定义场景
      
      const camera = new THREE.PerspectiveCamera(
        75,
        window.innerWidth / window.innerHeight,
        0.1,
        1000
      ); // 定义透视投影相机
      
      const renderer = new THREE.WebGLRenderer({ antialias: true }); // 定义WebGL渲染器
      renderer.setSize(window.innerWidth, window.innerHeight);
      this.$refs.threeContainer.appendChild(renderer.domElement);

      // 添加几何体与材质
      const geometry = new THREE.BoxGeometry();
      const material = new THREE.MeshBasicMaterial({
        color: 0x00ff00,
        wireframe: true,
      });
      const cube = new THREE.Mesh(geometry, material); // 将几何体和材质组合成网格物体
      scene.add(cube); // 把立方体加入到场景当中
      camera.position.z = 5;

      function animate() {
        requestAnimationFrame(animate);

        // 动画逻辑...
        
        renderer.render(scene, camera); // 执行渲染操作
      }

      this.scene = scene;
      this.camera = camera;
      this.renderer = renderer;
      
      window.addEventListener('resize', () => { // 处理窗口大小变化事件
        let width = window.innerWidth;
        let height = window.innerHeight;
        renderer.setSize(width, height);
        camera.aspect = width / height;
        camera.updateProjectionMatrix();
      }, false);
    },

    animate() {
      requestAnimationFrame(this.animate.bind(this));
      this.renderer.render(this.scene, this.camera);
    }
  }
};
</script>

<style scoped>
/* 样式可以根据需求自定义 */
</style>

上述代码片段展示了如何在一个简单的 Vue 单文件组件中加载 Three.js 并启动基础动画循环。这里设置了最简化的三维空间结构：一个绿色线框模式下的正方体被放置于场景中央，并通过指定位置的摄像头观察该对象。

#### 注册组件至应用入口

最后一步是在应用程序的主要视图 (`App.vue`) 或其他页面布局中注册这个新创建的 Three.js 组件:

<!-- App.vue -->
<template>
  <div id="app">
    <!-- ... 其他HTML元素... -->
    
    <ThreeScene />
    
    <!-- ... 更多的内容... -->
  </div>
</template>

<script>
// 导入刚刚制作好的ThreeScene组件
import ThreeScene from './components/ThreeScene.vue'

export default {
  components: {
    ThreeScene
  }
}
</script>

完成以上步骤之后，运行 `npm run serve` 命令即可查看效果。此时应该能够在浏览器中看到旋转着的绿色线框立方体，证明 Three.js 已经成功嵌入到了 Vue 项目之中。