在Three.js中將多個對象存儲在一個json幾何中

Question

您可以輕松地將BufferGeometry存儲為json並使用BufferGeometryLoader加載它：

{
  "metadata": {
    "version": 3,
    "type": "Geometry",
    "normal": 30,
    "position": 30,
    "generator": "io_three"
  },
  "data": {
    "index": {
      "array": [ 0, 1, 2, 3, …],
      "type": "Uint16Array",
      "itemSize": 1
    },
    "attributes": {
      "normal": {
        "array": [ -1, 0, 0, -1, …],
        "type": "Float32Array",
        "itemSize": 3
      },
      "position": {
        "array": [ -1, 1, 1, -1, …],
        "type": "Float32Array",
        "itemSize": 3
      }
    },
    "groups": [
      {
        "count": 48,
        "start": 0,
        "materialIndex": 0
      }
    ]
  }
}

要加載它，您可以使用以下代碼：

var loader = new THREE.BufferGeometryLoader();
loader.load(
'JS/Sample1.json',
function (geometry) {
    var mesh = new THREE.Mesh(geometry, new THREE.MeshNormalMaterial({}));
    scene.add(mesh);
    renderer.render(scene, camera);
    }
);

現在的問題是以json格式存儲多個幾何。 是否可以這樣做。 如果是，是否有任何說明或示例？

Answer 1

THREE.BufferGeometryLoader每個請求只能加載BufferGeometry的單個實例。 如果不想實現自定義解決方案，則必須使用單獨的load()調用來加載每個幾何。 所以像這樣：

var loader = new THREE.BufferGeometryLoader();
loader.load( 'JS/Sample1.json', geometry => {...} );
loader.load( 'JS/Sample2.json', geometry => {...} );
loader.load( 'JS/Sample3.json', geometry => {...} );

一種替代方法是使用THREE.ObjectLoader實現的Object / Scene JSON格式 。 但是，此格式旨在表示3D對象，例如網格，線和點雲以及相應的對象層次。 因此，僅序列化/反序列化幾何對象數組是不可能的。 您必須在對象/場景級別上工作。