Issues with Three.js materials not rendering properly when loading .obj and .mtl files

I recently downloaded a free 3D model and I'm attempting to view it using three.js. Although the model is loading correctly, there seems to be an issue with the materials not loading properly. Strangely enough, only the wine bottles behind the bar are displaying textures, while nothing else in the scene has any texture applied.

Click here to see an example of the issue

This is the code snippet I am using to load the 3D model:

// Loading the bar 3D model
var mtlLoader = new THREE.MTLLoader();
mtlLoader.load( 'bar1/3d-model.mtl', function ( materials ) {

    materials.preload();

    var objLoader2 = new THREE.OBJLoader2();
    objLoader2.setMaterials( materials.materials );
    objLoader2.load( 'bar1/3d-model.obj', function ( event ) {

    scene.add( event.detail.loaderRootNode );

    }, function() {
        // success
    }, function() {
        // error
    });
});

Answer №1

Upon examining the MTL file linked in your OBJ file, you will find that there are no references to texture maps. Typically, texture maps are indicated with lines such as:

map_Ka image.jpg
map_Kd image.jpg
map_Ks image.jpg    
map_Nd image.jpg
map_d image.jpg
map_bump image.jpg

If these references are missing from your model, consider using a 3D editor like Blender to add them. To learn more about texture maps in the OBJ file format, refer to the Texture Maps section.

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

Troubleshoot: Firebase deployment of Vue.js application unable to locate page

I'm currently working on a silly web app with my friends for some laughs. We're using Firebase hosting and Discord OAuth2. The issue arises when attempting to access the "/login" page either by entering it in the URL or clicking "authorize" on th ...

Is there a way for me to remove an uploaded image from the system

Here is an example of my HTML code: <input type='file' multiple/> <?php for($i=0;$i<5; $i++) { ?> <div class="img-container" id="box<?php echo $i ?>"> <button style="display: none;" type="submit" cl ...

Utilizing Angular JS to Manage Controller Events

I am currently working on an application that requires saving a large amount of data in cascade, similar to a typical master-detail view. Within this view, there is a "Save All" Button which saves each row in an iteration. This process triggers jQuery cus ...

What could be causing my images not to show up when I use string interpolation for src links in Vue.js?

I've encountered an issue while working on Vue.js where I'm struggling to render a couple of images from the local directory. What puzzles me is that this problem arises when using string interpolation, like in the code snippet below: <img :s ...

Issue encountered when attempting to modify the directive when the drop-down list is changed in AngularJS

Experiencing issues updating the directive when the drop down list is changed using AngularJS. Below is my application code: HTML Code <div ng-app="myApp" ng-controller="MyCtrl"> <select ng-model="opt" ng-options="font.title for font in font ...

Align elements on the left side with some space between them

Having trouble displaying a list of images inline within a div. When I float them left, they leave a lot of space and do not display properly. Can anyone help me with this issue? See screenshot below: Here is my html code: <div class="col75"> & ...

Using JS or jQuery to organize JSON data into a multidimensional array

Dealing with frontend processing of a response from a server that provides event reviews for the season has been challenging. In this case, there can be multiple reviewers for the same event and the simplified version of the response appears as follows: [ ...

My code seems to be malfunctioning

I'm attempting to conceal the chatname div. Once hidden, I want to position the chatid at the bottom, which is why the value 64px is utilized. However, I encountered an error stating The function toggle3(); has not been defined. <div id="chat ...

What is the best way to handle requests once a SpookyJS script has finished running?

Occasionally, I find myself needing to log in and extract some data from a specific website. To automate this process, I developed a CasperJS script that runs on Heroku. My goal is to create an endpoint like the following: app.get('/test', func ...

creating a custom mongoose model using aggregation and filtering

My Review model includes two fields, product and rating. I want to calculate the total rating for a specific product and then find the average by dividing that total by 5. const mongoose = require('mongoose'); const ReviewSchema = mongoose.Sche ...

Is there a way to enable data-add-back-btn using jQuery script?

Currently, I am utilizing jQuery 1.9.1 and jQuery Mobile 1.3.1 to define multiple pages within my project setup: <div id="q1" data-role="page" data-add-back-btn="false" data-back-btn-text="Home"> <div data-role="header" data-position="fixed" ...

Is there a way for me to insert a hook into the DOM after a promise has finished updating

Currently, I am tasked with maintaining a code snippet that resembles the following structure: {#await details} {#each values as value, i} <td id="{`${config.id}_${i}`}">{value}</td> {/each} {:then details_result} {#each de ...

Learn how to implement RSS into your Next.js MDX Blog by integrating the `rss` module for Node JS. Discover the process of converting MDX content to HTML effortlessly

Having trouble converting MDX to HTML at the moment. This task is for Tailwind Blog You can find the complete code on Github here → https://github.com/tailwindlabs/blog.tailwindcss.com Below is the relevant code snippet: scripts/build-rss.js import fs ...

What steps should be taken to prepare data for transmission to a server in a Next.js environment?

I'm in the process of creating a website that requires authentication. I am using Next (React) and typescript for web development. My objective is to make most pages ServerSideRendered or StaticHTML. However, I encountered an issue right at the begin ...

How can you effectively transfer arguments from one component to another using router.push() in Vue.js?

I need help with implementing a feature where upon clicking the edit button in a row, all the details from that particular row should be passed to a form component. I want to populate the form fields with default values from the parameters provided. Can ...

Instructions on adding a class to the parent element when the child has a particular class

Here is the html structure I am working with: <section> <div class="v-middle"> <div class="row"> <h5 class="heading">Heading goes here</h5> </div> </div> </section> ...

Requiring addresses for Google Maps in order to display directions

To display the directions between two addresses based on the chosen transportation mode, I need to pass the addresses to the code in page 2. After the user selects two cities from a Dropdown box on page 1, they will be sent to the code to show their locati ...

Conceal the information within a table using angular js and HTML

Just starting out with angular and I have a table that displays angular data directly in the HTML without any controller or model. <table width="98%" border="0" cellspacing="1" cellpadding="2" class="labels" align="center" id="locc"> <tr style ...

Angular8: Adjusting Activity Status After Leaving Page

When performing activities like upload, download, delete, and edit, I display statuses such as 'upload started' or 'upload completed'. This works perfectly when staying on the same page. However, there are instances where a user may nav ...

The interaction between jQuery and Rails through ajax calls

Attempting to work with basic functionality, Sending a request with data and receiving a response with data, then displaying it using jQuery and Rails This piece of code pertains to the frontend. $("#internal_btn").click(function() { //windo ...