一、创建VUE项目工程

1、方法一

使用下面命令行快速创建vue项目，Please pick a preset这里我们选择使用VUE3

vue create projectName

创建时可能会遇到的报错

错误原因：当前使用的node版本未全局安装vue-cli脚手架，使用下面命令安装后再使用创建命令行vue create就可

npm install -g @vue/cli

创建完成后进入项目根目录，执行npm run serve，如下即项目运行成功。

2、方法二

使用npm create vue@latest 创建项目

安装依赖并启动

cd mythreejsvue3
npm install
npm run dev

浏览器输入地址：http://localhost:5173/页面预览如下

二、安装Element-Plus并引入

1、安装

npm install element-plus

2、引入

main.js

3、自动导入

npm install -D unplugin-vue-components unplugin-auto-import

4、配置vite.config.js

5、npm run dev启动项目

6、创建导航、页面及关联路由

三、安装使用three.js

1、下载安装

npm install three

npm安装特定版本three.js(注意使用哪个版本，查文档就查对应版本)

// 比如安装148版本
npm install three@0.148.0

2、使用

npm安装three后，执行下面即引入three.js

import * as THREE from 'three';

其他扩展库引入方法

// 引入扩展库OrbitControls.js
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
// 引入扩展库GLTFLoader.js
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';

3、开始创建一个3D场景

创建一个3D基础场景

<template>
  <div class="box" ref="box"></div>
</template>

效果如下图：

到此一个完整的VUE3+Three.js项目就完成啦