How to export JavaScript from Blender

I’ve experimented with a few ways of getting models made with Blender into three.js so I could manipulate them programmatically. In general, this involves exporting a format from Blender, and importing a format with JavaScript. Unless of course you jump straight to JavaScript from Blender.

I tried VRML and X3D as “transport” formats, but found they had silly little issues that made them difficult to work with in three.js. I also tried exporting as a JSON file – with much less tediously finicky results. While VRML or X3D might be more “open standard” formats – I’m getting the feeling that if I’m going to be manipulating the models with JavaScript – I would do well to export the models AS JavaScript. Or rather, JavaScript Object Notation.

Here’s my first attempt:

That’s a Blender model, with 167 faces, exported as a JSON file, and imported into Javascript with THREE.JSONLoader. No plugins – just OpenGL2.0. And a little bit of JavaScript to make it boogie around the screen.

Now please do note that neither JavaScript, nor JSON, is any kind of format for the storage or transmission of 3D scene or model information. What you get when you export to a JSON file is some variables and arrays that can easily be fed to JavaScript, from which JavaScript can create scene objects.

The elegance of which goes nicely with the elegance of JavaScript itself…

The actual output

Anyway, here’s what that maple key looks like, output by Blender as something that is custom-made for JavaScript itself, and three.js in particular:

