vue2+three.js

### 集成 Three.js 到 Vue2 项目

为了在 Vue2 中集成和使用 Three.js，需先通过 npm 或 yarn 安装 `three` 和其他必要的库。对于额外的功能需求，比如 CSS 渲染器，则可以单独安装特定包如 `three-css2drender`[^2]。

#### 安装依赖项

npm install three @types/three --save
npm install three-css2drender --save

#### 修改项目结构适应 Three.js 使用场景
考虑到项目的可维护性和模块化设计原则，在 Vue2 的单文件组件(SFC)内创建专门用于管理 Three.js 场景逻辑的部分是一个不错的选择。这通常意味着会有一个类似于下面这样的基本目录布局：

- **src/components/** 下新增一个名为 `ThreeScene.vue` 的组件来封装所有的 Three.js 相关初始化以及渲染循环操作[^3]。

#### 编写 ThreeScene.vue 组件
在此组件内部，可以通过组合方式(composition API style)，尽管 Vue2 默认支持的是选项式API(Options API), 来设置 up Three.js 环境，并将其与生命周期挂钩以便于控制何时启动或停止动画帧更新过程。

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

<script>
import * as THREE from 'three';
// 如果需要导入附加插件或其他资源也在这里完成...

export default {
  name: "ThreeScene",
  mounted() {
    this.init();
    window.addEventListener('resize', this.onWindowResize);
  },
  beforeDestroy() {
    cancelAnimationFrame(this.frameId); // 停止请求新的动画帧
    window.removeEventListener('resize', this.onWindowResize);
  },
  methods: {
    init() {
      const container = this.$refs.sceneContainer;
      
      // 设置场景、相机、渲染器...
      let scene = new THREE.Scene(); 
      let camera = new THREE.PerspectiveCamera(...);
      let renderer = new THREE.WebGLRenderer({ antialias: true });
      
      // 将渲染器的 DOM 元素添加至容器中
      container.appendChild(renderer.domElement);

      function animate() { /* ... */ }
      this.animate = animate.bind(this);
      this.frameId = requestAnimationFrame(this.animate);
      
      // 更多初始化代码...
    },

    onWindowResize() {/* 处理窗口大小变化 */}
  }
};
</script>

<style scoped>
/* 添加一些样式 */
</style>

上述代码片段展示了如何在一个简单的 Vue2 单文件组件里边嵌入 Three.js 并实现基础功能。