在Three.js中将多个对象存储在一个json几何中

时间:2019-04-12 13:43:08

标签: javascript json three.js

您可以轻松地将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格式存储多个几何。是否可以这样做。如果是,是否有任何说明或示例?

1 个答案:

答案 0 :(得分: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 format。但是,此格式旨在表示3D对象,例如网格,线和点云以及相应的对象层次。因此,仅序列化/反序列化几何对象数组是不可能的。您必须在对象/场景级别上工作。