在 Vue 2 中使用 Three.js 导入本地 3D 模型_vue2 threejs

引言

Three.js 是一个流行的 JavaScript 库，它能够帮助开发者轻松地在 Web 页面上创建 3D 内容。而 Vue.js 作为前端框架，可以与 Three.js 结合，构建交互式 3D Web 应用。本篇博客将介绍如何在 Vue 2 中使用 Three.js 加载本地 3D 模型。

1. 初始化 Vue 2 项目

如果你的项目还没有 Vue 2 环境，可以使用 Vue CLI 初始化：

```sh
vue create my-threejs-app
cd my-threejs-app
npm install
```

安装必要的依赖：

```sh
npm install three
```

2. 创建 Three.js 组件

在 `src/components` 目录下创建一个 `ThreeScene.vue` 组件，并添加以下代码：

```vue

import * as THREE from \'three\';
import { GLTFLoader } from \'three/examples/jsm/loaders/GLTFLoader.js\';

export default {
mounted() {
this.initThree();
},
methods: {
initThree() {