Is there a way to navigate through the various components of an OBJ file that has been loaded using OBJMTLLoader

I recently created a building model using 3DS Max, where each room is represented by a modified cube. To load the OBJ file along with its corresponding MTL, I utilized OBJMTLLoader. However, my current challenge lies in highlighting specific rooms based on user requirements.

To address this issue, I implemented dat.gui to present a menu allowing users to mark/unmark rooms for emphasis (potentially by adjusting room size or material).

Displayed below is the code for my loader:

var loader = new THREE.OBJMTLLoader();
        loader.load( 'models/ed.obj', 'models/textures/ed.mtl', 

        //onLoad()
        function ( object ){
            contenido = object;
            contenido.position.set(0,0,0);
            contenido.position.y = -80;
            contenido.name = 'building';

            scene.add(contenido);

            return contenido;
        }

The transparency functionality allows manipulation of the entire model by adjusting opacity through a dat.gui bar labeled opciones.Opacidad:

contenido.traverse( function( object ) {

                    if( object.material ) {

                        object.material.opacity = opciones.Opacidad;
                        object.material.transparent = true;
                    }

While this feature works as intended, I encountered difficulties when attempting to access internal cubes within the geometry to highlight them in wireframe mode. The following method was used:

contenido.getObjectByName("RoomNameIn3DSMax").material.wireframe=true;

Despite successfully locating these objects without errors, they do not appear in wireframe mode. This inconsistency may be attributed to the Groups generated by the OBJMTLLoader.

Additionally, alternative approaches such as the one shown below did not yield desired outcomes:

        contenido.traverse( function ( child ) {
            if ( child.name == "NameInOBJor3DSMax" ) {
                child.material.wireframe = true;
            }
        })

Hence, my primary query revolves around effectively accessing internal modules of the model loaded via OBJMTLLoader. Any insights or assistance on this matter would be greatly appreciated.

For further details and access to the code and files, please visit the following link: 3DBuilding link.

Thank you in advance for your help and suggestions!

Answer №1

Your issue seems to stem from the mesh names not being recognized correctly.

In my experience, when running the code snippet below, there are no issues:

scene.children[2].traverse(function(child) {
  if(child.material && child.name.indexOf("INVESTIGACION_1_") >= 0) {
    child.material.color.set(0xff0000);
  }
});

This script successfully changes the color of specific parts of the model to red as intended.

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 request has been unsuccessful with error code 405 in Nextjs version 14

I am currently working with NextJs version 14 and encountering a 405 error: GET http://localhost:3000/api/products 405 (Method Not Allowed) Uncaught (in promise) AxiosError products.js "use client" import { useState } from 'react'; ...

Selectors within 'not' in document.querySelectorAll are failing to function as expected

I've been attempting to find a way to replace the jQuery .not() function with native JavaScript, but so far my attempts using document.querySelectorAll have not been successful. Here is what I am trying to achieve - converting this jQuery selector in ...

Encountering issues with resolving dependencies in webdriverIO

I'm attempting to execute my WebdriverIo Specs using (npm run test-local) and encountering an error even though I have all the necessary dependencies listed in my package.json as shown below: [0-2] Error: Failed to create a session. Error forwardin ...

Load data from a file into a dropdown menu using node.js

Exploring the realm of front end development on my own has been quite a challenge. I am currently struggling with the concept of populating a drop down box with data from a file. While utilizing node and JavaScript, I have decided to stick to these techn ...

Creating a ThreeJS mesh that connects two curved ellipses

I am currently working on a creative project in three.js that involves incorporating two ellipse curves (one blue, one red arrow) into the design. My goal is to generate a mesh that connects the two curves and add some elevation to the mesh by adjusting it ...

The first Ajax call was successful, but the second Ajax call was unexpectedly sent twice

After making an AJAX call to post the value of a textarea to the database, I have noticed a strange issue. The first post always goes through correctly. However, when attempting to post another entry, the AJAX call seems to be executed twice. Subsequently, ...

The correct method for implementing server-side rendering with JavaScript

My website consists of multiple pages and utilizes React as a widget toolkit, with different bundles on each page. I am facing an issue where some widget state persists within a login session, and when the user revisits the page, the components should relo ...

Experiencing browser crashes following the incorporation of asynchronous functions into a JavaScript file. Seeking solutions to resolve this

In my recent project, I developed a basic online store application using vanilla javascript and ES6 classes. The shop items are stored in a JSON file which I used to populate the user interface. To implement functions like "addToCart", "quantityChange", a ...

Locate a specific data point within an array of JSON objects

After receiving an array of JSON objects from JSP, I now have a set of data that contains book titles. "Titles":[ { "Book3" : "BULLETIN 3" } , { "Book1" : "BULLETIN 1" } , { "Book2" : "B ...

Unknown custom element error in Laravel and Vuetify

I encountered errors in my Laravel project, specifically with custom elements like this. [Vue warn]: Unknown custom element: <v-app> - did you register the component correctly? For recursive components, make sure to provide the "name" option. found ...

Uploading CouchDB document attachments using an HTML form and jQuery functionality

I am currently in the process of developing a web form that, upon submission, will generate a couchdb document and attach file(s) to it. I have followed tutorials and visited forums that suggest a two-stage process similar to futon's approach. While I ...

Troubleshooting [object Object] Error in Node.js using Express

This is my Unique Code handleLoginRequest(req, res, next) { try { const {username, password} = req.body; const user = await UserModel.findOne({username}); if(!user) throw {status: 401, message:'Invalid username or password' ...

Tips for adding and verifying arrays within forms using Angular2

Within my JavaScript model, this.profile, there exists a property named emails. This property is an array composed of objects with the properties {email, isDefault, status}. Following this, I proceed to define it as shown below: this.profileForm = this ...

Adjust the camera tilt in Three.js to angle up or down while ensuring the horizon remains level

When camera.rotate.y is adjusted, the angle pans left or right in a predictable manner. If camera.rotate.x is changed when camera.rotate.y is at 180 degrees, the view looks up or down predictably. However, I noticed that altering the value of camera.rota ...

Is there a method in JavaScript to prevent href="#" from causing a page refresh? This pertains to nyroModal

Is there a way to prevent <herf="#"> from causing a page refresh? I am currently working on improving an older .NET web project that utilizes nyroModal jQuery for displaying lightboxes. However, when I attempt to close the lightbox, nyroMo ...

Bar Chart Data Label Problem with HighCharts

My goal is to have the label positioned outside the bar stack. I attempted to achieve this using the code below, but it seems to be inconsistent in its results. dataLabels: { enabled: true, color: '#333', ...

Puppeteer: effective method for identifying and interacting with frequent popups in a loop

Seeking assistance in handling multiple popup windows simultaneously. Referencing the code snippet below: const newPagePromise = new Promise(res => browser.on('targetcreated', target => res(target.page()))); for(const dataWorkSheet ...

Efficiently scheduling file downloads using WebDriver automation

I am in the process of automating a website using WebDriver, but I have encountered unique file download requirements that differ from what is readily available online. My specific scenario involves a website where I create orders. Upon clicking the &apos ...

The error encountered with react createRef was caused by a faulty implementation

Here is the revised question post completing the answer In this particular code snippet, I have encountered an issue where my file browser opens correctly upon submission, however, the updated state is not reflected when I click the final submit button. ...

The script for Angular2 index.html cannot be included because it is not found

My index.html file looks like this: <!doctype html> <html> <head> <meta charset="utf-8"> <title>Rock Star Messenger</title> <base href="/"> <meta name="viewport" content="width=device-width, initial-sc ...