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?
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