2

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 :(

Improve this question
4
  • Can you change your function to loader.load( 'sole.json', function ( object ) { scene.add( object ); } ); and see what happens ... There seems to be some information about this here - stackoverflow.com/questions/23855693/… Commented Aug 6, 2015 at 2:11
  • 1
    According to the link I posted, it may be that you have exported it incorrectly. You need to have it exported as an object, whereas it looks like you have it exported as a 'MshGeometr' Commented Aug 6, 2015 at 2:28
  • Thanks again @Stretch. Nice link, didn't have what I needed tho. Unfortunately 'object' is not an export option from Blenders three.js exporter. Only Geometry and Buffer Geometry are options :( Commented Aug 6, 2015 at 4:47
  • @Stretch I found a solution, see my answer below. Commented Aug 6, 2015 at 6:00

1 Answer 1

Reset to default
2

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).

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Great to here you found a solution to your problem! However, make sure that your answer only contains answers, and doesn't ask further questions! With that in mind, I've edited the "question" part of your question out of the answer. Feel free to ask a new question to try and get to the bottom of that issue...
Well, I thought it was a great question following on from the above, now the question has gone, who knows what it was!

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.