Vite+Vue3引入threejs库

下面给大家演示，在Vite创建的Vue3项目文件中，安装、引入threejs库。

回顾：Vite创建开发环境

上节课给大家演示了，通过命令npm create vite@latest创建了一个Vue的基础开发环境。

npm create vite@latest

接着上节课内容讲解，执行npm run dev，可以vite里面Vue代码模型效果。

为了方便写threejs代码，可以先把项目文件HelloWorld.vue、App.vue、style.css中默认HTML、CSS代码删除掉。

npm安装threejs

安装时候记得指定版本，因为threejs每个月都会变化，API不稳定，最好和课程也保持一致,平时自己开发也要注意版本。

// 比如安装162版本
npm i three@0.162.0 -S

npm官网查看threejs所有版本：https://www.npmjs.com/package/three?activeTab=readme

Vue中引入threejs代码

项目文件引入Threejs，然后通过THREE访问threejs所有核心的API。

import * as THREE from 'three';

//访问Scene、WebGLRenderer
THREE.Scene
THREE.WebGLRenderer

src/components目录下，新建twin.js文件,把threejs代码写在twin.js里面,twin.js文件引入three.js。

//随便输入一个API，测试下是否已经正常引入three.js
console.log(THREE.Scene); 

twin.js文件引入到HelloWorld.vue组件中调用执行，当然你引入到main.js或者别的vue组件都行。

import './twin.js' 

扩展：打开github文件包——本地预览文档

package.json文件可以查看你安装threejs版本,如果你有兴趣，可以下载github上的文件包，查看你npm安装theejs对应版本的文档。

  "dependencies": {
    "three": "^0.162.0"
  },

gihtub所有版本threejs文件包：https://github.com/mrdoob/three.js/releases

考虑到部分同学打开github网速比较慢，我已经下载下来了一个threejs文件包放在课件中，你可以直接使用。

three.js-文件包
...
└───docs——Three.js API文档文件
    │───index.html——打开该文件，本地离线方式预览threejs文档
└───examples——大量的3D案例，是你平时开发参考学习的最佳资源
    │───.html——各种3D案例
...