Threejs scene from blender and access to objects

Question

Following situation:
I created a scene in blender and exported it with the io_three addon. The produced json file consists of all objects if I tick the scene option inside the exporter.
If I don't make a tick it will export just the current selected object (and not all objects).

Problem:
I can't find a way to display the whole scene with threejs. I just see my background and no scene. My loader looks like this:

var loader = new THREE.JSONLoader();
loader.load('test.json', function(geometry, material){
    var materials = new THREE.MeshFaceMaterial(material);
    mesh = new THREE.Mesh(geometry, materials);
    scene.add(mesh);
});

I get an error:

Uncaught TypeError: Cannot read property 'length' of undefined(anonymous function) @ three.min.js:268THREE.JSONLoader.parse @ three.min.js:271f.onreadystatechange @ three.min.js:266

The produced json file (2 basic cubes with texture):

{
    "textures": [{
        "image": "E30E1CC2-2152-3E22-8467-D5845ECA8529",
        "anisotropy": 1,
        "repeat": [1,1],
        "magFilter": "LinearFilter",
        "mapping": "UVMapping",
        "uuid": "F7F25B99-8709-3776-8D32-B0774203CF6B",
        "type": "Geometry",
        "name": "Tex",
        "wrap": ["RepeatWrapping","RepeatWrapping"],
        "minFilter": "LinearMipMapLinearFilter"
    }],
    "images": [{
        "uuid": "E30E1CC2-2152-3E22-8467-D5845ECA8529",
        "type": "Geometry",
        "name": "brick01.jpg",
        "url": "brick01.jpg"
    }],
    "object": {
        "matrix": [1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1],
        "uuid": "048B5D01-9785-45B0-AA12-2E95F912E9B2",
        "type": "Scene",
        "children": [{
            "type": "Mesh",
            "name": "Cube",
            "uuid": "F29D1AC4-D789-3D8E-BAB5-59DC1B758FE2",
            "matrix": [-1.1386,0,0,0,0,0,1.1386,0,0,1.1386,0,0,0.460104,-0.303026,0.456013,1],
            "visible": true,
            "material": "FC9C3C1C-87E7-3748-8148-105003E5F3D5",
            "castShadow": true,
            "receiveShadow": true,
            "geometry": "FE46F7EB-A263-3807-8987-EB40ABE18EAA"
        },{
            "type": "Mesh",
            "name": "Cube.001",
            "uuid": "7E8B5B6C-C1E8-35F8-8CAD-F6CC57432E76",
            "matrix": [-3.01607,0,0,0,0,0,3.01607,0,0,3.01607,0,0,-2.49361,4.47873,-4.95054,1],
            "visible": true,
            "material": "FC9C3C1C-87E7-3748-8148-105003E5F3D5",
            "castShadow": true,
            "receiveShadow": true,
            "geometry": "177A9EDE-9E89-3179-879D-52C39352875C"
        }]
    },
    "geometries": [{
        "uuid": "FE46F7EB-A263-3807-8987-EB40ABE18EAA",
        "type": "Geometry",
        "materials": [{
            "mapDiffuse": "brick01.jpg",
            "DbgName": "Material",
            "colorAmbient": [0.8,0.8,0.8],
            "shading": "lambert",
            "opacity": 1,
            "colorDiffuse": [0.8,0.8,0.8],
            "wireframe": false,
            "colorEmissive": [0,0,0],
            "DbgIndex": 0,
            "mapDiffuseRepeat": [1,1],
            "mapDiffuseAnisotropy": 1,
            "depthWrite": true,
            "depthTest": true,
            "blending": "NormalBlending",
            "DbgColor": 15658734,
            "mapDiffuseWrap": ["RepeatWrapping","RepeatWrapping"],
            "visible": true,
            "transparent": false
        }],
        "data": {
            "faces": [43,0,1,2,3,0,0,1,2,3,0,1,2,3,43,4,7,6,5,0,4,1,5,6,4,5,6,7,43,0,4,5,1,0,7,8,9,10,0,4,7,1,43,1,5,6,2,0,11,12,13,14,1,7,6,2,43,2,6,7,3,0,15,16,17,18,2,6,5,3,43,4,0,3,7,0,4,19,20,21,4,0,3,5],
            "uvs": [[0,0.666667,0.333333,0.666667,0.333333,1,0,1,0.333333,0.333333,0,0.666667,0,0.333333,0.666667,0.333333,0.333333,0.333333,0.333333,0,0.666667,0,0,0.333333,0,0,0.333333,0,0.333333,0.333333,1,0.333333,0.666667,0.333333,0.666667,0,1,0,0.666667,0.333333,0.666667,0.666667,0.333333,0.666667]],
            "vertices": [1,1,-1,1,-1,-1,-1,-1,-1,-1,1,-1,1,0.999999,1,0.999999,-1,1,-1,-1,1,-1,1,1],
            "name": "CubeGeometry",
            "normals": [0.577349,0.577349,-0.577349,0.577349,-0.577349,-0.577349,-0.577349,-0.577349,-0.577349,-0.577349,0.577349,-0.577349,0.577349,0.577349,0.577349,-0.577349,0.577349,0.577349,-0.577349,-0.577349,0.577349,0.577349,-0.577349,0.577349],
            "metadata": {
                "faces": 6,
                "generator": "io_three",
                "normals": 8,
                "vertices": 8,
                "version": 3,
                "materials": 1,
                "uvs": 1
            }
        }
    },{
        "uuid": "177A9EDE-9E89-3179-879D-52C39352875C",
        "type": "Geometry",
        "materials": [{
            "mapDiffuse": "brick01.jpg",
            "DbgName": "Material",
            "colorAmbient": [0.8,0.8,0.8],
            "shading": "lambert",
            "opacity": 1,
            "colorDiffuse": [0.8,0.8,0.8],
            "wireframe": false,
            "colorEmissive": [0,0,0],
            "DbgIndex": 0,
            "mapDiffuseRepeat": [1,1],
            "mapDiffuseAnisotropy": 1,
            "depthWrite": true,
            "depthTest": true,
            "blending": "NormalBlending",
            "DbgColor": 15658734,
            "mapDiffuseWrap": ["RepeatWrapping","RepeatWrapping"],
            "visible": true,
            "transparent": false
        }],
        "data": {
            "faces": [43,0,1,2,3,0,0,1,2,3,0,1,2,3,43,4,7,6,5,0,4,1,5,6,4,5,6,7,43,0,4,5,1,0,7,8,9,10,0,4,7,1,43,1,5,6,2,0,11,12,13,14,1,7,6,2,43,2,6,7,3,0,15,16,17,18,2,6,5,3,43,4,0,3,7,0,4,19,20,21,4,0,3,5],
            "uvs": [[0,0.666667,0.333333,0.666667,0.333333,1,0,1,0.333333,0.333333,0,0.666667,0,0.333333,0.666667,0.333333,0.333333,0.333333,0.333333,0,0.666667,0,0,0.333333,0,0,0.333333,0,0.333333,0.333333,1,0.333333,0.666667,0.333333,0.666667,0,1,0,0.666667,0.333333,0.666667,0.666667,0.333333,0.666667]],
            "vertices": [1,1,-1,1,-1,-1,-1,-1,-1,-1,1,-1,1,0.999999,1,0.999999,-1,1,-1,-1,1,-1,1,1],
            "name": "Cube.001Geometry.1",
            "normals": [0.577349,0.577349,-0.577349,0.577349,-0.577349,-0.577349,-0.577349,-0.577349,-0.577349,-0.577349,0.577349,-0.577349,0.577349,0.577349,0.577349,-0.577349,0.577349,0.577349,-0.577349,-0.577349,0.577349,0.577349,-0.577349,0.577349],
            "metadata": {
                "faces": 6,
                "generator": "io_three",
                "normals": 8,
                "vertices": 8,
                "version": 3,
                "materials": 1,
                "uvs": 1
            }
        }
    }],
    "materials": [{
        "map": "F7F25B99-8709-3776-8D32-B0774203CF6B",
        "depthWrite": true,
        "depthTest": true,
        "blending": "NormalBlending",
        "emissive": 0,
        "color": 13421772,
        "uuid": "FC9C3C1C-87E7-3748-8148-105003E5F3D5",
        "type": "MeshLambertMaterial",
        "name": "Material",
        "vertexColors": false,
        "ambient": 13421772
    }],
    "metadata": {
        "generator": "io_three",
        "version": 4.3,
        "type": "Object",
        "sourceFile": "test.blend"
    }
}

I also tried 'test.js', OBJLoader, OBJMTLLoader and looked for other questions with same problems but nothing helped. Can someone tell me what I'm doing wrong and/or give me a basic example where it works or should work. It works when I take one cube instead of two and don't use the scene option. But how can I load my scene (multiple objects) with json and display it with threejs?

Answer 1

You can load a full scene with the SceneLoader: https://github.com/dirkk0/fps0/blob/master/scene.html#l542

See a full example here: https://github.com/dirkk0/fps0

best, Dirk