The object's texture is not displaying

Seeking Assistance

I am a beginner in the realm of Three.js and I am attempting to apply a texture to an imported object.

The Issue at Hand

Despite numerous attempts, I have been unable to successfully achieve this task. I encounter no errors, but the object loads without the desired texture.

Snippet of My Code

var loader6 = new THREE.OBJLoader();

// load a resource
loader6.load(
    // resource URL
    'models/Chair.obj',

    // called when resource is loaded
    function ( object ) {
        object.scale.x = 20;
        object.scale.y = 30;
        object.scale.z = 20;
        object.rotation.y = -0.3;
        object.position.z = -500;
        object.position.x = 30;

        object.traverse( function ( child ) {
            if ( child instanceof THREE.Mesh ) {
                console.log(texture);
                child.material.map =  texture;
            }
        }); 

        var texture = new THREE.TextureLoader().load('models/Chair.mtl');

        object6 = object;
        scene.add( object6 );
    },

Any assistance would be greatly appreciated.

Answer №1

If you are trying to load a `.mtl` file with `TextureLoader`, that won't work. You need to use `MTLLoader` instead. `MTLLoader` is the one that will load the texture. After that, you'll need to set the material to `OBJLoader` using the 'setMaterial' function.

Take a look at this code snippet -

new THREE.MTLLoader()
.setPath( 'path to the material folder' )
.load( 'material_file.mtl', function ( materials ) {

    materials.preload();

    new THREE.OBJLoader()
    .setMaterials( materials )
    .setPath( 'path to the obj folder' )
    .load( 'objModel.obj', function ( object ) {

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

    }, onProgress, onError );

} );

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

Is there a way to include this function in an array without triggering it right away?

In my coding project, I am working with an array of functions that return jQuery deferred AJAX objects known as phoneAjaxCalls. The main function called newPhone is where multiple calls are being pushed and it requires two arguments. function newPhone(tlc ...

What could be causing the browser to only partially display an image?

Have you encountered any issues with the browser not displaying an image fully? It seems like there may be a problem with the image download or rendering process, causing only part of the image to load. My application utilizes node and socket.io. Below ar ...

What are the best practices for securely using JSON.stringify in JavaScript?

When I use JSON.stringify on a string that includes <script> tags, the script tags somehow escape and show up in the body of my document, causing unexpected results with the "injected" data. I'm puzzled by how they manage to escape, considering ...

Tips for updating the id of a tag using JavaScript?

Html Code:- {% for post in posts %} <article class="media content-section"> <div class="media-body"> <h2><a id="post_title" class="article-title" href="{% url 'post-detail' post.slug %}">{{ post.title }}&l ...

Tips for utilizing an array within React and transforming it into a component

I've developed a website that pulls data from a SQL database I created, containing details such as name, address, and occupation of individuals. I successfully managed to showcase this information on the webpage by structuring an array and inserting t ...

Juicer- Setting restrictions on the frequency of posts

How can I limit the number of posts displayed using the react-juicer-feed component? import { Feed } from 'react-juicer-feed'; const MyFeed = () => { return ( <Feed feedId="<feed-id>" perPage={3} /> ...

Personalized jQuery Slider with automatic sliding

I am currently working on creating my own image slider without relying on plugins. 1st inquiry : How can I achieve horizontal animation for the slider? 2nd inquiry : I want the images to cover both the height and width of their container while maintainin ...

Leveraging AJAX to call upon a designated php file

I have a selection of menu items on my webpage, each with different options: option1, option2, and option3. Additionally, I have corresponding PHP files on my server for each of these menu items: option1.php, option2.php, and option3.php. For simplicity, ...

Multer is not recognizing the uploaded file and is returning req.file

This question has definitely been asked multiple times in the past, and I have attempted to implement various solutions without much success. Struggling to upload a file and read its size through Node has left me frustrated. Initially, I tried using the f ...

How to integrate angular-ui-bootstrap with webpack

I'm attempting to integrate https://github.com/angular-ui/bootstrap with Webpack: import angular from 'angular'; import uiRouter from 'angular-ui-router'; import createComponent from './create.component'; import tabs fro ...

Could somebody provide clarification on the functions being called in the Angular Test Code, specifically evaluate() and dragAndDrop()?

Exploring the drag and drop functionality of an angular-Gridster application using Protractor with a test code. I have some questions about the functions being used in the code snippet below. Can someone clarify the purpose of evaluate() - the API definit ...

Leveraging grunt-develop

I have recently developed a basic NodeJS + Express application that runs smoothly when I use the command node app.js. However, my current task is to incorporate grunt-develop into my project. Here is how I configured it: grunt.initConfig({ develop: { ...

What is the process for adding information to datatables using jQuery?

I have been struggling to make a data table in jQuery function correctly. I am able to append data to the table, but the sorting, pagination, and search features are not working. Even though the data is visible in the table, it shows as 0 records. I am wor ...

Receiving data dynamically from Highcharts results in an additional legend appearing in the chart display

I am currently looking for a solution to dynamically create highcharts series in my project. Although I have tried using the addSeries method, I am encountering an issue where an extra legend is appearing unnecessarily. If you are aware of any alternative ...

Store the value returned by the function(data) from the $.post method in a variable

Hello Fellow Developers! I'm currently working on a coding project with the following objective: My goal is to extract URLs of files stored in a specific folder and then store them in an array using JavaScript. Here's how I envision the proces ...

What is the best way to incorporate both year and month filters using a dropdown menu on a traditional blog website?

I am currently working on a static blog article website and I am looking to implement a 'filter by year and month' feature. This will allow users to easily sort through blog articles based on their preferences. While I have successfully added a ...

Exploring the depths of nested collections in Angular 12

As I work on my very first Angular/Firestore app, I find myself grappling with understanding how to retrieve data from nested collections. The Firestore database path that I need to access is as follows: /Customer(CollectionName)/cl0Apvalb6c0w9hltQ8AOTF4go ...

Using React, we can create a component by defining it as a constant and then

Currently, I have a React component that is created as a const and takes props. In another file, there is a function called selectChanged() {} which returns undefined every time the select value is changed. The code for the component is as follows: ... ...

What is the method for incorporating locales into getStaticPaths in Next.js?

I am currently utilizing Strapi as a CMS and dealing with querying for slugs. My goal is to generate static pages using getStaticPaths and getStaticProps in Next.js. Since I'm working with multiple locales, I have to iterate through the locales to re ...

Trouble with predefined JavaScript in Mongodb situation

Encountering the error "Missing ";" before statement" in Mongodb Atlas Online is frustrating for me as a newbie. Despite my efforts, I can't seem to figure out why the following code snippets are causing this issue: const counter = await counterCollec ...