CODEWITHSUNDEEP
javascriptjsonthree.js
Agent Zebra
Agent Zebra

Reputation: 4550

Blender exported json file not loading in three.js

I'm trying to load a simple blender exported json file into three.js. It's not loading and throwing the following error: 

Uncaught TypeError: Cannot read property 'transparent' of undefined
h @ three.min.js:449
h @ three.min.js:449
render @ three.min.js:560
render @ (index):53

What's happening here? What am I doing wrong?

Here's a plunker (that includes the json file that's too big to load here).

Here's my json loader: 

// instantiate a loader
var loader = new THREE.JSONLoader();

// load a resource
loader.load(
    // resource URL
    'sole.json',
    // Function when resource is loaded
    function ( geometry, materials ) {
        var material = new THREE.MeshFaceMaterial( materials );
        var object = new THREE.Mesh( geometry, material );
        scene.add( object );
    }
);

** Edit: After reading around on SO I tried a different loader and got the following errors:

Uncaught TypeError: Cannot read property 'type' of undefined
THREE.ObjectLoader.parseObject @ three.js:13062
THREE.ObjectLoader.parse @ three.js:12702
(anonymous function) @ three.js:12673
(anonymous function) @ three.js:11757

Here's the new loader that gave those errors: 

var loader = new THREE.ObjectLoader();
            loader.load( 'sole.json', function ( object ) {
                        scene.add( object );
            } );

Line 12673 reads: scope.parse( JSON.parse( text ), onLoad ); Line 11757 reads: if ( onLoad ) onLoad( this.response );

Here's the context of line 11757:

var request = new XMLHttpRequest();
        request.open( 'GET', url, true );

        request.addEventListener( 'load', function ( event ) {

            THREE.Cache.add( url, this.response );

            if ( onLoad ) onLoad( this.response );

            scope.manager.itemEnd( url );

        }, false );

        if ( onProgress !== undefined ) {

            request.addEventListener( 'progress', function ( event ) {

                onProgress( event );

            }, false );

        }

So basically it's just not parsing the json file correctly :(

Upvotes: 2

Views: 3037

Answers (1)

Agent Zebra
Agent Zebra

Reputation: 4550

Ok I figured it out. Here's a working plunker

Firstly the json loader does not seem to like the .json file extension. Go figure... So first I changed the extension to .js (from .json).

Then I used the following JSON loading code, from Ben Chung: http://benchung.com/lesson-2-importing-model/ (Thanks Ben!).

    material = new THREE.MeshBasicMaterial({
    wireframe: true,
    color: 'blue'
    });

    group = new THREE.Object3D();

    var loader = new THREE.JSONLoader();
    loader.load('sole.js', modelLoadedCallback);
}

function modelLoadedCallback(geometry) {

        mesh = new THREE.Mesh( geometry, material );

        group.add(mesh);
        scene.add( group );

}

The entire JS looks like this: 

var scene, camera, renderer, geometry, material, cube, group;

init();
render();

function init() {

    scene = new THREE.Scene();

    camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 10000 );
    camera.position.z = 5;

    //set background to have transparency - alpha: true
    renderer = new THREE.WebGLRenderer({ alpha: true });
    renderer.setSize(window.innerWidth, window.innerHeight);

    document.getElementById("viewport").appendChild(renderer.domElement);


    material = new THREE.MeshBasicMaterial({
    wireframe: true,
    color: 'blue'
    });

    group = new THREE.Object3D();

    var loader = new THREE.JSONLoader();
    loader.load('sole.js', modelLoadedCallback);
}

function modelLoadedCallback(geometry) {

        mesh = new THREE.Mesh( geometry, material );

        group.add(mesh);
        scene.add( group );

}

