1.检查npm -v版本和使用对应的vite安装vue3项目
需要安装依赖：npm install
运行：npm run dev
目录结构：
2.threejs官网：
3.安装threejs
4.准备3D模型素材(我这里使用glb格式)和HDR图片，素材网上可以找有免费的。
5.在App.vue中绑定id，挂载，实例化使用
6.在项目中的src目录下创建utils目录，在utils目录下创建Base3d.js脚本
效果展示：手机模型已经加载至场景中，背景是hdr图。
功能展示：用户可以滑动滚轮将模型进行放大缩小，场景360度无死角旋转。
本案例用到的技能： 1.加载模型 2.相机移动 3.鼠标选中模型 4.在场景中加入新的物体 5.物体沿路径移动 5.第一视角巡视 7.canvas画布自适应-页面窗口改变时模型不变形 首先新建react项目，引入Three，新建一个加载模型的class方法类，用于处理模型相关的操作。 主要思想是将图形组件与前端页面分离，降低图形组件与前端业务逻辑的耦合度。在图形组件中将方法暴露出来，前端页面来调用即可。 图形组件的class方法 初始化及加载模型： 渲染场景 canvas画布自适应窗口变化的方法： 鼠标选中模型的方法 // 鼠标点击时相机移动，即改变相机位置和中心点位置，以显示点击物体的最佳视角 在场景中加入一个新的立方体，并在立方体上加入相机，后面物体沿轨迹移动时调用物体身上的相机，实现以物体的视角展示模型 在场景中加入路径，物体沿着此路径移动 // 立方体沿路径移动和停止的方法，调用时执行 // 调用立方体上面的相机，展示第一视角 前端页面调用 页面中展示模型的canvas、信息div，操作按钮 实例化模型加载方法 // 鼠标移动和点击时将鼠标的位置传过去，在图形组件中转裁剪坐标，以判断是否选中物体 // 点击巡视按钮时调用立方体上的相机，并使立方体沿轨迹移动
