vue使用threejs导入3d模型

在Vue中使用Three.js导入3D模型可以通过以下步骤实现：

1. 首先，确保你已经在Vue项目中安装了Three.js。你可以使用npm或者yarn来安装Three.js库。

2. 在Vue组件中引入Three.js库。你可以在需要使用Three.js的组件中引入Three.js库，例如：

import * as THREE from 'three';

3. 创建一个场景(Scene)、相机(Camera)和渲染器(Renderer)。在Vue组件的`mounted`钩子函数中创建场景、相机和渲染器，例如：

mounted() {
  // 创建场景
  this.scene = new THREE.Scene();

  // 创建相机
  this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
  this.camera.position.z = 5;

  // 创建渲染器
  this.renderer = new THREE.WebGLRenderer({ antialias: true });
  this.renderer.setSize(window.innerWidth, window.innerHeight);
  this.$refs.container.appendChild(this.renderer.domElement);
}

4. 导入3D模型文件。你可以使用Three.js提供的`GLTFLoader`来导入3D模型文件，例如：

import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';

mounted() {
  // ...

  // 导入3D模型
  const loader = new GLTFLoader();
  loader.load('path/to/model.gltf', (gltf) => {
    this.scene.add(gltf.scene);
  });

  // ...
}

5. 渲染场景。在Vue组件的`mounted`钩子函数中添加渲染函数，例如：

mounted() {
  // ...

  // 渲染场景
  const animate = () => {
    requestAnimationFrame(animate);
    this.renderer.render(this.scene, this.camera);
  };
  animate();

  // ...
}

这样，你就可以在Vue项目中使用Three.js导入和渲染3D模型了。