Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

THREE.JS Exporting JSON models from blender (including textures)

I'm using the mrdoob Blender Export Plugin (io_mesh_threejs) to Export to Three JS, but the exported .js or .dae objects do not contain any reference to the texture map files. Is there a special way I need to export the object? Alternatively, is there a special way I need to apply the map to the object in Blender 2.65 in order for the exporter to include it. Lastly, if there is not a way, can I manually add the texture in the JS file?


Blender Before Export

enter image description here


JSON Object Exported (without reference to texture)

{

    "metadata" :
    {
        "formatVersion" : 3.1,
        "generatedBy"   : "Blender 2.65 Exporter",
        "vertices"      : 8,
        "faces"         : 6,
        "normals"       : 8,
        "colors"        : 0,
        "uvs"           : [4],
        "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,-0.988938,-1,1,-0.988938,1,-1,-0.988938,1,-1,-0.988938,-1,1,1.01106,-0.999999,0.999999,1.01106,1,-1,1.01106,1,-1,1.01106,-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" : [[1,-0,1,1,0,1,-0,0]],

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

    "bones" : [],

    "skinIndices" : [],

    "skinWeights" : [],

    "animation" : {}


}

Code To Load JSON Object

var object;
var loader = new THREE.JSONLoader();          

loader.load( "./quirk_logo.js", function(geometry, materials) {
     var material = new THREE.MeshFaceMaterial(materials);
     object = new THREE.Mesh(geometry, materials);

     object.scale.set(1, 1, 1);
     scene.add(object)
     render();
});
like image 378
sparkyspider Avatar asked Mar 06 '13 11:03

sparkyspider


People also ask

Can Blender export to three Js?

To get Blender to export Three. js models, we first need to add the Three. js exporter to Blender. The following steps are for Mac OS X but are pretty much the same on Windows and Linux.

How do I export a model with texture from Blender to unity?

To import the model to the Assets folder, drag and drop the Blender file to the Assets panel in the mid-lower section. Alternatively, move and save the Blender file to the Assets folder of the Unity project. To place the model in the Unity scene, simply drag and drop the model from the Assets panel to the scene.


3 Answers

I think you can first export your model to .obj from your Blender and then follow the rest part of this tutorial to get your right .json model.
http://bkcore.com/blog/3d/webgl-three-js-workflow-tips.html

like image 102
Manhhailua Avatar answered Nov 15 '22 03:11

Manhhailua


This should be what you are looking for.

http://graphic-sim.com/B_basic_export.html

like image 22
Yazuka Avatar answered Nov 15 '22 05:11

Yazuka


Take a look at the example i cooked up .

https://github.com/master-atul/blender3js

U can see the working example here :

http://www.atulr.com/blender3js

You can check out my code from my repo link.

And if you wish to know the export options i used :

I directly exported the animations and everything from blender with options described here.

https://devmatrix.wordpress.com/2013/02/27/creating-skeletal-animation-in-blender-and-exporting-it-to-three-js/

Hope this helps Cheers :)

like image 25
Atul Avatar answered Nov 15 '22 04:11

Atul