javascript - 将本地 glTF 文件加载到 Javascript 内存中

Question

我正在使用 Three.js 和 Capacitor 创建 native iOS 和 Android 应用程序。我有一些 GLTF 模型，我想从某种与代码捆绑在一起并交付给用户的 Assets 文件夹中加载，但我不知道如何去做。

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

Answer 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);
    }