The mesh loader titled OBLMTLLoader is currently empty

I've encountered a perplexing issue when switching from OBJLoader to OBJMTLLoader in my code. The OBJ file I'm working with contains groups that are loaded by both loaders into different child meshes.

In both cases, the scene has a THREE.Object3D as a child with 1837 children. However, upon inspecting the object in the console:

  • When using OBJLoader, the first child starts at id 12 and increases sequentially up to 1848. This progression makes sense.
  • On the other hand, when loading with OBJMTLLoader, some ids are missing - starting at 13 and ending at 5521. For example, the first five children have ids: 13, 16, 19, 22, 25.

While this discrepancy may not be an issue, here's where it gets tricky. In my project, I utilize raycasting to change the color of selected meshes (by clicking on them) and display their names:

  • With OBJLoader, the color changes and mesh names are displayed correctly.
  • But with OBJMTLLoader, while color changes work fine, the mesh names are empty.

Interestingly, every mesh does have a name in both scenarios.

The odd part is when checking the selected mesh's id via the console. With OBJLoader, the id matches the mesh in the Object3D. But with OBJMTLLoader, the id seems to be missing from the Object3D...

Any ideas on where the problem might lie?

Thank you!

UPDATE :

I've made some progress in solving the issue but something still seems off. Here's an example of the structure of my 3D model imported with THREE.OBJMTLLoader:

THREE.Group
     [...]
     children : Array[1837]
                0 : THREE.Object3D
                        [...]
                        name : "the name of the part"
                        children : Array[2]
                                      0: THREE.Mesh
                                               name : ""
                                               children : Array[0]
                                               [...]
                                      1: THREE.Mesh 
                                                [...]
                          [...]
                 1 : THREE.Object3D
                 [...]

It turns out the raycaster intersects with THREE.Mesh and stores the name one level above. Hence, the absence of names when trying to display them. But why doesn't this extra level exist when using OBJLoader for the same 3D model? With OBJLoader, the structure looks like this:

THREE.Group
    [...]
    children : Array[1837]
                0 : THREE.Mesh
                        [...]
                        name : "the name of the part"
                        children : Array[0]
                        [...]
                1 : THREE.Mesh
                [...]

Answer №1

Essentially, the process in which `OBJLoader` interprets a `.obj` file involves creating a `THREE.Object3D` for each group within the file. For every group, a `THREE.Mesh` is generated and added to the `Object3D`, disregarding the `usemtl` directive in the original `.obj`. Each group in the `.obj` will result in a distinct `THREE.Mesh` with the appropriate name, which is quite convenient.

On the other hand, `OBJMTLLoader` takes into account the `usemtl` information. Given that a `Mesh` consists of a combination of `Geometry` and `Material`, modifying the `Material` necessitates the creation of a new `Mesh`. Therefore, upon encountering new groups, an `Object3D` is formed with the correct label, with its children representing the segments with differing materials.

To access the actual name of the mesh, you may consider utilizing something along the lines of `intersect.object.parent.name`.

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

The Angular function fails to execute when clicked

I am trying to trigger a new page launch when a cube is clicked using Angular. Unfortunately, my current code doesn't seem to be working as expected and nothing happens when I click the cubes. This makes me wonder if there is something wrong with my i ...

Angular Express encountering URL mismatch when retrieving files post-refresh

Currently, I am developing a small MEAN stack application. One of the features is that when an image is clicked, it displays a partial containing information about the image. Everything was working fine initially. However, after refreshing the page, Angula ...

Using async/await keywords in React Native while iterating through an array and calling an API does not result in successful resolution

