--- theme: hydrogen highlight: agate --- 携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第4天，[点击查看活动详情](https://juejin.cn/post/7123120819437322247 "https://juejin.cn/post/7123120819437322247") # 本文说明本文主要简单介绍了，在Vue3.x项目中如何简单的使用Three.js，导入**PCD三维模型文件**。 # 模型显示 ![图片.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7527e2aa51704e50aaf360f163bd3103~tplv-k3u1fbpfcp-watermark.image?) # 项目实现 ### 第一步首先创建一个vue3.x，的项目，然后需要先有一个 .pcd三维模型文件，如果有的话，将三维点云文件放在如下图的文件夹里，如果没有的话，百度云盘（链接：https://pan.baidu.com/s/1TM2gKCepC9UuBeG37QBoKQ?pwd=a13y ） ![图片.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bc98f971b3f844268613502b18e98b2f~tplv-k3u1fbpfcp-watermark.image?) ### 第二步在安装Three.js前，需要安装Babel，来编译ES6语法。参考： vue安装babel-polyfill插件，解决低版本浏览器不支持ES6新语法的问题 https://www.cnblogs.com/chenyingying0/p/12638962.html vuecli3 如何使用babel https://www.csdn.net/tags/MtTaMgzsODI3NzY4LWJsb2cO0O0O.html 好像也可以在创建项目的时候，安装Babel ``` vue create vue3-test ``` ![图片.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c77c7a6a2ba343899d24ff6c17110cdc~tplv-k3u1fbpfcp-watermark.image?) ### 第三步需要在vue3.x项目中安装Three.js ``` npm install three@0.128.0 npm install three-orbit-controls npm i --save three-css2drender ``` 依次安装，也可以一起安装 ``` npm install --save three@0.128.0 three-orbit-controls three-css2drender ``` ### 第四步在项目中使用，以下是整个完整代码 ``` ``` ![11_4k.jpg](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e985fe2f2d374fbdb351384ff224ff08~tplv-k3u1fbpfcp-watermark.image?) > 引用 > Three.js中文网 > http://www.webgl3d.cn/ > GitHub上的Three.js > https://github.com/mrdoob/three.js/tree/master > 3D模型文件下载，既有免费的也有收费的，加载较慢 > https://free3d.com/