vue3.2+three.js制作官网examples案例页面和衣服材质切换、机械装配、动画展示、碰撞

（1）项目文件下载地址：

链接：https://pan.baidu.com/s/1cYxidMOsxuRN2PBRDVLlbQ 

提取码：utjm 

--来自百度网盘超级会员V3的分享

（2）视频地址：看本人主页。

（3）运行方法：我没有将依赖删除，所以下载解压后，直接cmd打开three文件，输入yarn dev运行。

1、项目文件创建

桌面创建vite02文件夹——》接着cmd打开——》使用yarn create vite创建vue3.2项目，接着输入yarn add vue-router，yarn add three， yarn add  less less-loader@7.2.1安装所需要的插件——》接着将静态图片，模型draco压缩文件分别复制到public目录和src\assets目录里面——》

然后修改src\App.vue里面代码——》

然后创建src\components\Home.vue文件，src\router\index.js文件，src\views\First.vue到src\views\Six.vue文件——》

编写上述文件的基础代码——》（注意First.vue——到Six.vue只编写基础样式就行，代码省略）

接着修改src\style.css里面的代码——》

修改src\main.js里面的代码——》

浏览器查看结果——》

2、vue3.2+three.js编写衣服切换材质案例

（首先将上一节的src文件夹另存为src01项目结构搭建文件夹，接着再继续修改src里面的代码）

修改src\views\First.vue代码——》

3、vue3.2+three.js编写机械拆分和结构展示案例

编写src\views\Third.vue代码——》

4、vue3.2+three.js编写动画展示案例

编写src\views\Four.vue代码——》

5、vue3.2+three.js编写碰撞检测案例

编写src\views\Five.vue代码——》