Vue3中TresJS

前沿
在开发项目过程中，需要涉及到3D模型，近来研究下Three.js，但是如何运用到Vue项目中呢？？接下来让我们一起来探讨下吧。

什么是Three.js

Three.js是一个轻量级，跨平台的Javascript库，可以在浏览器上结合HTML5的canvas，SVG或者WebGL，创建和展示3D模型和动画。Three.js允许我们在不依赖任何浏览器插件的情况下，创建一个GPU加速的3D动画场景。

那么如何将 Three 带到了 Vue 生态系统中，创建更好的3D体验呢？这个时候就需要TresJS，像使用 Vue 组件一样构建 3D 场景。官网在这里 TresJS

如何使用TresJS

npm install @tresjs/core three

因为TresJS是基于Vue3框架开发，所以刚好也可以使用Typescript编写，TresJS 是用 Typescript 编写的，是完全类型化的。

npm install @types/three -D

项目遇到的问题

根据官网示例，一步一步的操作，最后不可能一帆风顺的，道阻且长啊…记录下自己碰到的问题：

vue3 TresJS 找不到模块“@tresjs/cientos”或其相应的类型声明

本着程序员独有的敏锐和观察力，这个时候来什么，我们就安装什么，库库库一顿操作。。

npm install @tresjs/cientos

vue3 TresJS You can mark the path “tweakpane” as external to exclude
it from the bundle, which will remove this error and leave the
unresolved path in the bundle.

npm i tweakpane

到这里示例中的模型，基本上是可以360°无死角旋转了吧。。

加载本地模型时，找不到相应的模型文件，需要按照以下方式写：

<GLTFModel path="public/model/test.gltf" draco />

将本地模型放在public文件夹下即可

结束语

待更新中…

今天搬砖不狠，明天工资不稳！