在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对象，例如网格，线和点云以及相应的对象层次。 因此，仅序列化/反序列化几何对象数组是不可能的。 您必须在对象/场景级别上工作。