VUE3+ VITE 使用Three.js展示3D模型

学习主要文献: 1. threejs文件包下载和目录简介 | Three.js中文网
3D模型这里有下载网站：Sketchfab - The best 3D viewer on the web   （邮箱注册后有免费的模型下载)

3D模型编辑软件：Blender   windows环境微软应用市场可以直接获取安装最新版本。

里面有详细的安装环境介绍和各个功能组件的介绍，相对简单移动。还可以结合学习网站(bilibili)视频综合学习一下，感觉还不错~

这里主要记录一些比较容易出现的问题：

1.  画面不显示：展示要有渲染器(WebGLRenderer)，渲染器里面有两个参数对象：
        场景(Scene)，场景里面可以添加光源(Light)、辅助线(AxesHelper)、模型(Group)，模型加载3D模型OBJ文件加载器(OBJLoader和MTLLoader),GLTF和GLB文件加载器(GLTFLoader)。
        相机(Camera),position.set设置坐标很重要，设置不对可能因为太小，或者位置不对造成看不到模型。

        跟着中文网内容走，可以画出一个基本的3D图形(角度看起来像平面，结合组件事件监听和11. 动画渲染循环 | Three.js中文网  和这章内容可以旋转起来看)。详细的下方代码是加载的3D模型 ，可以直接放入模型后使用。

2.  发布打包的时候本地资源引用异常：

       把3D的本地资源引用放入public文件夹中。load函数的路径在外面单独声明，就好了。

3. light的打光位置，这个因3D模型而异，我这边办法只能慢慢调，不知道咋引用Blender里面的灯光角度。

4. 3D模型的默认显示位置：

调整相机调整 

完整VUE代码：