Exploring the world of 3D with wireframes and unique object materials

I need to retrieve the wireframe of an object that I have loaded using OBJMTLLoder. Below is the code snippet I am currently using:

var loader = new THREE.OBJMTLLoader();
                loader.load( 'obj/male02/male02.obj', 'obj/male02/male02_dds.mtl', function ( object ) {

                    object.traverse( function ( child ) {

                    if ( child instanceof THREE.Mesh )
                    {
                    child.geometry.computeFaceNormals();
                    var  geometry = child.geometry;
                    console.log(geometry);
                    geometry.dynamic = true;
                    material = new THREE.MeshLambertMaterial();
                    mesh = new THREE.Mesh(geometry, material);
                    scene.add(mesh);

                    var useWireFrame = true;
                        if (useWireFrame) {
                            mesh.traverse(function (child) {
                                if (child instanceof THREE.Mesh) child.material.wireframe = true;
                            });
                        }

                    }

                    object.position.y = - 80;
                    scene.add( object );

                    });

                } );

The current setup works fine and displays the wireframe on my object. However, the object's material changes to MeshLambertMaterial. My goal is to obtain the wireframe with the default material of the loaded object. I have tried using various Materials mentioned in the Three.js documentation, but none of them preserve the default object material.

Answer №1

By incorporating child.material for material, I successfully resolved the issue. Here is how it was achieved:

loader.load( 'obj/male02/male02.obj', 'obj/male02/male02_dds.mtl', function ( object ) {

                    object.traverse( function ( child ) {

                    if ( child instanceof THREE.Mesh )
                    {
                    //child.geometry.computeFaceNormals();
                    var  geometry = child.geometry;
                    //console.log(geometry);
                    //geometry.dynamic = true;
                    material = child.material;
                     mesh = new THREE.Mesh(geometry, material);
                        scene.add(mesh);

                    var useWireFrame = true;
                        if (useWireFrame) {
                            mesh.traverse(function (child) {
                                if (child instanceof THREE.Mesh) 
                                {
                                child.material.wireframe = true;
                                child.material.color = new THREE.Color( 0x6893DE  );
                                }
                            });
                        }

                    }

                    object.position.y = - 80;
                    //scene.add( object );

                    });

I included material = child.material; just like geometry = child.geometry;, which resolved the problem effectively.

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

What is the process for establishing a dependency on two distinct JavaScript files, similar to the depends-on feature found in TestNG?

I am faced with a scenario where I have two separate JS files containing test methods, namely File1 and File2. The requirement is that File2.js should only be executed if File1.js has successfully completed its execution. My current setup involves using ...

Tips for executing and triggering the same function concurrently from various `<LI>` elements

Is there a way to execute the same function concurrently from multiple <LI> elements using javascript or jQuery? I am looking to utilize the same function with varying parameters to create a tabbed browsing experience. I want multiple tabs to load a ...

leveraging UI-Router for navigating based on app state and data

Is there a way to dynamically adjust Angular's ui-routing based on certain data conditions? For instance, let's say we need to create a subscription process where the user is informed of whether their subscription was successful or not. As the f ...

Regular expression for eliminating the local path from a website address

I am facing a scenario where different formats of relative paths can occur, such as: const URL1 = "./hello-world" const URL2 = "../hello-world" const URL3 = "../../hello-world" const URL4 = "../../../hello-world" con ...

Float: A threshold reached when adding 1 no longer has any effect

In the realm of programming, float serves as an estimation of a numeric value. For example, 12345678901234567890 === 12345678901234567891 evaluates to true However, 1234567890 === 1234567891 yields false Where does the equation num === num+1 reach a br ...

Incorporating a new method into the Object prototype to provide universal access across all modules

I've been delving into Typescript experimentation and I'm attempting to enhance the Object prototype by adding a property that can be accessed by all objects within my modules. Here's what I've developed so far: In a Common.ts file O ...

Enhance the tooltip information on the Plotly chart by incorporating additional data points

I'm looking to enhance the tooltip by displaying additional data, but it's only showing %{customdata[0]} instead of the actual value. I've tried using customdata in the following way, but it doesn't seem to be working. { "name ...

Next.js Pre-rendering Issue: Error encountered when trying to access properties of a null object

Using Next.js for a React application (full code available here.) Encountering an unusual error while running next build, showing errors related to prerendering on five pages: spenc@WhiteBoxu:~/workout-tracker$ next build info - Loaded env from /home/spe ...

Is there a way to streamline a function that substitutes certain words?

Looking for ways to simplify my function that shortens words when the label wraps due to different screen resolutions. It seems like it could be more efficient to use arrays for long and short word pairs, but I'm not sure how to implement it. Check ou ...

jquery allows you to toggle the visibility of content

There are two divs with a button positioned above them. Initially, only one div, the catalogusOrderBox, is visible. When the button named manualButton is clicked, it should display the manualOrderBox div while hiding the catalogusOrderBox div. The text on ...

There was an error: TypeError - The function collectionGroup cannot be called on the object _firebase__WEBPACK_IMPORTED_MODULE_10__.usersCollection.doc

I encountered an issue described above. Can someone help me identify what went wrong? My goal is to display all documents in the 'hives' collection. Is the code snippet shown in the second image correct? Or do I need to make some modifications? S ...

Guide on how to bypass IDM when downloading a PDF file through a GET request

When I try to fetch a PDF by sending a GET request to the server and open it in a new tab, IDM interrupts my request and downloads the file instead. It changes the server response status to 204 and removes the headers. How can I prevent IDM from doing th ...

Utilize Angular service to deliver on a promise

Currently, I have a service that is responsible for updating a value on the database. My goal is to update the view scope based on the result of this operation (whether it was successful or not). However, due to the asynchronous nature of the HTTP request ...

The operation failed because the property 'dasherize' is inaccessible on an undefined object

While attempting to execute the following command: ng generate component <component-name> An error occurred saying: Error: Cannot read property 'dasherize' of undefined Cannot read property 'dasherize' of undefined The confi ...

Error: Unable to locate module: Unable to locate '@material-ui/core/Container'

Encountering an error in the browser: Error message: Module not found: Can't resolve '@material-ui/core/Container' The search for the component is directed towards my components directory instead of node_modules. Unfortunately, changing ...

What steps can be taken to ensure a neutral value is returned in Mongodb aggregation when the specified attribute does not exist?

I need to create an aggregation that looks like this: Game.aggregate([{ $match: { "_id": { "$in": result.games } } ...

Unable to interpret Python/Django-generated JSON object on client side

I'm encountering an issue while passing a data object from a Python/Django application to the frontend using AJAX in JSON format. Despite everything appearing to be functioning correctly, I am unable to properly parse the JSON object within JavaScript ...

Selecting options in table is disrupted by filtering in ng-repeat

My table showcases selectable information, featuring parent rows and child rows. I am seeking a solution where only the parent rows are selectable if they have no children; otherwise, only the child rows should be clickable. Essentially, it's a selec ...

Tips for delaying code execution until environment variables are fully loaded in Node.js/TypeScript/JavaScript

Purpose: ensure slack credentials are loaded into env vars prior to server launch. Here's my env.ts: import dotenv from "dotenv"; import path from "path"; import { loadAwsSecretToEnv } from "./awsSecretLoader"; const st ...

Troubleshooting issue: EJS loop not functioning correctly when handling JSON information

Having an issue with looping in an EJS file. Here's the data I'm working with: { "name": "Marina Silva", "info": [{ "periodBegins": "Sun Apr 14 23:48:36 +0000 2011", "periodFinishes": "Sun Apr 7 23:48:36 +0000 201 ...