如何在 Three.js 中将场景或模型导出为 GLTF 格式？答案

【问题标题】：How can I export a scene or a model to GLTF Format in Three.js?如何在 Three.js 中将场景或模型导出为 GLTF 格式？
【发布时间】：2016-10-28 14:05:42
【问题描述】：

我正在使用 Meteor 构建一个 Web 应用程序，将场景以 GLTF 格式导出到服务器，这可能吗？

【问题讨论】：

当访问者向您的应用发出请求时，您是否需要让您的 glTF 场景由服务器生成？还是提前生成glTF场景，然后将.gltf场景上传到你的服务器，这样你以后可以在你的web应用中使用场景？

标签： javascript meteor 3d three.js gltf

【解决方案1】：

可能，是的。是否有人编写了 JavaScript 代码，使得从使用 Three.js 创建的 Web 应用程序中导出 glTF 变得容易？我不确定。

生成 glTF 的 Web 应用程序通常使用作为服务器端进程运行的本机组件，例如 COLLADA2GLTF 或 FBX-glTF，如下例所示：https://cesiumjs.org/convertmodel.html

【讨论】：

【解决方案2】：

我想你在找什么is this example。

对于服务器端部分，只要您不使用需要浏览器的元素（例如THREE.WebGLRenderer()），您应该能够在服务器上运行THREE。 This is a cool example of that using a Node server.

【讨论】：

【解决方案3】：

我更喜欢使用 GLB 而不是 GLTF，因为 GLTF 文件包含对外部文件的引用，例如纹理（.png 文件）和动画（.bin 文件），而在 GLB 的情况下，所有这些文件都合并到一个文件中。这意味着 .glb 文件包含纹理和动画。

如果您想深入了解有关 gltf 与 glb 的整个讨论，此链接可能很有用 - https://github.com/KhronosGroup/glTF/issues/1117

您可以使用以下代码将 THREE.js 场景导出为 GLB 格式?

const btn = document.getElementById('download-glb')
btn.addEventListener('click',download)

function download(){
    const exporter = new GLTFExporter();
    exporter.parse(
        scene,
        function (result) {
            saveArrayBuffer(result, 'ThreejsScene.glb'); 
        },
        { 
            binary: true
        }
    );
}

function saveArrayBuffer(buffer, filename) {
    save(new Blob([buffer], { type: 'application/octet-stream' }), filename);
}
   
function save(blob, filename) {
    link.href = URL.createObjectURL(blob);    
    link.download = filename;
    link.click(); // This step makes sure your glb file gets downloaded
    sendFileToBackend(blob, filename)
}

function sendFileToBackend(blob, filename){
    const endpoint = "YOUR_BACKEND_URL_HERE";
    const formData = new FormData();

    let sceneFile= new File([blob], "ThreejsScene.glb");
    console.log(sceneFile)
    formData.append("file", sceneFile);

    const options = {
        method:'POST',
        mode: 'no-cors',
        body: formData,
    }

    fetch(endpoint,options)
        .then(response => console.log(JSON.stringify(response)))
        .catch(error => console.error('Error:', error))

}

【讨论】：