The issue with OBJLoader and MTLLoader in ThreeJS is that they are failing to display png textures properly

After importing the 3D model which includes .obj, .mtl, and several jpeg and png files,

I attempted to load the model using /images like this:

However, all I am seeing is a black model like this:

I'm puzzled about what I might have overlooked since I followed the instructions for utilizing both loaders.

Here is my code:

//loader 
var MTTLoader = new THREE.MTLLoader();
MTTLoader.setPath( '/assets/HotAirBalloonIridesium/' );
MTTLoader.load('Air_Balloon.mtl', (materials) => {
    console.log(materials);
    materials.preload()
    var objLoader = new THREE.OBJLoader();
    objLoader.load('/assets/HotAirBalloonIridesium/Air_Balloon.obj', (object) => {
        console.log(materials)
        objLoader.setMaterials(materials)
        scene.add(object);
    })
})

I can't figure out what I might be overlooking as all the model files are present in my asset folder.

Answer №1

Just a quick update, it turns out the issue was not with the loader but with the incorrect lighting setup required for Phong Material.

I had to use:

var hemiLight = new THREE.HemisphereLight(0xffffff, 0xffffff, 0.50);

var dirLight = new THREE.DirectionalLight(0xffffff, 0.50);

for it to work properly.

Answer №2

attempt to load object utilizing the following method:

    let loader = new THREE.OBJLoader( manager );
            loader.load( 's_v1.obj', function ( object ) {

                object.traverse( function ( child ) {

                    if ( child instanceof THREE.Mesh ) 
                    {

                        // child.material.map = texture2;
                        // child.material.specularMap=texture;
                        // child.material.map=texture;

                    }
                } );

                // object.position.x = - 60;
 //                object.rotation.x = 0; //20* Math.PI / 180;
 //                object.rotation.z = 0;//20* Math.PI / 180;
                object.scale.x = 80;
                object.scale.y = 80;
                object.scale.z = 80;
                obj = object
                scene.add( obj );
                animate(obj);

            } );

Answer №3

Ensure to use the "setMaterials" function prior to loading the obj file.

