Export faces and face materials from Blender for three.js

Question

I'm trying to import a Blender-designed mesh into a three.js project.

I've added the io_three addon and I can now export json files for Blender.

When I try to load the mesh (with a THREE.JSONLoader) I get an "Uncaught TypeError: Cannot read property 'length' of undefined" from line 684 of three.min.js - which sounds to me like an array is going undefined.

I have read that, in Blender, the 'face materials' check box is supposed to be checked in the three.js exporter but for me that option is greyed out. Also I've noticed that, in the Geometry section of the three exporter, the option to export faces is unchecked and greyed out. I suspect this is the problem, but why am I not able to check these check boxes?

Does anyone have any ideas why Blender might be preventing me from enabling the 'face materials' and 'faces' options in the three.js exporter?

Edit
For the sake of completeness, here's the code I'm using to load the mesh:

var loader = new THREE.JSONLoader();
// load a resource
loader.load( 'assets/meshes/cube.json', function ( geometry ) {
        var material = new THREE.MeshLambertMaterial( { color: 0x006666 } );
        mesh = new THREE.Mesh(geometry, material);
        scene.add( mesh );
    }
)

The cube.json file is, indeed, in the assets/mesh folder.
And I have also tried loading it as 'cube.js' (altering the file extension in windows) but the initial problem I'd like to address is the one of exporting from Blender. Thanks.

And here's the cube.json file that's not playing ball...

{
    "data":{
        "index":{
            "type":"Uint16Array",
            "array":[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35],
            "itemSize":1
        },
        "attributes":{
            "uv":{
                "type":"Float32Array",
                "array":[1,0,0,1,0,0,0.999999,1,0,0,1,0,0.999999,1,0,0,1,0,0.999999,1,0,0,1,0,1,0,0,1,0,0,0.999999,1,0,0,1,0,1,0,0.999999,1,0,1,0.999999,1,0,1,0,0,0.999999,1,0,1,0,0,0.999999,1,0,1,0,0,1,0,0.999999,1,0,1,0.999999,1,0,1,0,0],
                "itemSize":2
            },
            "normal":{
                "type":"Float32Array",
                "array":[-7.10543e-15,-1,2.98023e-08,-7.10543e-15,-1,2.98023e-08,-7.10543e-15,-1,2.98023e-08,7.10543e-15,1,-2.98023e-08,7.10543e-15,1,-2.98023e-08,7.10543e-15,1,-2.98023e-08,1,-2.38419e-07,7.10543e-15,1,-2.38419e-07,7.10543e-15,1,-2.38419e-07,7.10543e-15,-5.96046e-08,-2.98023e-07,1,-5.96046e-08,-2.98023e-07,1,-5.96046e-08,-2.98023e-07,1,-1,-1.49012e-07,-2.38419e-07,-1,-1.49012e-07,-2.38419e-07,-1,-1.49012e-07,-2.38419e-07,2.38419e-07,1.78814e-07,-1,2.38419e-07,1.78814e-07,-1,2.38419e-07,1.78814e-07,-1,-1.77636e-15,-1,2.98023e-08,-1.77636e-15,-1,2.98023e-08,-1.77636e-15,-1,2.98023e-08,1.5099e-14,1,-2.98023e-08,1.5099e-14,1,-2.98023e-08,1.5099e-14,1,-2.98023e-08,1,3.27825e-07,5.66244e-07,1,3.27825e-07,5.66244e-07,1,3.27825e-07,5.66244e-07,-5.0664e-07,1.49012e-07,1,-5.0664e-07,1.49012e-07,1,-5.0664e-07,1.49012e-07,1,-1,-1.19209e-07,-2.08616e-07,-1,-1.19209e-07,-2.08616e-07,-1,-1.19209e-07,-2.08616e-07,2.38419e-07,1.78814e-07,-1,2.38419e-07,1.78814e-07,-1,2.38419e-07,1.78814e-07,-1],
                "itemSize":3
            },
            "position":{
                "type":"Float32Array",
                "array":[1,-1,-1,-1,-1,1,-1,-1,-1,-1,1,-1,0.999999,1,1,1,1,-1,1,1,-1,1,-1,1,1,-1,-1,0.999999,1,1,-1,-1,1,1,-1,1,-1,-1,1,-1,1,-1,-1,-1,-1,1,-1,-1,-1,1,-1,1,1,-1,1,-1,-1,1,-1,1,-1,-1,1,-1,1,-1,-1,1,1,0.999999,1,1,1,1,-1,0.999999,1,1,1,-1,1,0.999999,1,1,-1,1,1,-1,-1,1,-1,-1,1,-1,1,1,-1,1,-1,1,-1,-1,-1,-1,-1,-1,1,-1],
                "itemSize":3
            }
        }
    },
    "metadata":{
        "normal":36,
        "type":"BufferGeometry",
        "uv":36,
        "generator":"io_three",
        "position":36,
        "version":3
    }
}

can you verify that you're using the latest build r87 and the latest exporter as well? — OtterFamily
I downloaded the three.js-master.zip at the end of last week (22/6/2017) and the io_three addon, likewise. Just looking through the zip again now; How would I establish which version it is? — moosefetcher
console readout from chrome. hit ctrl-shift-i in chrome to check console readout. three always spits out version number first — OtterFamily
Thanks. First console log is "THREE.WebGLRenderer 86", so I guess r86? If you know what's happening within Blender, that would be great to hear too (That's version 2.77, FYI) — moosefetcher
I still don't see a fiddle linking to your code in your post. I can't debug what i cant see. Show me the simplest version of it failing and i can troubleshoot. I'm not convinced this isn't a code issue. — OtterFamily

OtterFamily OtterFamily · Accepted Answer · 2017-06-27T16:02:18

In cube.json is declares its type as "BufferGeometry"

if you swap THREE.JSONLoader for THREE.BufferGeometryLoader it works fine

var loader = new THREE.BufferGeometryLoader();
        loader.load("cube.json", function (g) {
            var mesh = new THREE.Mesh(g, new THREE.MeshBasicMaterial({color:0xffffff}));
            scene.add(mesh);
        });

Export faces and face materials from Blender for three.js

1 Answers