Is there a way to combine various Blender JSON models into a single Three.js Object3D entity?

Question

Is there a way to combine various Blender JSON models into a single Three.js Object3D entity?

Is there a way to combine multiple Blender JSON models into a single Three.js Object3D object? I've searched Google for answers but haven't found any solutions yet.

javascript three.js

Answer 1

Answer №1

Have you considered merging them in Blender before exporting as a single object?

In Three.js, you can merge geometries and even materials if they are identical. However, if your geometries are not identical or if you have multiple materials, it can be challenging...

I've been grappling with the same issue myself and haven't found any solutions within Three.js yet. I'm thinking about trying to merge them in Blender instead. On the other hand, coding this directly in the engine might actually be easier than using Blender. It's definitely a complex piece of software to navigate through!

Answer 2

Have you considered merging them in Blender before exporting as a single object?

In Three.js, you can merge geometries and even materials if they are identical. However, if your geometries are not identical or if you have multiple materials, it can be challenging...

I've been grappling with the same issue myself and haven't found any solutions within Three.js yet. I'm thinking about trying to merge them in Blender instead. On the other hand, coding this directly in the engine might actually be easier than using Blender. It's definitely a complex piece of software to navigate through!

Answer 3

Answer №2

Is there a specific rationale behind needing the exported JSON objects to be grouped under a single Three.js Object3D? Would it suffice to manage both objects under one parent object instead?

You have the option to add the objects as children to an empty parent object and control them that way. Check out this gist for a demonstration.

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

Edit

Take a look at this scene, which illustrates what you mentioned in the comments. Experiment with changing the number of boxes per side (resulting in side^2 boxes) and toggling the parent functionality.

Note: As of 4/25/16, there's a known issue in Chrome that may cause texture race conditions. Reloading the page might resolve any display anomalies with the boxes.

In response to your points:

The parent object should allow users to add and remove objects from it,

Object3D provides methods like .add() and .remove() for that purpose.

.add ( object, ... )

.remove ( object, ... )

and the parent needs to be rotatable as a whole.

This is precisely how parenting functions. Simply execute something similar to:

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

Subsequently, all child objects will rotate alongside the parent. It is important to note that they rotate relative to the world rotation (as they practically did), leaving their individual transformations unaffected.

Merging the children into a single parent would prevent choppy animations.

Not necessarily. Unless your objective involves minimizing draw calls (more details below), employing a parenting object does not noticeably impact frame rate. Based on swift tests, rendering 10k objects on an aging Macbook Air does not lead to crashes, even if it strains the system. With 10k objects, performance will inevitably suffer regardless.

By consolidating all geometry together, draw calls are reduced and processing speeds up. It's worth noting that the geometry remains completely static relative to other objects. Therefore, unless you can opt for a straightforward solution recommended by Scharnvirk (merging your objects in Blender and importing as a singular entity), you could slightly save bandwidth by dynamically cloning the geometry. In this scenario, refer to the merge() function in three.js Geometry:

.merge ( geometry, matrix, materialIndexOffset )

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

Answer 4

Is there a specific rationale behind needing the exported JSON objects to be grouped under a single Three.js Object3D? Would it suffice to manage both objects under one parent object instead?

You have the option to add the objects as children to an empty parent object and control them that way. Check out this gist for a demonstration.

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

Edit

Take a look at this scene, which illustrates what you mentioned in the comments. Experiment with changing the number of boxes per side (resulting in side^2 boxes) and toggling the parent functionality.

Note: As of 4/25/16, there's a known issue in Chrome that may cause texture race conditions. Reloading the page might resolve any display anomalies with the boxes.

In response to your points:

The parent object should allow users to add and remove objects from it,

Object3D provides methods like .add() and .remove() for that purpose.

.add ( object, ... )

.remove ( object, ... )

and the parent needs to be rotatable as a whole.

This is precisely how parenting functions. Simply execute something similar to:

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

Subsequently, all child objects will rotate alongside the parent. It is important to note that they rotate relative to the world rotation (as they practically did), leaving their individual transformations unaffected.

Merging the children into a single parent would prevent choppy animations.

Not necessarily. Unless your objective involves minimizing draw calls (more details below), employing a parenting object does not noticeably impact frame rate. Based on swift tests, rendering 10k objects on an aging Macbook Air does not lead to crashes, even if it strains the system. With 10k objects, performance will inevitably suffer regardless.

By consolidating all geometry together, draw calls are reduced and processing speeds up. It's worth noting that the geometry remains completely static relative to other objects. Therefore, unless you can opt for a straightforward solution recommended by Scharnvirk (merging your objects in Blender and importing as a singular entity), you could slightly save bandwidth by dynamically cloning the geometry. In this scenario, refer to the merge() function in three.js Geometry:

.merge ( geometry, matrix, materialIndexOffset )

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

Is there a way to combine various Blender JSON models into a single Three.js Object3D entity?

Answer №1

Answer №2

Edit

Similar questions

Is there a way to make the primary button on the previous page function correctly again, just like it did before it was clicked?

Using the Parallax Effect in React

The GLSL shaders in Three.js seem to be malfunctioning

Is the express.json() middleware for parsing JSON request body designed to handle synchronous calls?

The ViewChild instance is currently undefined

Best practice for structuring an object with multiple lengthy string elements in the GCP Datastore Node Library

Entwine words around an immovable partition

The issue of Next.JS fetch not caching data within the same request

What is the best way to sort and organize JSON data?

How can I replace the unsightly "Web page not available" error in WebView on Android with a more visually pleasing alternative?

Separate string by using a regular expression pattern

What could be the reason behind ejs not allowing if else statements when the variable is undefined?

Unraveling the mystery: Retrieving data from various child components within a Vue parent component

Guide to changing the class of a particular child element when the parent element is clicked with vanilla JavaScript

Troubleshooting VueJs and vue-i18n issues

customize Form Modal Bootstrap with AJAX Chained Dropdown for pre-selected options

What steps can I take to establish a simple yet secure password authentication using next.js, mongoDB, and bcrypt?

Is there a way to narrow down Drive API list results based on a specific domain that has write permission?

Tips for implementing vue.js composition api with vue-3-socket.io

Could not locate module: The package path ./react is not exported from the package in E:NextAppportfolio_website-mainportfolio_website-main ode_modules ext-auth