Setting a custom color for a *.obj model in three.js when no *.mtl file is provided: How to do it?

When working with models in *.obj format that do not have material files (*.mtl files), I have noticed that some online services like and display them correctly. However, in my project, I am experiencing issues as per the three.js documentation, where the model is displayed incorrectly: https://i.sstatic.net/HQdIe.png instead of: https://i.sstatic.net/B6k3j.png

The developer at mentioned that if the *.mtl file is missing, the script will apply a default color/material, painting the entire product in one color.

My question is, how can I color an object from a *.obj file to a specific color using the tools provided by three.js?

To help with testing, I have included a model file that does not come with a material file: test sample *.obj file.

javascriptthree.js3d.objmtl-file

Answer №1

The export of OBJ seems to have an issue. When viewing it in macOS preview, BabylonJS, or using the OBJLoader from three.js, it appears that the faces have incorrect winding order. To fix this, add the following code to your onLoad() function:

const material = new THREE.MeshPhongMaterial( { color: 0xff0000, side: THREE.BackSide } );

obj.traverse( function( child ) {

    if ( child.isMesh ) child.material = material;

} );

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

Creating an HTML table with collapsed borders and hidden rows/columns using the `border-collapse

I am facing a situation where I have a table with multiple lines as shown below: <table> <tr id="line1"><td>Line</td><td>1</td></tr> <tr id="line2"><td>Line</td><td>2</td></t ...

javascriptcsshtml-table

The radio button is not appearing correctly in my HTML form

Seeking guidance as a newcomer to html and css. Looking to create a signup form using html and css, but encountering issues with the radio button not displaying in the browser. Unsure of the root cause of the problem. Any assistance would be greatly apprec ...

javascripthtmlcssradio-button

Is there a way to ensure that this daily countdown timer continues without resetting at midnight?

Important factors to remember: This is programmed to imitate the time of 11:00 PM. var bt = "23:00"; This is set to emulate 8:00 AM. var wt = "08:00"; The intended operation: The countdown timer kicks off each morning at 8:00 AM. It counts down unti ...

javascripttimemomentjscountdown

Holding onto numerous AJAX requests while disconnected, then dispatching them once the network connection is

I'm working on an application that heavily relies on AJAX requests, requiring the rapid or concurrent sending of multiple calls. The code snippet provided serves as a basic wrapper for sending AJAX POST requests within the app. However, I've enco ...

javascriptajaxasynchronousxmlhttprequest

When you hover over them, Material UI icons shrink in size due to the Border

I've been working on a React application that includes Material UI icons in the header. My goal is to add a border at the bottom of each icon when hovered over, but currently, the borders are too close to the icons. Another problem I'm facing is ...

javascripthtmlcssreactjsmaterial-ui

The application runs smoothly during development, but encounters issues once deployed on Heroku

I am encountering an issue while deploying my app on Heroku. The deployment process goes smoothly, but when I try to open the app, I receive the following error message: Application error An error occurred in the application and your page could not be ser ...

javascriptnode.jsreactjsmongodbheroku

I am having trouble toggling radio buttons in React

class VoiceSelector extends Component { constructor(props){ this.handleCheck = this.handleCheck.bind(this); } state={ voices : [ {"Voice":"Indian English Female Voice 1"}, {"Voice":&qu ...

javascripthtmlreactjs

Using Javascript to open a new page and execute a script

I need to be able to launch a new window window.open(url,'_blank'); After that, I want to execute a JavaScript script like this: window.open(url,'_blank').ready("javascript code here"); However, I'm unsure how to accomplish thi ...

javascripthtml

Adding controllers dynamically to ng-includes allows for more flexibility and customization in

How can I dynamically change the controller for ng-include in AngularJS? In my application, users can create content pages along with controllers. I am able to adjust the ng-include source dynamically, but I am unsure of how to associate a new controller ...

javascriptangularjs

React component slider encountering issue of 'undefined property style reading'

I attempted to develop a component for a slider, but it seems to be malfunctioning. Upon the initial rendering, I encountered the error: 'cannot read property style of undefined...' When I logged x[slideIndex-1], initially it returns undefined ...

javascriptreactjs

The module named "domhandler" does not have an exported member called 'DomElement'. Perhaps you meant to use 'import DomElement from "domhandler"' instead?

I am currently working on a react-typescript project and encountered an error while trying to build it. It seems that I forgot to install dom utils and HTML parser libraries, and now I am facing the following issue when I attempt to run yarn build: ...

javascriptnode.jsreactjstypescriptreact-typescript

jQuery - Error: Unexpected token SyntaxError

I'm new to jQuery and facing a challenge with an AJAX request. I have a server on my local network running a Python service. When I make a request to the server through the browser using the URL: http://192.168.0.109:5000/api/environment?seconds=10 ...

javascriptjqueryjsonajax

How to fetch images from a database in CodeIgniter by utilizing JSON and AJAX functions?

Trying to retrieve an image using ajax/json format for the first time, all variables are displaying except the image. The name of the image is visible when inspecting the element in the browser and it is saving correctly into the image folder. I need help ...

javascriptphpjqueryajaxcodeigniter

What is the best method for designing a filtering menu with a "Narrow By" option?

Looking to create a sidebar menu similar to the functionality on mcmaster.com. This specific feature allows users to efficiently filter products and toggle through different options dynamically. Upon selecting the "metric" option, the entire page adjusts t ...

javascriptjqueryhtmlajaxcss

Is it recommended to utilize addEventListener?

Is it better to use the addEventListener method in these scenarios? <input id="input" type="file" onchange="fun()> or document.getElementById("input").addEventListener("change", function() { fun(); }); What are the advantages of using one over ...

javascript

Unable to swap out string with text box in TypeScript

I am trying to swap __ with a text box in Angular 2/4. Take a look at the example provided in the link below. https://stackblitz.com/edit/angular-ajkvyq?file=app%2Fapp.component.ts ...

javascriptangulartypescript

Update the select tag to display as radio buttons

Hey there, I've got a webpage where users can rate different systems. I've written a JavaScript function to dynamically add and remove systems for evaluation. The only issue is that I have to manually change the radio button names to prevent th ...

javascriptjqueryhtmlcssradio-button

The onchange function seems to be malfunctioning when attempted with AJAX

Help needed: I'm new to AJAX and facing an issue. I have implemented AJAX pagination to display data, which is working fine. But now I want to add a filter to the displayed data, however, the filter is not functioning correctly. <select name="prof ...

javascriptjqueryajax

Manipulating Arrays in order to delete an index

I have been working on a function to manipulate arrays... var myArray = [2, 1, 1, 1, 1]; and I want to transform it into this [3, 1, 1, 1] The function I created accepts 3 parameters ArrayToProcess - the array that will be processed indexTarget - ...

javascriptarrayslogic

Vue.js: Attaching a function to a Template

I am struggling to find a way to bind my screen height to a calculated value in my code. Unfortunately, the current implementation is not working as expected. I would greatly appreciate any guidance on how to resolve this issue. <template> <b ...

javascriptvue.jsvuejs2