GLTF/GLB在ThreeJS中导出:扰乱场景层次结构

huangapple go评论72阅读模式
英文:

GLTF/GLB Export in ThreeJS: Disrupting Scene Hierarchy

问题

我正在使用一种非常基本的方法导出我的场景:

function save(blob, filename) {
  const link = document.createElement("a");
  link.href = URL.createObjectURL(blob);
  link.download = filename;
  link.click();
  URL.revokeObjectURL(link);
}

function saveString(text, filename) {
  save(new Blob([text], { type: "text/plain" }), filename);
}

function saveArrayBuffer(buffer, filename) {
  save(new Blob([buffer], { type: "application/octet-stream" }), filename);
}

const exporter = new GLTFExporter();
exporter.parse(
  scene,
  function (result) {
    const name = `${modelName}.glb`;
    if (result instanceof ArrayBuffer) {
      saveArrayBuffer(result, name);
    } else {
      const output = JSON.stringify(result, null, 2);
      saveString(output, name);
    }
  },
  function (error) {
    console.log(error);
  },
  {
    binary: true,
    animations: [mixer.clipAction(model.animations[0]).getClip()],
  }
);

但从标题中可以理解,我的场景中的层次结构被破坏了。通常,我的对象直接放置在场景下。然而,在导出过程中,会创建一个新的空对象,并且所有我的对象都嵌套在其中。我希望保持场景的原始结构。

之前

GLTF/GLB在ThreeJS中导出:扰乱场景层次结构

之后

GLTF/GLB在ThreeJS中导出:扰乱场景层次结构

注:我的场景包含属于对象的动画。

英文:

I am exporting my scene using a very basic approach:

function save(blob, filename) {
  const link = document.createElement("a");
  link.href = URL.createObjectURL(blob);
  link.download = filename;
  link.click();
  URL.revokeObjectURL(link);
}

function saveString(text, filename) {
  save(new Blob([text], { type: "text/plain" }), filename);
}

function saveArrayBuffer(buffer, filename) {
  save(new Blob([buffer], { type: "application/octet-stream" }), filename);
}

const exporter = new GLTFExporter();
exporter.parse(
  scene,
  function (result) {
    const name = `${modelName}.glb`;
    if (result instanceof ArrayBuffer) {
      saveArrayBuffer(result, name);
    } else {
      const output = JSON.stringify(result, null, 2);
      saveString(output, name);
    }
  },
  function (error) {
    console.log(error);
  },
  {
    binary: true,
    animations: [mixer.clipAction(model.animations[0]).getClip()],
  }
);

But as can be understood from the title, the hierarchy in my scene is being disrupted. Typically, my objects are directly placed under the scene. However, during the export process, a new empty object is created, and all my objects are nested within it. I desire to maintain the original structure of my scene.

before

GLTF/GLB在ThreeJS中导出:扰乱场景层次结构

after

GLTF/GLB在ThreeJS中导出:扰乱场景层次结构

note: my scene contains animations that belong to objects.

答案1

得分: 1

因为glTF不是专门针对three.js的格式,它的结构(节点、网格、基元等)不是three.js结构(场景、组、Object3D、网格等)的1:1模拟。在加载期间,three.js会进行单向转换,然后在导出期间进行另一方向的转换,目的是保留场景的视觉正确性。

不幸的是,正如你在这里所发现的,不能保证往返转换会完全复制原始three.js场景的精确底层结构。还有一些其他相关的影响 - 纹理会被重新压缩,可能会损失一些质量。

可能有其他方法可以解决这个问题,具体取决于你最终想要做什么,但这可能更适合在论坛讨论而不是在Stack Overflow的问答中讨论。

英文:

Because glTF is not a three.js-specific format, its structures (nodes, meshes, primitives, ...) are not 1:1 analogs of three.js structures (Scene, Group, Object3D, Mesh, ...). three.js does the conversion in one direction during loading, and in another direction during export, with the goal of preserving the visual correctness of the scene.

Unfortunately, as you've found here, there's no guarantee that the round-trip will reproduce the exact underlying structure of the original three.js scene. There are some other related implications – texture are recompressed, and might lose a little quality.

There might be other ways to go about this, depending on what you're ultimately trying to do, but that might be better suited for a forum discussion than a Stack Overflow Q/A.

huangapple
  • 本文由 发表于 2023年6月19日 22:30:02
  • 转载请务必保留本文链接:https://go.coder-hub.com/76507601.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定