When attempting to request data from my API in this manner: export default ({ navigation }) => { // Call getMovieImages with the id of the likedMovies from the state.likedMovies const { getMovieImages, state:{ likedMovies }} = useContext(MovieContext); ...

Top-notch Java EE Ajax framework

As a newcomer to Java EE, I am looking for a framework that can simplify AJAX for me. Currently, I am using the dojo toolkit to draw graphs, but I want to make these graphs updatable through AJAX. Is there a framework that facilitates AJAX callbacks and al ...

Utilizing JavaScript and Flexbox to generate a 16x16 grid within a div element

I am facing an issue with stretching my grids horizontally in order to fit perfectly within my container. The objective is to create a 16/16 grid using flexbox and dynamically generate divs in JavaScript, which will then be placed into a container (sketch- ...

How can I use HTML to display a new image next to the base image when I hover over it, showing both images side by side?

Looking for assistance with creating a comic webpage containing 2 cartoons. I want the dialog or mind-thought of each cartoon to appear on the page when a user hovers over them. Anyone able to offer some help with this? ...

Harnessing the Power of Script Loader in Your webpack.config.json File

I'm taking my first steps into the webpack world with Vue.js and vueify for ES6 modules. I've run into a challenge when it comes to loading third-party jQuery plugins. I've successfully used the ProvidePlugin to load jQuery. plugins: [ ...

The phenomenon of React event bubbling and propagation

I have a simple component structured like this: <div onClick={toggleHidden} className="faq-item-header"> <h3>What is Bookmark?</h3> <img src={iconArrow} alt="arrow" /> </div> https://i.sstatic.net/LdWXs. ...

JS has the ability to determine the media style of a DOM element

I am trying to retrieve the CSS display property of a DOM element. Normally, I would use something like document.getElementById('hello-world').style.display. However, when the style is set using a CSS @media Rule, I do not see any change in this ...

When attempting to add a variable using the next() function, I encountered an error with the BehaviorSubject. The error message displayed was "this.count.next is not a function"

In my Angular service, there is a variable called count that I need to monitor for updates. Whenever this count variable is updated, I want to assign its new value to another variable in a separate component. import {BehaviorSubject} from "rxjs/BehaviorSu ...

A function that extracts a number from an array and passes it as an argument to another function

Having trouble with a piece of jQuery code :) Here’s the issue: I have an array called var arr. We have a function called get_number() which retrieves each number from the array. We also have a function with a parameter called inner_li_height(numb ...

When is it necessary to create a script that will dynamically apply a .current class (similar to active) to an element?

Creating a navigation menu 'component' - after researching some examples, I noticed that many of them utilize controllers and JavaScript to dynamically include a .current (active-like class). One example is the navigation bar on https://www.googl ...

Navigating with React Router v6 beyond the confines of individual components

When using react-router v5, I would create the history object like this: import { createBrowserHistory } from "history"; export const history = createBrowserHistory(); Then I would pass it to the Router like so: import { Router, Switch, Route, Link } from ...

Angular 14 debug error: Incorrect base path setting

Whenever I go for a run, I have to specify a starting point such as /pis/ ng serve --serve-path /pis/ Even after following these instructions, nothing seems to load. Can anyone lend a hand with setting a starting point in the ng serve process? ...

Having trouble bringing my custom-built Angular module into my Angular application

Currently considering the utilization of this Yeoman generator as a starting point for a small project that will contain several reusable form components to be published. The generator constructs a module and an example component, directive, pipe, and serv ...

list of key combinations in a ul element

I programmed a list of world states in PHP using an unordered list (<ul>): $WORLD_STATES = array( "France", "Germany", "Greece", "Greenland", "United Kingdom", "United States", "Uruguay" ...

Differences between Cypress and JQuery objects, and the significance of the cy.wrap function

Currently diving into cypress and experimenting with various testing methods. If anyone could lend me a hand with the following inquiries: 1. I've come to understand that most cypress objects utilize jQuery objects for DOM operations, but what sets t ...

Where can rootScope values typically be found - in a cookie or local storage?

What is the storage location of rootScope values - cookie or local storage? I am uncertain about how rootScope works in angularjs. I am passing a value between two controllers, so I am using $rootScope. I would like to understand how $rootScope ...

How to use ng-click to upload images with Multer without a form?

I have successfully implemented multer code to upload a file. However, I am looking to enhance it by using ng-click() to send additional data from my controller via $http post. A simple input field with a button would be ideal. Here is the HTML side: < ...

Guide to displaying a partial in the controller following an ajax request

After initiating an AJAX request to a method in my controller, I am attempting to display a partial. Below is the AJAX call I am currently using: $('.savings_link').click(function(event){ $.ajax({ type: 'GET', url: '/topi ...