three.js加载gltf文件过程以及遇到的问题

说明：在vue项目中使用的threejs;

刚开始，我是从网上下载的gltf文件，将.gltf 文件放在了src/assets/xxx.gltf   , 对gltf格式的文件并不了解，使用如下方式加载gltf文件时，

// 创建gltf加载器对象
const loader = new GLTFLoader();
let that = this;
  loader.load("/models/gltf/box.gltf", (gltf) => {
     const model = gltf.scene;
     that.scene.add(model);
});

提示  ： Unexpected token '<', "

经过CSDN的查找，找到了解决办法：将  .gltf 文件放在了public下才行；

将文件路径更改后，报错了，提示：GLTFLoader.js:191 RangeError: Invalid typed array length: 75201

原来是 .gltf 文件中 引入了  .bin  格式的文件了，虽然 .gltf 和 .bin 两个文件在同一个路径下，在 .gltf 文件中就是找不到 .bin 格式的文件；

更改路径，暂时还不会，无奈只能在blender工具中自己做一个demo，然后导出 .gltf 格式的文件，然后在threejs中使用了；

导出设置如下：

如此设置，页面中终于可以显示效果了；效果如下：

 在代码中，我单独加了一个环境光；

主要代码如下：

附件放在了中国移动云盘上 了，坚决抵制垃圾的恶心的最2比百度云盘，限速，就是让你开通会员，开通会员后下载文件，下的也不一定完整；

附件地址：

链接:https://caiyun.139.com/m/i?185C7GGV8U40d
提取码:PZWy
复制内容打开移动云盘PC客户端，操作更方便哦