Adding various textures to an obj file

I am trying to add a texture to my obj file but encountering an error message. Below is the snippet of code I'm using:

    new THREE.MTLLoader()
            .setPath( 'models/cool' )
                .load( 'CobbleStones.mtl', function ( mat ) {
                    mat.preload();

            var loader = new THREE.OBJLoader( loadingManager );

            loader.load( 'models/cool.obj', function ( object ) {
                object.traverse( function ( child ) {
                    if ( child instanceof THREE.Mesh ) {
                        child.material = gemBackMaterial;
                        child.material = material;

                        loader.setMaterials(mat);

                        var second = child.clone();
                        second.material = gemFrontMaterial;
                        var parent = new THREE.Group();
                        parent.add( second );
                        parent.add( child );
                        scene.add( parent );
                        objects.push( parent );
                    }
                } );
            } );
        });

The error message reads as follows:

GET http://localhost/alpha/Alpha/models/coolCobbleStones.mtl 404 (Not Found)

If anyone could provide assistance with this issue, I would greatly appreciate it.

Answer №1

Your file directory is incorrect. You currently have it set as:

models/coolCobbleStones.mtl

However, the correct path should be:

models/cool/CobbleStones.mtl

To fix this issue, simply insert a / in .setPath( 'models/cool/' )

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

Element Not Found Error: Element could not be located - Script using JavaScript with Seleniumwebdriver

After extensive research, I have identified the issue at hand. The challenge lies in the fact that others do not follow the same coding structure as me and are unclear about where or what to insert into my code. I am aware that a try/catch statement or t ...

I am looking to adjust/modulate my x-axis labels in c3 js

(I'm specifically using c3.js, but I also added d3.js tags) I have been working on creating a graph that displays data for each month based on user clicks. However, I am facing an issue where the x-axis labels show 0-X instead of 1-X. For instance, ...

The anchor links fail to navigate to specific page sections when refreshing the browser or navigating back and forth

I've created a webpage using HTML that contains links within the page. <div> <a href="#first">first</a> <a href="#second">second</a> <div id="first">First div</div> <div id="second">Second div</div&g ...

Creating custom user interface elements directly onto the WebGL canvas using Three.js

Is it possible in Three.js to directly render onto the WebGL canvas (such as for a heads-up display or UI elements), similar to how you can with a regular HTML5 canvas element? If so, how can you access the context and what drawing functions are at your d ...

Find the mean of two values entered by the user using JavaScript

I'm sorry for asking such a basic question, but I've been struggling to get this code to work for quite some time now. I'm ashamed to admit how long I've spent trying to figure it out and how many related StackOverflow questions I ...

A guide to integrating ffmpeg with NuxtJS

I am completely new to Nuxt and currently in the process of migrating a Vue application that generates gifs using ffmpeg.wasm over to Nuxt.js. However, every time I try to access the page, the server crashes with the following error message: [fferr] reques ...

Version 4.6.4 of TypeScript is flagging the code as invalid

How can I fix this Typescript problem? const userInformation: { email: string; id: string; _token: string; _tokenExpirationDate: string; } = JSON.parse(localStorage.getItem('userData')); https://i.sstatic.net/xMh9P.pn ...

Error: Unable to locate module: 'material-ui/Toolbar'

Encountering Error While Using Material UI Recently, I attempted to utilize the ToolBar and AppBar components of React Material UI. Unfortunately, I encountered an error message stating: "Module not found: Can't resolve 'material-ui/core/Toolbar ...

Uniform distribution of resources across all nodes

I'm currently implementing navigation in my application using React BrowserHistory. I want all files to be served from my Node server regardless of the URL path being accessed. This is the code for my server: const http = require('http'); ...

AngularJS: The delay in updating variable bindings following a REST API call

When utilizing a REST service, I wanted to implement a variable to show whether the service is currently loading or not. Controller $scope.loading = true; $http.get('/Something'). success(function(data, status, headers, config) ...

Extension for Chrome

My goal is to develop a Chrome extension that, when a specific button in the extension is clicked, will highlight the current tab. However, I'm encountering some challenges. Currently, I have document.getElementById("button").addEventListen ...

Ways to resolve cross-domain problems without the utilization of PHP

I have successfully implemented the code below, however I used demo.php to address the cross domain issue. How can I achieve this without using PHP, as the client prefers not to use it? $('#basic-search').submit(function(el){ var sear ...

Tips for Generating Box Plot Diagram with ASP.NET, C# or JavaScript

Can someone provide guidance on how to create a Box Plot Chart using ASP.net, C#, or JavaScript? I came across this code online but I'm not sure how to implement it for my specific case: Code: List<String> xValue = new List<String> { "A ...

What are the best ways to improve ajax response in jQuery?

My database query is fetching around 5000 rows of data along with data from 5 relational tables, leading to performance issues. The network tab shows the size of the request resource as 9.1 mb. After that, I am dynamically adding this data to a table using ...

Conditionally render a div in React with Next.js depending on the value of a prop

Struggling with an issue in my app and seeking some guidance. The problem arises when dealing with data from contentful that has been passed as props to a component. Specifically, I only want to render a particular piece of data if it actually contains a v ...

Sending Emails with AngularJS

Exploring AngularJs has been a delightful experience for me, and I recently stumbled upon a fantastic plugin for Angular called angular-http-auth. This plugin allows you to seamlessly integrate an identification system. Does anyone know of a similar resou ...

How can I select a checkbox dynamically during runtime?

I am working on a JavaScript code that needs to add the checked option to a checkbox if it has an id or value of 2 at runtime. I have tried the following code, but unfortunately, I am unable to check the checkbox. Do you have any ideas on how to solve th ...

Retrieving the checkbox value from a dropdown selection

I'm stuck and feeling lost here - I must be missing something obvious. Any help will be greatly appreciated! (I am a beginner in html and javascript) I have created a dropdown menu with an unordered list of items populated from JSON data. Here is the ...

Connecting subscribe functions in Meteor React Native

I've been working on a react native app using meteor and the library react-native-meteor. I've run into an issue where I need to make a series of calls one after the other, such as signing in, subscribing to data, and so on. In my actual code, i ...

Switching URLs or internal pages using jQuery Mobile's select menu feature

Utilizing a select box as the navigation menu for my jQuery Mobile website. Some menu items link to internal pages while others link to external URLs. This is the code I'm using to change the page URL: $('#menu-select').change(function() ...