How do I merge multiple Blender JSON models into a Three.js Object3D object?

Question

How do I merge multiple Blender JSON models into a Three.js Object3D object? Google is of no hope as far as I can tell.

Answer 1

What if you merged them Blender-side and then exported as a whole object?

In Three.js you can merge geometries and if they're identical, also materials, but if you don't have identical geometries and have multple materials, you're out of luck...

I am struggling with the same exact question and so far I didn't find any solutions in Three.js itself, so trying to do it Blender-side. On the other hand, hardcoding this engine-side might be easier than using Blender. This is one tough piece of software to understand ^^

Answer 2

Is there a reason you need the exported JSON objects to end up in exactly one Three.js Object3D? Is it enough to control both objects with one parent object?

You can add the objects as children to an empty parent object and then control that. This gist demos the process.

var parent = new THREE.Object3D();
parent.add(blenderObj1);
parent.add(blenderObj2);
parent.scale.set(1,2,0.5);

Edit

Here's a scene that demos in what you mention in the comments. Try changing the number of boxes per side (you'll get side^2 boxes) and toggling the parent.

Quick side note: As of 4/25/16, there's a bug in Chrome that can cause a texture race condition. Reloading the page can help if the boxes look funny.

To address your points:

The parent object must allow users to add and remove objects from the parent,

Object3D has .add() and .remove() that do just that.

.add ( object, ... )

.remove ( object, ... )

, and the parent must be able to be rotated as a whole.

This is exactly how parenting works. Just do something like:

parent.rotation.x = Math.PI / 2;

And all the children rotate with the parent. Note, they rotate as if the world rotated (since for them, it did). Their individual transforms are untouched.

Not merging the children into a single parent would create jagged animation.

Not inherently. Assuming you aren't out to reduce draw calls (more on this below), use of a parenting object does not significantly influence the frame rate. My quick tests on an old Macbook Air renders 10k objects without any crashes, even if it starts to run hot. Performance is going to suffer with 10k objects no matter what you do.

Having all your geometry all together will reduce your draw calls and speed things up. Keep in mind that all of the geometry will be completely static relative to each other object. So, assuming you can't take the obvious, elegant, and far simpler solution suggested by Scharnvirk (make your merged object in Blender and take that as a single object), you could save a small bit of bandwidth by cloning the geometry on the fly. In which case, three.js Geometry has a merge() function

.merge ( geometry, matrix, materialIndexOffset )

Merge two geometries or geometry and geometry from object (using object's transform)