Importing a 3D model with textures in Three.js

I'm having trouble rendering an object in three.js from a .obj file exported from 3ds max and a .mtl file with the materials. The textures don't seem to be loading properly. Below is the javascript code I'm using:

var texture = THREE.ImageUtils.loadTexture( 'items/m16/m16.jpg' );


var loader = new THREE.OBJLoader();
loader.load( "items/m16/m16.obj", function ( object ) {

for ( var i = 0, l = object.children.length; i < l; i ++ ) {

     object.children[ i ].material.map = texture;

}

//  object.position.y = -100;

scene.add( object );

} );

Here is the content of the .mtl file:

newmtl Material__25
Ns 10.0000
Ni 1.5000
d 1.0000
Tr 0.0000
Tf 1.0000 1.0000 1.0000 
illum 2
Ka 0.5880 0.5880 0.5880
Kd 0.5880 0.5880 0.5880
Ks 0.0000 0.0000 0.0000
Ke 0.0000 0.0000 0.0000
map_Ka m16.jpg
map_Kd m16.jpg

I can't seem to figure out what I'm doing wrong.

Answer №1

If you are in possession of an .mtl file, it is recommended to utilize the OBJMTLLoader. By doing so, your code can be simplified to:

var loader = new THREE.OBJMTLLoader();
loader.load( "items/m16/m16.obj", function ( object ) { scene.add( object ); } );

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

Arrange the given data either by ID or Name and present it

Here is the code snippet I am working with: <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <style> .content{ border: 1px solid gray; width: 250px; ...

ways to run php script based on screen resolution or size

I have 2 php files that I need to execute based on screen size. include_once('large.php'); include_once('small.php'); The condition is to run large.php when the screen size is greater than 992px, and small.php when the screen size is ...

PHP Form encountering error due to JSON decoding following an AJAX request

After extensive research and much confusion, I have finally decided to seek help here. I am able to make my AJAX request post successfully in every format except JSON. I am eager to understand JSON so that I can start using it right away instead of learni ...

Calculate the total of the provided HTML element's content with Angular version 1.x.x

Looking to calculate the total of all values in table cells with ng-model. However, it is treating the values as strings instead of numbers. <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <ta ...

Utilize AngularJS to dynamically generate a page corresponding to the selected option

Looking for assistance with displaying content based on selected option from a dropdown list. SAMPLE HTML CODE: <label class="col-md-0" for="Role"> <br>Role: </label> <select name="role" id="roleType"> <option value="A" ...

Generating dynamic tables using JQuery is not possible

This script is intended to generate a table and convert it into a canvas. Clicking on a cell should change its color to the selected color from the color picker input is retrieved from text boxes and the color picker, and executed upon submitting I need t ...

Steps for Transferring a Const from One File to Another

I am facing an issue with passing the const clouds variable from one file to another. There seems to be something I am overlooking and I have been looking at this for too long - I really appreciate your help! Source: getAVWXData.js import axios from &ap ...

When you call setTimeout from a static function, it does not get executed

Having a problem with starting a timer in my utility typescript class. The static function initTimer() uses setTimeout but when called from a react component, the timer doesn't start. StyleWrapper.tsx const StyleWrapper: FC = (props) => { cons ...

The mysterious case of the disappearing items: why does Firebug show a blank array of objects in JavaScript and AngularJS?

Here is a problem that I am facing with JavaScript and cannot seem to figure it out from the screenshot below. The issue I'm encountering is that when checking the array in firebug, it appears to be blank with a length of 0. However, if I click on th ...

Alert: Zone.js has identified that the ZoneAwarePromise '(window|global).Promise' has been replaced with polyfills. Kindly address this issue

Recently, I updated my Angular application from version 8 to 9. After updating the packages and successfully compiling the application, I encountered an error message in the Chrome browser console: Error: Zone.js has detected that ZoneAwarePromise `(wind ...

Using Express.js with synchronous functions can cause the web application to freeze

While developing an app using Express, I realized that I made a mistake regarding my usage of Promises. Here is the code in module.js: module.exports = function(arguments){ for(let k =1; k < something.length; k++){ let options = { & ...

Issue: ENOENT - The file or directory does not exist. uv_chdir encountered an error when attempting to create a directory and navigate into it

I am facing a challenge while developing a small application that installs files and modules in a new folder. The error I keep encountering is: { Error: ENOENT: no such file or directory, uv_chdir at process.chdir (/home/aboardwithabag/LaunchProject/n ...

Angular Material: Enhanced search input with a universal clear button

After searching for a cross-browser search control with a clear button similar to HTML5, I found the solution rendered by Chrome: <input type="search> The code that gave me the most relevant results can be found here. I used the standard sample w ...

Guide on extracting data from a JavaScript table using Python

Looking to extract information from a table on this page: . There are a total of 18 pages, but the url remains constant for each page. My usual method involves using BeautifulSoup to scrape data from HTML pages. However, in this case, the required data is ...

Article: Offering CoffeeScript and JavaScript Assets Simultaneously

Currently, my web app is up and running using Node and Express. I initially developed it in JavaScript but now want to transition over to CoffeeScript. My goal is to have both file1.js and file2.coffee coexisting in the application (with both being served ...

Updating multiple records in MongoDB using ObjectID as the criteria for selection can be achieved by leveraging the

I am currently working in the Mongo shell on Ubuntu and have a Collection with 1 million documents. My goal is to select 50,000 records based on their ObjectID and update one of the values. Is there a way to specify a range of 50,000 documents for the upd ...

Unable to retrieve json data from php server

I am new to php and wordpress. I'm attempting to create a basic plugin that will display the 3 most recent posts on a page. Initially, I planned to retrieve a JSON-encoded array and work with it using JavaScript. However, there seems to be an error in ...

"Did you come across `item()` as one of the methods within the array

While studying the book 'JavaScript and jQuery Interactive Front-End Web Development', I came across this interesting sentence: You can create an array using a different technique called an array constructor. This involves using the new keyword ...

Performing create, read, update, and delete operations in AngularJS using a

Everything seems to be working fine with the CRUD operations in AngularJS. When I click on the submit button, the values are successfully submitted to the database. However, the changes are not immediately reflected on the view. I either need a separate bu ...

utilizing count to pre-determine record allocation

From my understanding, pre-allocating a record has the potential to enhance performance, particularly when dealing with a large volume of records in a time series dataset. updateRefLog = function(_ref,year,month,day){ var id = _ref,"|"+year+"|"+month; ...