如果你还不会three.js的基础运用知识,可以看一下我的上一篇文章。
以下是我学习three.js所踩的一些坑,所以发出来希望能避免大家重蹈覆辙 ,拒绝踩坑!
目录
其实是因为gltf格式文件默认是在根目录的public文件下进行读取
二、引入OrbitControls、GLTFLoader报错,提示路径不对,文件找不到
一、加载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目录
而我的公司项目并没有改写,采用这种方式进行引入,所以只能使用老版本的绝对路径引入