{
 "name": "SphereGeometry",
 "vertices": [-0.11113,-0.238139,0.131834,-0.184369,-0.328079,0.128437,-0.084263,-0.376098,0.095889,-0.019557,-0.387684,0.101152,-0.068019,-0.192599,0.076008,-0.131361,-0.212536,0.009712,-0.170234,-0.243392,-0.039053,-0.229655,-0.283566,-0.092251,-0.155188,-0.31826,-0.057242,-0.104494,-0.350495,-0.026233,-0.030506,-0.373828,0.03506,-0.046644,-0.177421,0.031211,-0.091865,-0.18449,-0.073061,-0.064998,-0.322448,-0.109006,-0.009131,-0.35865,-0.009736,-0.000434,-0.182326,0.123328,-0.002947,-0.168021,0.028671,-0.011123,-0.167122,-0.077755,0.016996,-0.31131,-0.115213,0.034567,-0.34925,-0.012277,0.042627,-0.168799,0.069576,0.073086,-0.16856,-0.002173,0.133712,-0.152352,-0.085395,0.184931,-0.186467,-0.148957,0.111935,-0.260802,-0.07277,0.099953,-0.306519,-0.038118,0.08014,-0.350028,0.028628,0.068752,-0.179391,0.134785,0.121359,-0.18813,0.118318,0.15996,-0.211504,0.102848,0.233077,-0.238878,0.106609,0.175007,-0.286372,0.08466,0.148226,-0.326089,0.082374,0.106265,-0.36062,0.093837,0.040072,-0.378447,0.078763,0.063204,-0.19484,0.193787,0.111108,-0.216677,0.22734,0.146567,-0.248801,0.245292,0.226735,-0.290344,0.313205,0.161614,-0.323669,0.227104,0.137975,-0.354635,0.191396,0.100718,-0.376069,0.15284,0.02858,-0.207918,0.218974,0.054986,-0.238587,0.271099,0.092466,-0.271911,0.29566,0.323077,-0.320747,0.518054,0.107513,-0.346779,0.277471,0.081853,-0.376546,0.235155,0.066093,-0.389147,0.178027,-0.01892,-0.212505,0.198561,-0.040638,-0.249317,0.236162,-0.048773,-0.290609,0.255782,-0.035526,-0.342872,0.312463,-0.033726,-0.365477,0.237594,-0.013771,-0.387276,0.200217,0.018593,-0.393734,0.157614,-0.05707,-0.206455,0.142099,-0.143801,-0.276843,0.120506,-0.128754,-0.351711,0.102318,-0.00995,0.65709,-3.31865,-0.175354,-0.215213,-0.153003,0.016811,0.555874,-3.37013,-0.193669,-0.271232,-0.281211,-0.098574,-0.308875,-0.165008,-0.217289,0.500502,-3.11077,0.236673,0.660566,-3.36184,-0.237406,0.170262,-1.78264,-0.272601,0.388407,-2.65106,0.011945,-0.288452,-0.171827,-0.264271,0.442835,-3.16016,-0.393067,0.19155,-2.26774,-0.348315,-0.03265,-1.34323,-0.161845,0.558802,-3.21278,-0.267228,0.357921,-2.65931,-0.230775,0.143661,-1.78881,-0.358472,0.079786,-1.34739,-0.397161,0.285738,-2.22884,-0.289916,0.539264,-3.11166,-0.012919,-0.055878,-0.837156,-0.020577,-0.03427,-0.829408,0.210391,0.718908,-3.37579,0.089983,-0.156632,-0.272864,-0.054887,-0.166057,-0.206543,8.1e-05,-0.154061,-0.149239,0.076896,-0.145553,-0.157303,-0.018972,-0.237603,-0.292021,0.098125,-0.174707,-0.285362,0.109591,-0.207732,-0.232871,0.030317,-0.259192,-0.228262,0.211997,0.608379,-3.42419,-0.220813,-0.005038,-1.3613,-0.212545,0.035295,-1.34839,-0.260757,0.215514,-2.26289,-0.249004,0.252026,-2.22923,-0.202873,0.479146,-3.08418,-0.217389,0.441502,-3.11772,-0.232594,0.54908,-3.08411,-0.207531,0.512058,-3.07703,-0.282521,0.315111,-2.22669,-0.255093,0.280087,-2.21988,-0.219719,0.060436,-1.3454,-0.251229,0.100875,-1.3543,0.094054,-0.165669,-0.279113,-0.216132,0.047866,-1.34689,-0.252049,0.266057,-2.22456,-0.016748,-0.045074,-0.833282,-0.269915,0.373164,-2.65519,-0.23409,0.156961,-1.78573,-0.15979,0.541523,-3.21593,0.635892,0.347785,-1.83357,0.639208,0.334484,-1.83666,0.774853,0.465489,-2.24297,0.771809,0.47952,-2.23829,0.747003,0.576764,-2.67695,0.749689,0.561521,-2.68108,0.566679,0.653421,-3.18988,0.564351,0.669877,-3.1863,0.208921,-0.002619,-0.842258,0.21275,-0.013423,-0.846132,0.320608,0.163294,-1.4545,0.317021,0.175865,-1.453,0.113972,-0.129208,-0.424383,0.118043,-0.138245,-0.430632,0.182717,-0.018226,-0.837267,0.178888,-0.007422,-0.833392,0.782833,0.492587,-2.2392,0.785878,0.478557,-2.24387,0.733561,0.579439,-2.67738,0.730874,0.594681,-2.67325,0.355845,0.21073,-1.44932,0.359432,0.198159,-1.45082,0.62301,0.34866,-1.82718,0.619694,0.36196,-1.82409,0.562591,0.682397,-3.18296,0.56492,0.665941,-3.18654,0.238314,0.651749,-3.38219,0.236259,0.669028,-3.37903],
 "normals": [-0.063204,-0.991272,-0.115574,-0.346507,-0.938017,-0.000275,-0.257546,-0.939665,-0.225105,-0.028901,-0.969939,-0.241554,-0.011841,-0.942289,-0.334483,-0.047609,-0.950713,-0.306375,0.320505,-0.871059,-0.372143,0.329936,-0.84695,-0.416852,-0.686758,0.704794,0.177679,-0.603504,0.774102,0.190954,-0.377178,0.92233,0.083712,-0.632435,0.767479,0.104678,-0.406659,0.88937,0.208869,-0.288369,0.951689,0.105197,0.080081,-0.938749,-0.335063,-0.790155,0.582354,-0.191046,0.250282,0.827204,0.503006,0.550127,0.764824,-0.335246,-0.453719,0.779229,-0.432295,-0.11243,0.991455,0.065767,-0.172002,0.982208,0.074923,0.259255,-0.895138,-0.36259,-0.973083,-0.226569,-0.041383,-0.658528,-0.738365,-0.145268,0.936216,0.103092,-0.335917,0.781762,-0.323222,-0.533219,0.906308,-0.053682,-0.419172,0.832636,0.543504,-0.106174,0.428602,0.903409,-0.011444,0.165014,0.982665,-0.084201,0.321451,0.945189,0.057009,0.595294,-0.68981,-0.412,0.404035,-0.851283,-0.334727,0.595935,-0.720237,-0.355022,0.312021,-0.872494,-0.375988,0.363079,-0.832118,-0.419202,-0.635578,-0.764183,-0.109745,0.524918,-0.816126,-0.241554,0.03003,0.994049,0.104587,0.091342,0.989654,0.110569,0.335643,0.920103,0.201788,0.403729,0.892117,0.202765,0.703787,-0.668203,-0.241096,0.716819,-0.65215,-0.246651,0.990295,0.13773,-0.018036,0.091189,0.975158,0.201849,0.466018,-0.852077,-0.238197,0.627979,-0.775323,-0.066805,0.645375,-0.762413,0.046785,0.301492,0.890439,0.340892,0.977508,0.206641,-0.041993,0.049501,0.938505,0.341655,0.322794,0.838374,0.439192,0.430097,-0.897855,-0.094058,-0.162542,0.866604,0.471694,-0.105472,0.666585,0.737907,0.213904,-0.913175,0.346873,0.209571,-0.976775,0.044099,0.453017,-0.123417,0.8829,0.259499,-0.955718,0.138646,-0.091891,0.811151,0.577532,-0.202338,-0.94058,0.272652,0.010437,-0.999939,-0.002625,-0.558275,-0.300088,0.773461,-0.249672,-0.926115,0.282693,-0.502182,0.573534,0.647175,-0.549394,0.534196,0.642476,-0.354076,0.831141,0.428724,-0.432844,-0.90054,0.040193,-0.890439,-0.268258,0.367565,-0.331523,-0.92822,-0.168676,-0.726707,0.562853,0.393719,-0.664724,0.638173,0.388348,-0.429884,0.842128,0.32551,-0.191626,0.953703,0.231666,0.191687,-0.953703,-0.231697,-0.797449,0.566179,0.208411,-0.155675,0.981109,0.114597,0.169103,0.959807,0.223914,-0.176214,0.983947,0.027314,-0.564257,-0.574389,-0.593005,-0.207739,-0.454573,-0.866115,0.741691,-0.057833,-0.668203,0.558641,-0.827509,0.055544,-0.827235,0.550096,0.1142,0.432508,0.870388,0.235145,0.291269,0.944487,-0.151921,0.812189,0.525651,-0.252968,0.943083,0.318796,-0.094455,0.452254,0.817469,0.356639,-0.622944,-0.748222,-0.228248,0.760643,-0.632405,-0.146397,0.334056,-0.926298,-0.174169,0.831355,-0.549486,-0.082705,0.876064,-0.203375,0.437117,-0.114475,0.987823,0.105289,0.89169,0.329875,-0.309885,0.713675,-0.498764,-0.491745,0.652425,-0.757134,0.032899,0.911039,-0.185064,-0.368419,0.917112,-0.358806,0.173498,0.939909,-0.191137,0.282876,0.754906,0.508835,0.413678,0.888791,0.422498,-0.177435,0.63686,0.76104,-0.123295,0.991913,-0.125523,0.017579,0.810144,0.351421,0.469192,0.975372,0.219214,0.023804,0.978698,0.204901,-0.012207,0.366588,0.518967,0.772149,0.615925,-0.623432,0.481582,0.74807,-0.242988,-0.617512,0.522782,0.802942,-0.286233,0.588519,0.531205,0.609424,0.777398,-0.541948,0.319193,0.502457,-0.592792,-0.629353,0.530992,0.57918,-0.618519,0.38728,0.499496,0.774895,0.681997,-0.589709,0.432508,0.704123,-0.290445,-0.647908,0.412793,0.773156,-0.481429,0.573199,0.767388,0.28724,0.820582,-0.571032,-0.023408,0.704703,-0.257149,-0.661245,0.480667,0.809564,-0.336924,0.510453,0.503586,0.696982,0.734764,-0.572253,0.364116,0.614154,-0.292764,-0.732841,0.402509,0.80752,-0.431104,0.275674,0.574633,0.770562,0.568255,-0.633656,0.524918,0.832179,-0.233985,-0.502701,0.553941,0.795953,-0.244026,0.945219,-0.184759,-0.269051,0.612384,-0.736412,-0.287484,0.127293,-0.420301,-0.898404,-0.060183,0.771599,-0.633198],
 "metadata": {
 "version": 3,
 "type": "Geometry",
 "vertices": 137,
 "normals": 137,
 "generator": "io_three",
 "uvs": 0,
 "faces": 167
 },
 "uvs": [],
 "faces": [33,3,2,9,10,0,1,2,3,33,13,63,68,18,4,5,6,7,33,6,5,12,60,8,9,10,11,33,5,4,11,12,9,12,13,10,33,10,9,13,14,3,2,4,14,33,77,96,80,59,15,16,17,18,33,12,11,16,17,10,13,19,20,33,14,13,18,19,14,4,7,21,33,7,6,60,62,22,8,11,23,32,23,87,86,24,25,26,32,86,102,81,26,27,28,32,81,84,22,28,29,30,32,22,23,86,30,24,26,32,86,81,22,26,28,30,33,19,18,25,26,21,7,31,32,33,18,68,24,25,7,6,33,31,32,68,63,62,6,5,23,32,62,85,88,23,34,35,32,62,88,68,23,35,6,33,62,71,90,85,23,36,37,34,33,17,16,20,21,20,19,38,39,33,22,21,28,29,30,39,40,41,33,25,24,31,32,31,33,42,43,33,23,22,29,30,24,30,41,44,33,21,20,27,28,39,38,45,40,33,26,25,32,33,32,31,43,46,33,24,23,30,31,33,24,44,42,33,32,31,39,40,43,42,47,48,33,30,29,37,38,44,41,49,50,33,28,27,35,36,40,45,51,52,33,33,32,40,41,46,43,48,53,33,31,30,38,39,42,44,50,47,33,29,28,36,37,41,40,52,49,33,36,35,42,43,52,51,54,55,33,41,40,47,48,53,48,56,57,33,39,38,45,46,47,50,58,59,33,37,36,43,44,49,52,55,60,33,40,39,46,47,48,47,59,56,33,38,37,44,45,50,49,60,58,33,48,47,54,55,57,56,61,62,33,46,45,52,53,59,58,63,64,33,44,43,50,51,60,55,65,66,33,47,46,53,54,56,59,64,61,33,45,44,51,52,58,60,66,63,33,43,42,49,50,55,54,67,65,33,58,1,7,8,68,69,22,70,33,57,0,5,6,71,72,9,8,32,56,15,4,73,74,12,32,34,3,10,75,0,3,33,2,58,8,9,1,68,70,2,33,1,57,6,7,69,71,8,22,33,0,56,4,5,72,73,12,9,32,34,10,14,75,3,14,32,4,15,11,12,74,13,32,11,15,16,13,74,19,32,34,14,19,75,14,21,32,16,15,20,19,74,38,32,34,19,26,75,21,32,32,20,15,27,38,74,45,32,34,26,33,75,32,46,32,34,33,41,75,46,53,32,27,15,35,45,74,51,32,35,15,42,51,74,54,32,34,41,48,75,53,57,32,42,15,49,54,74,67,32,34,48,55,75,57,62,32,49,15,56,67,74,73,32,34,55,3,75,62,0,33,54,53,58,2,61,64,68,1,33,52,51,57,1,63,66,71,69,33,56,0,50,49,73,72,65,67,33,55,54,2,3,62,61,1,0,33,53,52,1,58,64,63,69,68,33,0,57,51,50,72,71,66,65,33,9,8,63,13,2,70,5,4,33,8,7,62,63,70,22,23,5,33,75,71,62,60,76,36,23,11,33,60,82,101,75,11,77,78,76,32,24,68,88,33,6,35,32,88,87,23,35,25,24,32,88,23,24,35,24,33,32,22,84,83,30,29,79,32,83,17,21,79,20,39,32,83,21,22,79,39,30,33,69,61,89,95,80,81,82,83,33,76,98,96,77,84,85,16,15,33,79,105,103,100,86,87,88,89,33,75,101,98,76,76,78,85,84,32,82,60,12,77,11,10,32,12,17,83,10,20,79,32,12,83,82,10,79,77,33,71,70,92,90,36,90,91,37,33,70,69,95,92,90,80,83,91,33,59,61,69,77,18,81,80,15,33,77,69,70,76,15,80,90,84,33,76,70,71,75,84,90,36,76,33,81,82,83,84,28,77,79,29,33,85,86,87,88,34,26,25,35,32,108,94,95,92,93,83,32,96,97,72,16,94,95,32,108,95,89,92,83,82,32,80,96,72,17,16,95,32,72,108,89,95,92,82,32,89,65,80,82,96,17,32,72,89,80,95,82,17,32,100,101,82,89,78,77,32,82,81,79,77,28,86,32,82,79,100,77,86,89,32,86,85,90,26,34,37,32,90,91,78,37,97,98,32,90,78,86,37,98,26,32,91,90,92,97,37,91,32,92,93,74,91,99,100,32,92,74,91,91,100,97,32,93,92,95,99,91,83,32,95,94,73,83,93,101,32,95,73,93,83,101,99,32,97,96,98,94,16,85,32,98,99,67,85,102,103,32,98,67,97,85,103,94,32,99,98,101,102,85,78,32,101,100,66,78,89,104,32,101,66,99,78,104,102,32,89,61,59,82,81,18,32,59,80,65,18,17,96,32,59,65,89,18,96,82,33,102,86,78,105,27,26,98,87,33,67,106,64,97,103,105,106,94,33,104,93,73,106,107,99,101,105,33,66,107,104,99,104,108,107,102,33,103,91,74,107,88,97,100,108,32,64,94,108,106,93,92,33,109,110,111,112,109,110,111,112,33,74,110,109,107,100,110,109,108,33,93,111,110,74,99,111,110,100,33,104,112,111,93,107,112,111,99,33,107,109,112,104,108,109,112,107,33,113,114,115,116,113,114,115,116,33,73,114,113,106,101,114,113,105,33,94,115,114,73,93,115,114,101,33,64,116,115,94,106,116,115,93,33,106,113,116,64,105,113,116,106,33,117,118,119,120,117,118,119,120,33,78,118,117,105,98,118,117,87,33,91,119,118,78,97,119,118,98,33,103,120,119,91,88,120,119,97,33,105,117,120,103,87,117,120,88,33,121,122,123,124,121,122,123,124,33,102,122,121,81,27,122,121,28,33,105,123,122,102,87,123,122,27,33,79,124,123,105,86,124,123,87,33,81,121,124,79,28,121,124,86,33,125,126,127,128,125,126,127,128,33,104,126,125,99,107,126,125,102,33,106,127,126,104,105,127,126,107,33,67,128,127,106,103,128,127,105,33,99,125,128,67,102,125,128,103,33,129,130,131,132,129,130,131,132,33,103,130,129,100,88,130,129,89,33,107,131,130,103,108,131,130,88,33,66,132,131,107,104,132,131,108,33,100,129,132,66,89,129,132,104,33,133,134,135,136,133,134,135,136,33,64,134,133,97,106,134,133,94,33,108,135,134,64,92,135,134,106,33,72,136,135,108,95,136,135,92,33,97,133,136,72,94,133,136,95]
}

