Loading separate objects in Three.js

My project involves an object that is separated into 9 files, namely file_1.obj to file_9.obj. I need to load all these files, merge them together, and then somehow incorporate the file.mtl with the final "big" object. How can I achieve this?

One possible solution that comes to mind is as follows:

mainObjGeometry = new THREE.Geometry();
loader.load( 'file_1.obj', function ( object ) {
    object.updateMatrix();
    mainObjGeometry.merge(object.geometry, object.matrix);
});
...
loader.load( 'file_9.obj', function ( object ) {
    object.updateMatrix();
    mainObjGeometry.merge(object.geometry, object.matrix);
});

After merging all objects, the next step would be to load the .mtl file and somehow connect it to the merged geometry (although the process for doing so is unclear).

However, a concern arises regarding tracking the loading progress of all objects using this method.

How should I address this issue? Is there a way to link "mainObjGeometry" with the material loaded from .mtl?

Answer №1

Keep track of the time when all files are loaded by utilizing the following example:

loader.load( 'file_9.obj', function ( object ) {
    object.updateMatrix();
    mainObjGeometry.merge(object.geometry, object.matrix);
});

To achieve this, implement the following code:

var totalModels = 0, loadedModels = 0;

function allLoadedCallback(){...}

loader.load( 'file_9.obj', function ( object ) {
    object.updateMatrix();
    mainObjGeometry.merge(object.geometry, object.matrix);
    loadedModels++
    if(loadedModel == totalModels) allLoadedCallback();

});
totalModels++;

In regards to the second part of the query, it is suggested to merge the model before exporting it. By doing so, the exported material will align logically. It is essential to ensure that materials are properly loaded before attempting to merge them using the utility.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ways to showcase a location on a map

Seeking a method to visually represent users' locations on a world map using HTML, JavaScript, or any other suitable approach. The data will be extracted from an Excel file and consists of the City Name only. Each user's location should be marked ...

The current object is not being referenced by this specific keyword

I am encountering an issue in my React application where I am trying to set the state of a child component using this.props, but it is showing an error saying props is undefined. It seems like 'this' is not referencing the current object correctl ...

Transforming ANSI to UTF-8 in Java

I have a JSON-formatted string with characters like \u0025 that I need to convert into their actual character representations. Is there a direct method in Java to perform this conversion? Perhaps something like myString.convertToUTF-8();? I am util ...

Step-by-step guide on transforming a raw hexadecimal image into an HTML img tag

I have a raw hexadecimal representation of an image, such as: "FF00FF00FF00" Each pair of letters represents the color of one pixel. For example, in this case it is 6 pixels alternating between white and black, forming a 2x3 pixel grid (width x height). ...

Transforming a div into a clickable hyperlink

I have a JavaScript function that generates a div with a link inside it. Here is how the div and link are created: $('#info').find('#link').text("View"); //Creates a new link var eventLink1 = document.createElement('a& ...

Is there a way to incorporate jQuery into SharePoint 2010?

I am encountering an issue with linking my HTML page to our organization's SharePoint 2010 portal. All necessary files (CSS, images, jQuery) are stored in the same document library. While the CSS is functioning properly, I am facing challenges with ge ...

Why does Safari browser keep showing NAN instead of a value?

In my quest to calculate the difference between two times in Safari browser, I encountered an issue. The code works perfectly fine in Chrome, but in Safari, it returns NAN. When I run the application for the first time, I save today's date. On subsequ ...

Enhance your web form with an auto-suggest textbox that allows for multiple selections,

Looking for assistance in implementing an auto complete text box with the ability to select multiple options using Dojo. Any experts out there who can offer their guidance? ...

Discover how to efficiently load and display a JSON array or object using JavaScript

I am new to learning about json and d3, having just started a few hours ago. While I have basic knowledge of javascript, I need help with loading a json file and displaying all the arrays and objects on the console using d3. I tried to do it myself but unf ...

What is the best method to remove a value from a JSON object in a CSV file?

I received a JSON response like this: xxx: ["fsd,das"] I am looking for a way to remove the value "fsd" from the JSON object. The issue is that the response inside the JSON is not actually an array, but rather a CSV format. How can I go about deleting it ...

Tips for designing a customizable color scheme for your website

Are you looking to implement a changeable color scheme for your website? Getting started can be daunting, especially if you're unfamiliar with sass. Would appreciate it if anyone could share some helpful tutorials or links? For example: example ...

Extracting the href attribute from a child <a> tag

I am struggling to retrieve the value of the href within the code structure below: <div class=""> <div class=""> <div class=""> <a href=""><img src=""></a> </div> </div> </div> The m ...

What is the best way to customize the behavior of multiple instances of ng-include within the same view?

My goal is to have unique behavior for each instance of the calendar that I include multiple times in my main HTML view. Specifically, I want to display 3 different dates based on the day selected in each calendar. In my main HTML view, I have included th ...

When using jQuery 1.7 or higher, the on(click..) function may not function correctly on dynamically added <li> elements

Currently, I am working on a dialogue that contains an unordered list with various suggestions. The HTML code for this section is as follows: <ul id="suggestions0"> <li id="suggestion0-0" class="suggestion">BLO</li> <li id="su ...

Unable to display results in the control: select2 version 4 ajax data is not showing up

Ever since transitioning to version 4 of the select2 plugin, I've encountered an issue with my ajax requests. Although I receive a response in the console showing as an array, the results are not appearing in the select2 control. The HTTP response l ...

I can't seem to get my code to work more than once

My code seems to be working only once. This is the HTML code snippet I am using: <span id="0" class="add-title">add title</span> And here is my JavaScript code: jQuery(document).ready(function($) { var iTitlesArray = []; $(document ...

When an ad call is successful in ajax, the response includes the usage of document

Currently, we are facing a challenge in loading an ad after an ajax load more. The ad call response contains document.write, which redirects to the ad itself once the call is made. Unfortunately, there is no straightforward method to only get the ad html a ...

Creating Duplicates of a Component in React

I am looking for a way to render multiple instances of the same component. Let's take a look at the component that needs to be duplicated (this is just a placeholder example, not the actual component): import React from 'react'; function Du ...

retrieve JSON information using jQuery

Hi everyone, I'm trying to figure out how to retrieve JSON data using an AJAX call. I attempted the following method, but it doesn't seem to be working :P First off, I created a JavaScript file where I stored my JSON data: var food = [ ...

Having trouble updating a partial view with ajax in MVC Razor after submitting a form from another partial view nested within it

On my website, there is a chat page similar to Facebook's. Initially, I set it up using a basic form submission method that would refresh the entire page whenever a post was made. Now, I am looking to switch to using ajax/jquery so that only my partia ...