Loading multiple objects in Three.js from Blender

Question

I have a quite complex shape (dressed girl) that in Blender is broken down into different objects and it's loaded into Three.js with the JSON loader (with a little hack I made, that uses zipped files instead of just JSON files, as there are a lot of vertices).

As I want to change dynamically the style of the dress from a Web page, I was wondering how I can show/hide different pieces (e.g. sleeves) in the scene.

I tried traversing the THREE.Mesh, but there are no children.

When I export from Blender with the JSON exporter, I don't see anything referring to the names of the objects in the JSON. Is the structure lost?

I saw this question and noticed that you got openctm to work with Blender. I was wondering if you could answer my question: stackoverflow.com/questions/23073947/…. It seems to me that the openctm scripts don't work with Blender 2.7. — acarlon
– acarlon, Commented Apr 15, 2014 at 3:06
Similar issue , got one model.js and cant separate the meshes once i have loaded it...for example i have 5 objects in the one file but cant access them individually :myobject.children " item1" cant seem to work it out — joshua
– joshua, Commented Aug 8, 2014 at 6:17

ThisIsSparta · Accepted Answer · 2013-10-31 14:29:09Z

2

If you are using meshes containing lots of vertices, I would advise you to use the openCTM webGL loader instead of zip hacking. Here is a link to the loader : http://threejs.org/examples/webgl_loader_ctm.html
This mesh compression tool uses LZMA compression method and can reduce the size of your files by 93%...

Concerning the JSONLoader, using an array might help:

var meshes = [];
...
var loader = new THREE.JSONLoader();
var onGeometry = function(geom)
{
    var mesh = new THREE.SceneUtils.createMultiMaterialObject(geom, [material]);
    meshes.push( mesh );
    ...
    scene.add(mesh);
};

loader.load("yourfile.js", onGeometry);

Hope this helps

edited Oct 31, 2013 at 14:29

answered Oct 31, 2013 at 12:48

ThisIsSparta

1,30713 silver badges22 bronze badges

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

5 Comments

aledalgrande Over a year ago

Hey Qt, thanks, but I was trying to understand how to load from a single file, all of the objects, as they are in Blender. The number of objects I'd have to load would 1) create a mess in my code and 2) have a greater overhead while loading.

aledalgrande Over a year ago

Yep, I've done it. In the end I did as you suggested, I changed my workflow to have less meshes. And using OpenCTM. Thanks!

ThisIsSparta Over a year ago

Glad to hear that. Good luck for your project.

kevzettler Over a year ago

I don't think this really answers the question. What if yourfile.js includes multiple meshes?

Starwave Over a year ago

Well this array thing certainly doesn't work @r72 when loading a json file which has exported "Scene" in it, containing multiple meshes.

Community · Accepted Answer · 2017-05-23 11:46:25Z

It is possible to load an entire scene with several meshes from a json file exported from Blender and handle them separately!

You can follow the complete process of exporting a entire scene from Blender and the right way of handling the exported meshes on my answer of this post.

So, you can get the different meshes and manipulate them separately using the getObjectByName method. But it is important to know that the loaded object isn't a Geometry anymore. It is labeled with the Scene type by now and it must be handled in a different way.

The loading code must look like this one:

    loader = new THREE.JSONLoader();
    loader.load( "obj/Books.json", function ( loadedObj ) {
        var surface = loadedObj.getObjectByName("Surface");
        var outline = loadedObj.getObjectByName("Outline");
        var mask = loadedObj.getObjectByName("Mask");
        scene.add(surface);
        scene.add(outline);
        scene.add(mask);
    } );

Besides, you can handle the multiple materials of single mesh using THREE.MeshFaceMaterial like in the following code:

var mat1 = new THREE.MeshLambertMaterial( { map: texture1 } );
var mat2 = new THREE.MeshLambertMaterial( { map: texture2 } );
var materials = [mat1, mat2];
var faceMat = new THREE.MeshFaceMaterial(materials);
mesh = new THREE.Mesh( geometry, faceMat );
scene.add( mesh );

Hope this helps :)

Collectives™ on Stack Overflow

Loading multiple objects in Three.js from Blender

2 Answers 2

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related