vue3 如何使用 three.js

Ⅰ.安装threeJs

npm i three

Ⅱ.main.js 中全局导入

import { createApp } from 'vue'
import App from './App.vue';
import * as THREE from "three";  //导入threeJs

const app = createApp(App);
app.config.globalProperties.$THREE = THREE;  //挂载到原型

app.mount("#app")

• import 先导入 threeJs；
• 通过 app.config.globalProperties  方法导入原型，让其在任何vue文件中可调用  

Ⅲ. 简单使用  

  以任意一个vue文件为例：

• 在 onMounted 组件加载完毕之后在去  new  threeJs  的实例

Ⅳ.案例演示

• OrbitControls  为 threeJs 中 鼠标操控三维场景的插件。
• 主要逻辑是：创建完场景、渲染器、照相机，然后向其中加入物体。
• 案例效果 ：