Which, by the way is a 13KB file.



One interesting thing about this loader, that I didn’t see with the other loaders I’d tried, is this:

var loader = new THREE.JSONLoader();
 loader.load('maple-key-12.json', modelLoadedCallback);
 function modelLoadedCallback(geometry) {
 key = new THREE.Mesh( geometry, keyMaterial );
 scene.add (key );
 keyReady = true;
 }

This seems kinda nice – I think the idea is so that your init() can keep running while the models are loading, unlike the more primitive loaders that wait for the file to arrive.

Anyway, that’s one little difference – but the big difference between this technique, and techniques that involve X3D or VRML – is that the Blender exporter for JSON and three.js, doesn’t ship with Blender. You gotta go get it – you gotta put it in the right place in your Blender installation – and the you have to activate it, before you can use it. (All described at GitHub)

But once you’ve got the exporter in place and the loader working properly – it seems to be the most seamless way to get Blender stuff into three.js.

Which I guess shouldn’t come as a surprise, as it is a process that does not involve translation into and out of a third, intermediary, language.

 

Tweet about this on TwitterShare on Google+Share on LinkedInShare on FacebookEmail this to someone

Author: Pete

Editor-in-Chief, Lead Software Developer and Artistic Director @ 3dspace.com

One thought on “How to export JavaScript from Blender”

Comments are closed.