Vue中three.js导入gltf模型文件时报错

JavaScript015

Vue中three.js导入gltf模型文件时报错,第1张

在vue项目中导入gltf/glb模型文件的时候出错了。1、gltf模型文件被加密了 2、draco压缩了 而我加载的gltf文件不是加密的，所以第一个原因pass掉，那么就是draco压缩了。解决的方法是，在vue项目中，我们需要将draco文件夹复制一份到public目录下，不然在加载gltf/glb资源的时候就会报以上的错。

最近自己做一些threejs项目，总结了一些性能优化的关键点，跟大家分享一下。

1、尽量使用clone方法；

2、不需要的时候一定要dispose；

3、优先使用BufferGeometry；

4、注意图片压缩；

5、重点优化requestAnimationFrame内的方法（描述一）；

6、如果有大量外部模型，一定要结合使用gltf-pipeline与Draco（描述二）。

如果涉及到需要使用animate，尽量在需要渲染的时候来执行内容：

首先，建议使用gltf或者glb来加载模型。如果有大量外部模型，一定要结合使用gltf-pipeline与Draco。

这很重要，有时候我们获得的gltf模型文件后，我们可以轻易的压缩图片；但有些scene.bin文件可以达到100M或200M以上，模型多了之后会很大程度影响使用体验。

结合使用gltf-pipeline与Draco，可以有效的压缩文件甚至在10M以下！

1、首先你要将three/examples/js/libs/draco文件夹放到public目录下！

2、进入需要压缩的gltf模型文件，执行gltf-pipeline -i scene.gltf -o sceneDraco.gltf -d

执行成功后删除原先的.gltf .bin文件

如果没有安装过gltf-pipeline，使用npm全局安装即可

https://github.com/aisriver