将本地 glTF 文件加载到 Javascript 内存中答案

【问题标题】：Loading a local glTF file into Javascript memory将本地 glTF 文件加载到 Javascript 内存中
【发布时间】：2020-04-17 02:42:36
【问题描述】：

我正在使用 three.js 和 Capacitor 创建一个原生 iOS 和 Android 应用程序。我有一些 GLTF 模型，我想从与代码捆绑在一起并交付给用户的某种资产文件夹中加载这些模型，但我不知道该怎么做。

This GLTF Loader 的 load 函数的文档需要某种 url。但是，Parse 接受“glTF 资产作为 ArrayBuffer 进行解析”。如何将此 glTF 文件加载到内存中，这样做的最佳做法是什么？我尝试了import * as Model from './models/myModel.gltf'，但得到了Cannot find module 错误。

【问题讨论】：

标签： javascript three.js capacitor gltf

【解决方案1】：

这是我加载 gltf 文件的方法，我使用 reader 加载场景中的任何文件，然后使用 loader.parse 解析。但是，如果您想要示例模型文件夹，我认为您不需要阅读器方法和解析器。只需使用加载 GLTF 基本方法并将样本存储在数组或对象中。希望对你有所帮助。

loadGltf(file, filename) {
        reader.onload = readerEvent => {
            const contents = readerEvent.target.result;
            const loader = new THREE.GLTFLoader()
            try {
                loader.parse(contents, '', function (gltf) {
                    gltf.scene.traverse(function(child) {
                        if (child.isMesh) {
                            child.castShadow = true;
                            child.receiveShadow = true;
                        }
                    });
                    currentModel = gltf.scene;
                    scene.add(gltf.scene);
                });
            }
            catch(error) {
                alert("Your file " + Load.filename + " was not parsed correctly." + "\n\n" + "ERROR MESSAGE : " + error.message);
            }
        }
        reader.readAsArrayBuffer(file);
    }

【讨论】：