vue3+threejs新手从零开发卡牌游戏（一）：项目搭建

一、主要参考文档

vue3官方文档：快速上手 | Vue.js

ElementPlus官方文档：一个 Vue 3 UI 框架 | Element Plus

three.js官方中文文档：three.js docs

二、vue3中需要引入的主要插件
1.pinia-plugin-persistedstate：对pinia做持久化管理

2.element-plus：前端UI框架
3.animate.css：可对前端h5UI部分做动效

3.three.js：核心

4.tween.js：用来协助做threejs里的动效

三、项目搭建：

1.执行命令创建vue3初始项目

npm create vue@latest

​

2.安装three.js，并在main.js中引用

npm install --save three

3.main.js相关代码，这里我将threejs中的几个必要的元素：scene（场景）、camera（相机）、renderer（渲染器）挂载到全局变量上，主要是为了方便在组件里引入，并未考虑效率相关方面的问题，实际情况看个人

import './assets/main.css'

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

import mitt from "mitt"

import App from './App.vue'
import router from './router'

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

import 'animate.css';

import * as THREE from 'three';

import * as TWEEN from '@tweenjs/tween.js'

const app = createApp(App)

const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)

app.use(pinia)
app.use(router)
app.use(ElementPlus)

app.mount('#app')

app.config.globalProperties.mittBus = new mitt()

for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

// 创建scene、camera、renderer
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
const renderer = new THREE.WebGLRenderer({
  // logarithmicDepthBuffer: true
});
app.config.globalProperties.THREE = THREE
app.config.globalProperties.scene = scene
app.config.globalProperties.camera = camera
app.config.globalProperties.renderer = renderer
app.config.globalProperties.TWEEN = TWEEN