function render() {
    requestAnimationFrame(render);
    mesh.rotation.y += 0.05;
    renderer.render(scene, camera);

The html looks like this:

<html>
<head>
  <style>canvas { width: 100%; height: 100% }</style>
</head>

<body>

  <div id="viewport"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r71/three.js"></script>
<script type="text/javascript" src="script.js"></script>
</body>
</html>

I tried this with both my json code and a json export of the regular cube from blender, they both worked.

Here's the json of the blender exported cube that worked:

{

    "metadata" :
    {
        "formatVersion" : 3.1,
        "generatedBy"   : "Blender 2.65 Exporter",
        "vertices"      : 8,
        "faces"         : 6,
        "normals"       : 8,
        "colors"        : 0,
        "uvs"           : [],
        "materials"     : 1,
        "morphTargets"  : 0,
        "bones"         : 0
    },

    "scale" : 1.000000,

    "materials" : [ {
        "DbgColor" : 15658734,
        "DbgIndex" : 0,
        "DbgName" : "Material",
        "blending" : "NormalBlending",
        "colorAmbient" : [0.6400000190734865, 0.6400000190734865, 0.6400000190734865],
        "colorDiffuse" : [0.6400000190734865, 0.6400000190734865, 0.6400000190734865],
        "colorSpecular" : [0.5, 0.5, 0.5],
        "depthTest" : true,
        "depthWrite" : true,
        "shading" : "Lambert",
        "specularCoef" : 50,
        "transparency" : 1.0,
        "transparent" : false,
        "vertexColors" : false
    }],

    "vertices" : [1,-1,-1,1,-1,1,-1,-1,1,-1,-1,-1,1,1,-1,0.999999,1,1,-1,1,1,-1,1,-1],

    "morphTargets" : [],

    "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],

    "colors" : [],

    "uvs" : [],

    "faces" : [35,0,1,2,3,0,0,1,2,3,35,4,7,6,5,0,4,5,6,7,35,0,4,5,1,0,0,4,7,1,35,1,5,6,2,0,1,7,6,2,35,2,6,7,3,0,2,6,5,3,35,4,0,3,7,0,4,0,3,5],

    "bones" : [],

    "skinIndices" : [],

    "skinWeights" : [],

    "animations" : []


}

However, it seems that blender also spits out JSON in a slightly different format; more indented levels, which does not work with this import/loader code... here's the json of the blender exported cube that DID NOT work:

{
    "geometries": [{
        "type": "Geometry",
        "uuid": "13A102A2-FCD7-346C-97EF-339AC4D7C55E",
        "data": {
            "bones": [],
            "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],
            "faces": [35,0,1,2,3,0,0,1,2,3,35,4,7,6,5,0,4,5,6,7,35,0,4,5,1,0,0,4,7,1,35,1,5,6,2,0,1,7,6,2,35,2,6,7,3,0,2,6,5,3,35,4,0,3,7,0,4,0,3,5],
            "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],
            "skinIndices": [],
            "metadata": {
                "bones": 0,
                "version": 3,
                "generator": "io_three",
                "materials": 1,
                "uvs": 0,
                "normals": 8,
                "morphTargets": 0,
                "colors": 0,
                "vertices": 8,
                "faces": 6
            },
            "name": "CubeGeometry.1",
            "morphTargets": [],
            "influencesPerVertex": 2,
            "uvs": [],
            "colors": [],
            "skinWeights": []
        },
        "materials": [{
            "colorAmbient": [0.64,0.64,0.64],
            "specularCoef": 50,
            "opacity": 1,
            "DbgName": "Material",
            "visible": true,
            "wireframe": false,
            "blending": "NormalBlending",
            "depthTest": true,
            "colorEmissive": [0,0,0],
            "vertexColors": false,
            "transparent": false,
            "shading": "phong",
            "DbgColor": 15658734,
            "depthWrite": true,
            "colorDiffuse": [0.64,0.64,0.64],
            "DbgIndex": 0,
            "colorSpecular": [0.5,0.5,0.5]
        }]
    }],
    "textures": [],
    "object": {
        "type": "Scene",
        "children": [{
            "type": "PerspectiveCamera",
            "name": "Camera",
            "uuid": "DE0714B3-5D16-30EF-9A0A-6C5D6DD394B9",
            "matrix": [-0.685881,-0.010817,0.727634,0,0.31737,0.895343,0.312469,0,-0.654862,0.445245,-0.610666,0,-7.48113,5.34366,-6.50764,1],
            "visible": true,
            "far": 100,
            "near": 0.1,
            "aspect": 1.77778,
            "fov": 35
        },{
            "type": "Mesh",
            "name": "Cube",
            "uuid": "F29D1AC4-D789-3D8E-BAB5-59DC1B758FE2",
            "matrix": [-1,0,0,0,0,0,1,0,0,1,0,0,0,0,0,1],
            "visible": true,
            "material": "FC9C3C1C-87E7-3748-8148-105003E5F3D5",
            "castShadow": true,
            "receiveShadow": true,
            "geometry": "13A102A2-FCD7-346C-97EF-339AC4D7C55E"
        },{
            "type": "PointLight",
            "name": "Lamp",
            "uuid": "480358C5-FC08-314B-A146-DEE8993A0407",
            "matrix": [0.290865,-0.055189,0.955171,0,0.771101,0.604525,-0.199883,0,-0.566393,0.794672,0.218391,0,-4.07625,5.90386,1.00545,1],
            "visible": true,
            "color": 16777215,
            "intensity": 1,
            "distance": 30
        }],
        "uuid": "9614A834-28AE-4B64-8D0F-B01723515C83",
        "matrix": [1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1]
    },
    "metadata": {
        "type": "Object",
        "version": 4.3,
        "generator": "io_three"
    },
    "images": [],
    "materials": [{
        "type": "MeshPhongMaterial",
        "uuid": "FC9C3C1C-87E7-3748-8148-105003E5F3D5",
        "vertexColors": false,
        "depthTest": true,
        "ambient": 10724259,
        "blending": "NormalBlending",
        "emissive": 0,
        "color": 10724259,
        "name": "Material",
        "shininess": 50,
        "specular": 8355711,
        "depthWrite": true
    }]
}

**Edit: I since found the following youtube videos, that give many clear examples of different export/import scenarios from blender to three.js: https://www.youtube.com/playlist?list=PLOGomoq5sDLutXOHLlESKG2j9CCnCwVqg (Being that I could not find much about this on SO, I figured I'd post the this for anyone else who's trying to figure this out).

Upvotes: 2

Related Questions