如何在 react-three-fiber 中使用 GLTFExporter 导出多个不同的 3d 场景答案

【问题标题】：How to export multiple varying 3d scenes with GLTFExporter in react-three-fiber如何在 react-three-fiber 中使用 GLTFExporter 导出多个不同的 3d 场景
【发布时间】：2021-12-27 21:22:07
【问题描述】：

我正在尝试使用 react-three-fiber 创建一个立方体的多个 3d 模型，这些模型在每个立方体的表面上使用的纹理不同。我希望它们导出为 gltf 文件。

我一直使用这个 --- Exporting scene in GLTF format from react-three-fiber --- 作为指导方针。我有 ref 组件和回调，但是我不确定如何使用按钮调用 GLTFExporter，以便它每次都导出具有不同面的多维数据集（直到给定目录中的选项用完）。我现在还可以导出一个场景作为示例。

理想情况下，我希望为不同的多维数据集创建一个目录，并且 GLTFExporter“按钮”每次都会从那里访问具有不同面孔的不同文件夹。

【问题讨论】：

标签： reactjs three.js react-component gltf react-three-fiber

【解决方案1】：

与您建议的解决方案有点不同，但类似的选择是首先从 GLTFExporter 导出场景，然后生成 glTF 文件的排列：

import { WebIO } from '@gltf-transform/core';
import { KHRONOS_EXTENSIONS } from '@gltf-transform/extensions';

const exporter = new THREE.GLTFExporter();

// NOTE: three.js r135 will change method signature here...
//   scene, onLoad, options → scene, onLoad, onError, options
exporter.parse(scene, (glb) => createVariations(glb), {binary: true});

async function createVariations (glb) {
  const io = new WebIO().registerExtensions(KHRONOS_EXTENSIONS);
  const document = io.readBinary(glb);
  
  // assign a blank texture to all materials' base color
  const texture = document.createTexture();
  for (const material of document.getRoot().listMaterials()) {
    material.setBaseColorTexture(texture);
  }

  for (const textureURL of MY_TEXTURE_URLS) {
    // load each texture and attach it.
    const image = await fetch(textureURL).then((r) => r.arrayBuffer());
    texture.setImage(image).setMimeType('image/png'); // or 'image/jpeg'


    // write this variant of the GLB
    const variantGLB = io.writeBinary(document); // → ArrayBuffer
  }
}

同样的事情可以在脚本中离线完成，使用NodeIO而不是WebIO。

【讨论】：