vue使用threejs生成3d模型

### 如何在 Vue 中使用 Three.js 创建 3D 模型

#### 环境准备
为了顺利集成 Three.js，在开始前需确认已安装如下工具：

- Node.js
- Vue CLI

如果未曾安装上述工具，可前往 [Node.js 官方网站](https://nodejs.org/) 和 [Vue CLI 官方文档](https://cli.vuejs.org/) 查看具体安装指导[^1]。

#### 创建 Vue3 项目
借助 Vue CLI 可快速搭建新的 Vue3 工程。执行命令 `vue create vue-threejs-demo` 来初始化一个名为 `vue-threejs-demo` 的新工程。

vue create vue-threejs-demo

进入刚创建的项目目录并启动本地服务器以便后续操作验证：

cd vue-threejs-demo
npm run serve

#### 添加 Three.js 至项目依赖
通过 npm 或 yarn 将 Three.js 库加入至当前项目的依赖项列表中。这里推荐采用 npm 方式来进行包管理器的操作：

npm install three --save

#### 编写基础 Three.js 场景代码
编辑 src/components/HelloWorld.vue 文件，引入 Three.js 并构建简单的三维场景结构。以下是具体的实现方法：

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

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

export default {
  mounted() {
    this.initScene();
  },
  methods: {
    initScene() {
      const scene = new THREE.Scene();

      // 设置相机参数
      const camera = new THREE.PerspectiveCamera(
        75,
        window.innerWidth / window.innerHeight,
        0.1,
        1000
      );
      
      // 初始化 WebGL 渲染器
      const renderer = new THREE.WebGLRenderer({ antialias: true });
      renderer.setSize(window.innerWidth, window.innerHeight);
      this.$refs.sceneContainer.appendChild(renderer.domElement);

      // 创建几何体与材质组合成网格对象
      const geometry = new THREE.BoxGeometry(1, 1, 1); // 正方体大小定义
      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);

        // 动画逻辑更新位置或其他属性
        cube.rotation.x += 0.01;
        cube.rotation.y += 0.01;

        renderer.render(scene, camera);
      }

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

<style scoped>
#scene-container {
  width: 100%;
  height: 100vh; /* 使用视窗高度 */
}
</style>

此段代码实现了在一个空白页面上显示旋转着的绿色线框立方体的效果。其中涉及到了 Three.js 核心组件——场景(Scene)，摄像机(Camera)，以及渲染器(Renderer)三者的配置和交互处理[^2]。