如果你还不会three.js的基础运用知识，可以看一下我的上一篇文章。

以下是我学习three.js所踩的一些坑，所以发出来希望能避免大家重蹈覆辙 ，拒绝踩坑！

目录

一、加载gltf三维模型时，报错404

其实是因为gltf格式文件默认是在根目录的public文件下进行读取

 二、引入OrbitControls、GLTFLoader报错，提示路径不对，文件找不到

我安装的版本号是一致的，但是内部的源代码有一点点不一样，我新建的测试项目，采用的官方最新的引入方式，也就是将three/addons/loaders 替换了老版本的three/examples/jsm/loaders目录

---

一、加载gltf三维模型时，报错404

 看了官方文档并没有说明关于gltf文件路径的问题，在网上也查询了很多，解决方法五花八门但是一个有用的都没有。有的说安装依赖包，有的说修改vue.config.js，有人说采用import引入等等之类的，但是均无作用。

其实是因为gltf格式文件默认是在根目录的public文件下进行读取

如果还是报错，可以看下这个gltf模型是否没有适配的bin文件，有些.gltf文件是需要和.bin文件相辅相成的 。

如果是从资源网站下载的，不光需要.gltf模型文件、.bin文件，甚至还可能需要放贴图的文件夹，里面放了一些模型所需要的一些贴图，如果没有文件夹中的贴图也能渲染出来，但是因为没有贴图图片，会丢失模型上本应该有的外观。

比如我下图中的 textures 文件夹和.bin文件

 下面是在组件中引用gltf格式的三维模型

 二、引入OrbitControls、GLTFLoader报错，提示路径不对，文件找不到

下面这张图是官方提供的引入路径，也可以说是标准引入路径，我在新建测试的项目中使用这种引入，是没有任何问题的。

测试没问题后，便依葫芦画瓢，将这整个组件搬到公司项目中，结果公司项目的控制台竟然报错！

官方提供的这种引入路径在我这个项目里面无法使用！  当时让我挺费解的......

结果在网上查阅无果，我想既然是因为路径报错，那么就仔细检查整个文件结构吧

于是便在node_modules文件夹中搜索three这个依赖包，好家伙，还真让我找到了问题所在！

我安装的版本号是一致的，但是内部的源代码有一点点不一样，我新建的测试项目，采用的官方最新的引入方式，也就是将three/addons/loaders 替换了老版本的three/examples/jsm/loaders目录

而我的公司项目并没有改写，采用这种方式进行引入，所以只能使用老版本的绝对路径引入