Encountering a 404 error while using THREE.ImageUtils.loadTexture in three.js

My first attempt at using three.js involves loading a 3D model, but I'm encountering an issue with texture loading. 

loader.load('models/asteroid_OBJ/asteroid OBJ.js', function (geometry, materials) {
  var material = new THREE.MeshLambertMaterial({
    //map: THREE.ImageUtils.loadTexture('models/asteroid_OBJ/Map__4_Mix.tga'),   
    //map: THREE.ImageUtils.loadTexture('models/asteroid_OBJ/Map__12_Cellular.tga'),   
    //map: THREE.ImageUtils.loadTexture('models/asteroid_OBJ/Map__15_Noise.tga'),   

    colorAmbient: [0.480000026226044, 0.480000026226044, 0.480000026226044],
    colorDiffuse: [0.480000026226044, 0.480000026226044, 0.480000026226044],
    colorSpecular: [0.8999999761581421, 0.8999999761581421, 0.8999999761581421]
  });

When I remove the loadTextures code, the image loads correctly and functions well. However, keeping it leads to the image not appearing. Additionally, an error message is displayed regardless of the outcome: 

GET http://localhost:8080/models/asteroid_OBJ/-bm%200.800000%20Map__4_Mix.tga 404 (Not Found)

It seems like the textures are in the right directory alongside asteroid OBJ.js.

javascript3dthree.js

Answer №1

When encountering this issue, it is likely due to the omission of registering .tga as a file extension in the Web.config file. Your Web.config file needs to include the following configuration:

<system.webServer>
             <staticContent>
                    <mimeMap fileExtension=".obj" mimeType="application/octet-stream" />
                    <mimeMap fileExtension=".tga" mimeType="application/octet-stream" />

             </staticContent>
</system.webServer>

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

Troubleshooting Issue with React Function's Conditional Component Rendering

Currently, I am working on honing my skills in React using Codesandbox. My goal is to conditionally display a functional React component inside a function (within a class-based component) that triggers when a button is clicked. If you'd like to take ...

javascriptreactjsreact-functional-component

It seems that React JS with Redux may not be triggering a re-render

I am currently delving into the world of React JS with Redux and have what I believe is a straightforward query. Here's the code snippet I'm working with: import React from 'react'; import ReactDOM from 'react-dom'; import { ...

javascriptreactjsreact-redux

Tips for sending formData (file upload) via jQuery ajax with MVC model

My Web Development Challenge : //IMAGE UPLOAD var formData = new FormData(); var totalImages = document.getElementById("ImageUpload").files.length; for (var x = 0; x < totalImages; x++) { ...

javascriptc#jqueryajaxasp.net-mvc

How big is the array size in the WebAudio API data?

Exploring the visualization of waveform and FFT generated by the audio stream from the microphone through the WebAudio API. Curiosity strikes - what is the size of each data array available at a given moment? Delving into the getByteTimeDomainData, it men ...

javascripthtmlaudioweb-audio-api

Troublesome CSS conflicts arise when using minified assets with AngularJS and Webpack

After transitioning my Angular project to the Webpack build system, I encountered issues with Angular Dependency Injection in the JS source code. Surprisingly, now I am facing JS errors that are targeting CSS files, leaving me completely bewildered about w ...

javascriptangularjswebpack

The integration of Node.js and express.js from distinct JavaScript files

How can I utilize express.js to render html in two separate files? file1.js file2.js The code inside file1.js is as follows: var express = require('express'); var app = express(); app.get('/foo/bar1', (req, res) => res.json([&apo ...

javascriptexpress

Managing business logic in an observable callback in Angular with TypeScript - what's the best approach?

Attempting to fetch data and perform a task upon success using an Angular HttpClient call has led me to the following scenario: return this.http.post('api/my-route', model).subscribe( data => ( this.data = data; ...

javascriptangulartypescriptobservableangular-httpclient

Having trouble updating a text field on an event using JavaScript - value not defined

When I change the select option, my goal is to dynamically set the value of the input using JavaScript. However, I am encountering an issue where the value becomes undefined. Below is a snippet from my HTML (JSP) file: <body> <center>< ...

javascriptjavaspring-mvc

The functionality of the Ajax script seems to be optimized for Firefox browsers exclusively, as it is encountering issues with compatibility on other

My code works perfectly in Firefox, but I'm encountering an issue in all other browsers. Specifically, I'm getting the error message "SyntaxError: JSON Parse error: Unexpected EOF" on line if (this.readyState == 4 && this.status == 200). ...

javascriptjqueryjsonajax

Unusual navigation patterns in Angular

https://i.sstatic.net/kdh4A.png My Mean app is set up with the Angular app residing in the '/dashboard' path. The home page of the app works fine. Reloading the app returns the page it was on. Even routes with '/dashboard/anything/anything& ...

javascriptangularjsroutesmean-stackngroute

What could be causing this `even` function to malfunction when utilizing getElementById?

Need assistance with utilizing document.getElementById? Let's take a look at this code snippet: function even() for (i = 0; i < 10; i++) { if (i % 2 == 0) { alert(i); } } document.getElementById("even").innerHTML = i + &apos ...

javascripthtml

What are the steps to transition from @zeit/next-sass deprecation?

Is there a way to transition and modify the next.config.js file to switch from using @zeit/next-sass to leveraging Next.js's built-in support for Sass? Check out this link for more information: https://www.npmjs.com/package/@zeit/next-sass const withS ...

javascriptwebpacksassnext.js

Encoding a string in JSON that contains the "#" symbol along with other special characters

The client side javascript code I have is as follows: <html> <script type="text/javascript" src="js/jquery.min.js"></script> <script> $(document).ready(function() { //var parameters = "a=" + JSON.stringify( ...

javascriptjsonnode.jsencoding

Steps to update the first set of x documents in MongoDB using Mongoose

Is there an efficient way to update the first five documents in mongoose? While I am familiar with updating multiple documents based on a condition, I specifically want to target the first five documents for updating in mongoose. I understand that I can a ...

javascriptnode.jsmongodbexpressmongoose

Creating a conditional query in Mongoose: A step-by-step guide

The code below functions without any query strings or with just one query string. For example, simply navigating to /characters will display all characters. However, if you specify a query string parameter like /characters?gender=male, it will only show ma ...

javascriptnode.jsmongodbexpressmongoose

Obtaining a URL from a parameter

I have a unique situation with one of my parameters in the routing, as it involves an actual URL. router.get('/api/sitemap/:url', function(req, res) { var url = req.params.url; ... } How can I ensure t ...

javascriptnode.js

Setting null for HttpParams during the call

I am encountering an issue with HttpParams and HttpHeaders after upgrading my project from Angular 7 to Angular 8. The problem arises when I make a call to the API, as the parameters are not being added. Any assistance in resolving this matter would be gre ...

javascriptangulartypescript

Using JavaScript variables within an @if statement in Laravel within the innerHTML segment

How can I incorporate a JavaScript variable 'x' into an @if statement in Laravel? I have tried placing it both inside and outside of the @if statement. When placed outside, it works perfectly fine, but I really need to perform an action based on ...

javascriptphplaravel

Nullify the unfulfilled fetch call

When a value is entered in the search bar on the webpage, it gets added to a URL and used to retrieve JSON data. Everything works smoothly, but if a value is inputted that the API doesn't have information for, a null response is returned. The questio ...

javascriptreactjsexpressfetch

jQuery.get() function is limited to specific types of webpages

I have successfully combined multiple weather APIs on my website, which can be found here. Recently, I started using the weather.gov API and it has been quite effective. However, there are certain data points that I need to extract which the weather.gov A ...

javascripthtmljqueryajaxget