//loader 
var MTTLoader = new THREE.MTLLoader();
MTTLoader.setPath( '/assets/HotAirBalloonIridesium/' );
MTTLoader.load('Air_Balloon.mtl',(materials) => {
    console.log(materials);
    materials.preload()
    var objLoader = new THREE.OBJLoader();
    objLoader.setMaterials(materials); // "setMaterials" should be called before "load"
    objLoader.load('/assets/HotAirBalloonIridesium/Air_Balloon.obj', (object) => {
        console.log(materials)
        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

Tips for transferring data from one tab to another tab using Greasemonkey

Is it possible to extract data from a webpage in one tab and then input it into a textarea on a different page opened in a separate browser tab using Javascript and Greasemonkey? ...

Make a JavaScript request for a page relative to the current page, treating the current page

When accessing the page /document/1, the request $.getJSON('./json', ... is sending a request to /document/json I'm interested in requesting /document/1/json Is there a method available to automatically resolve this path without having to ...

Fixing the Jquery animation glitch triggered by mouseover and mouseout

In my project, I have implemented a small mouseover and mouseout functionality. The challenge I am facing is that I need to keep the mouseout function using animate() instead of css() for specific reasons. The issue arises when I quickly do a mouseover fo ...

Error Message: "Issue with jQuery mobile: Uncaught TypeError - Unable to read property 'abort' of undefined during AJAX request"

Hey there, I recently created a website using jQuery Mobile and implemented the autocomplete feature. However, I encountered an error message saying Cannot read property 'abort' of undefined. Here is the code snippet: <div id="myPage"> ...

Retrieving Axios error codes within an interceptor

How can error codes like ERR_CONNECTION_REFUSED (indicating the API server is down) and ERR_INTERNET_DISCONNECTED (indicating the local network is down) be accessed when using response interceptors with axios in client-side JavaScript, React, etc.? While ...

Eliminate the ending slash from your Nuxt application

Hello, I am currently working on a Nuxt Application and encountering an issue. After running the npm run build command and starting it with npm start, there seems to be an inconsistency with trailing slashes. During the build, the URL appears without a t ...

What is the best way to solve the problem of Chrome auto-complete overlapping with labels in Vuetify?

When attempting to make a login form using outlined text fields in Vutify, there is an issue with Chrome autocomplete overlapping the labels. <v-text-field v-model="email" label="e-mail" name="email" outlined prep ...

Encountering Vue js router issues post login validation

I am a beginner with vue and I recently created a small vue app on codesandbox: https://codesandbox.io/s/vue-template-fjd4i However, I am facing issues with routing. Here is how to reproduce the problem: Click on Login and enter any credentials You sho ...

Sending data from TextBoxFor to controller with @Ajax.ActionLink in MVC

I’ve gone through numerous questions dealing with the same issue, yet none of them seem to solve my problem (or I’m completely missing the point). As the title suggests, I am attempting to transfer the value from a TextBoxFor to my controller using an ...

"Tips for retrieving properties from a JSON object that has been converted to a string

I'm facing an issue with retrieving the url from a response in my code. The goal is to use this url for navigation using the router function. Here's the problematic code snippet: const redirectToStripe = async () => { const response = await ...

Interactive image rotator featuring navigation buttons for next and previous slides

I recently followed a tutorial from W3Schools Now, I am looking to enhance it by adding previous / next buttons for the indicators, rather than for the slider itself Here is what I aim to accomplish: https://i.sstatic.net/qH1PQ.png Below is the code sn ...

Customize the color of plot points in R highcharter based on their values

I'm diving into the world of highcharts and R highcharter for the first time. Currently, I have a dataframe structured like this: tmp <- data.frame(x = 1:5, y = rnorm(5), color = c("green", "red", "green", "orange", "red")) # x y color # 1 ...

What methods can be used to conceal a div when the content is not being shown?

I'm a beginner in HTML and CSS and I have a page with the following code: Content displayed : <div id="row-3" ><!-- Row 3 starts here --> <div class="groupz_column1" style="margin-right:0px;"><a href="http://www.xyz.in/ads/ ...

What is the purpose of using an open quote and bracket in the `eval('('+jsonString+')')` syntax for parsing a JSON string?

What is the rationale behind this particular syntax structure? eval('(' + jsonString+ ')') When it comes to parsing JSON text, Crockford explains that "The text must be wrapped in parentheses to prevent any confusion with JavaScript& ...

Ways to resolve the array to string conversion issue in PHP

In my PHP project, I am dealing with a dynamic array and trying to store the array result in a variable. However, I encountered an error: array to string conversion while coding. <?php require_once('ag.php'); class H { var $Voltage; ...

Is there a counterpart to ES6 "Sets" in TypeScript?

I am looking to extract all the distinct properties from an array of objects. This can be done efficiently in ES6 using the spread operator along with the Set object, as shown below: var arr = [ {foo:1, bar:2}, {foo:2, bar:3}, {foo:3, bar:3} ] const un ...

Obtain information from the get request route in Node.js

I've been diving into nodejs and databases with the help of an online resource. As part of my learning process, I have been tasked with replicating the code below to fetch data from app.use('/server/profil'); However, I'm encountering ...

React: Improve performance by optimizing the use of useContext to prevent unnecessary re-renders of the entire app or efficiently share data between components without causing all

In my app, I have a Header.tsx component that needs to be accessible on all pages and a Home.tsx component where most of the content resides. The Home.tsx component includes an intersectionObserver that utilizes the useContext hook (called homeLinks) to p ...

What causes the strings in an array to be split into individual characters when using the jquery each() function?

After successfully loading jquery, I have initialized an array (object) with various strings: window.stack = [ "header", "nav", ".content", "footer" ]; My intention was to loop through this array using jquery's each() function to retrieve ea ...

Preventing the occurrence of empty nested arrays within the state

I am currently working on a React Redux application where I am adding movies and including images as a nested array within my object. Here is what my state looks like after adding an item: { movies: [ { "title": "asda", "director": "as ...