Store multiple objects in one json geometry in Three.js

Question

You can easily store a BufferGeometry as json and load it using 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
      }
    ]
  }
}

And to load it you may use the following code:

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

Now the question is storing more than one geometry in the json format. Is it possible to do so. If yes, is there any instruction or sample for it?

Answer 1

THREE.BufferGeometryLoader is only able to load a single instance of BufferGeometry per request. If you don't want to implement a custom solution, you have to load each geometry with a separate call of load() . So something like:

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

An alternative would be the usage of the Object/Scene JSON format that is implemented by THREE.ObjectLoader . However, this format is intended to represent 3D objects like meshes, lines and point clouds and the respective object hierarchy. So just serialize/deserialize an array of geometry objects is not possible. You have to work on object/scene level.