Having trouble loading mtl file in Three.js with map_ks and bump instructions?

I am currently working with an MTL file that contains the following specifications:

newmtl blinn_backSG
illum 4
Kd 0.17 0.15 0.28
Ka 0.00 0.00 0.00
Tf 1.00 1.00 1.00
bump -s 0.1 0.1 canvas_specular.tif -bm 0.025
Ni 1.00
Ks 0.00 0.00 0.00
map_Ks -s 0.1 0.1 canvas_specular.tif
newmtl blinn_boxSG
illum 4
Kd 0.00 0.00 0.00
Ka 0.00 0.00 0.00
Tf 1.00 1.00 1.00
map_Kd -s 0.333333 0.333333 canvas_map.tif
bump -s 0.333333 0.333333 canvas_map.tif -bm 0.1
Ni 1.00
Ks 0.00 0.00 0.00
map_Ks -s 0.333333 0.333333 -mm 0 0.503822 canvas_specular.tif
newmtl blinn_hungerSG
illum 4
Kd 0.00 0.00 0.00
Ka 0.00 0.00 0.00
Tf 1.00 1.00 1.00
Ni 1.00
Ks 1.00 1.00 1.00
newmtl initialShadingGroup
illum 4
Kd 0.50 0.50 0.50
Ka 0.00 0.00 0.00
Tf 1.00 1.00 1.00
Ni 1.00

While using MTLLoader, I encountered errors related to the bump -s and map_Ks -s instructions as seen in my Chrome DevTools console:

three.js:18393 GET http://localhost:8080/assets/objs/canvas-test/-s%200.1%200.1%20canvas_specular.tif%20-bm%200.025 404 (File not found)load @ three.js:18393load @ three.js:18507load @ three.js:20043loadTexture @ MTLLoader.js:468createMaterial_ @ MTLLoader.js:437create @ MTLLoader.js:329preload @ MTLLoader.js:297(anonymous function) @ previews.html:178(anonymous function) @ MTLLoader.js:36(anonymous function) @ three.js:18347
2016-07-08 08:30:45.396 three.js:18393 GET http://localhost:8080/assets/objs/canvas-test/-s%200.333333%200.333333%20canvas_map.tif 404 (File not found)load @ three.js:18393load @ three.js:18507load @ three.js:20043loadTexture @ MTLLoader.js:468createMaterial_ @ MTLLoader.js:393create @ MTLLoader.js:329preload @ MTLLoader.js:297(anonymous function) @ previews.html:178(anonymous function) @ MTLLoader.js:36(anonymous function) @ three.js:18347
2016-07-08 08:30:45.397 three.js:18393 GET http://localhost:8080/assets/objs/canvas-test/-s%200.333333%200.333333%20canvas_map.tif%20-bm%200.1 404

The issue is that the flag and positioning arguments are being incorrectly interpreted as part of the URL path. Is there a way to resolve this problem within the MTLObjectLoader or modify the MTL file to use a different instruction format?

Thank you for your assistance.

javascriptthree.js

Answer №1

This particular example showcases a standard MTL file that I frequently utilize in conjunction with OBJLoader.js and MTLLoader.js:

# Blender MTL File: 'INC1c_1.blend'
# Material Count: 1

newmtl Inc1cMiscTexture
Ns 100
Kd .6 .6 .6
Ks 0.02 0.02 0.02
d 1.000000
illum 1
map_kd textures/Inc1cMisc_CO.png
map_bump textures/Inc1cMisc_NO.png

Any output from the modeling software is adjusted to adhere to this format. Somewhere between r69 to r78. For what it's worth.

Edit - as stated in the release summary, r79 recently added support for map_Ks in MTLLoader.

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

How to implement scrollIntoView in Vue 3 with script setup

Having some trouble with scrolling to a specific element when clicked. I keep getting this error message. Uncaught TypeError: element.scrollIntoView is not a function Here is my script <script setup> import { ref } from 'vue' function goT ...

javascriptvue.jsvuejs3vue-composition-apijs-scrollintoview

What is the best way to showcase response information on the website interface?

Recently, I have been utilizing GET requests to the github API: axios.get('https://api.github.com/users/roadtocode822') .then(function (response) { console.log(response.data); }) Successfully retrieving the response data. This particula ...

javascriptnode.jsmongodbhttpexpress

Managing the state in NextJS applications

I've scoured the depths of the internet in search of a solution for this issue, but unfortunately I have yet to come across one that effectively resolves it. I've experimented with various state management tools including: useContext Redux Zusta ...

javascriptreactjsreduxnext.jsstate

"Could you please help me understand the process of receiving a JSON in an Express

When working with React, I encountered an issue where the JSON data sent to me from the front-end is in a strange format (an object with the data as a string). I am unsure how to convert it back into the object type. This is what I send: const data = { ...

javascriptnode.jsreactjsrestexpress

Issue with submitting a form within a React modal - lack of triggering events

I am utilizing the npm package react-modal (https://www.npmjs.com/package/react-modal) in my project. The issue I am facing is that when I click on 'Submit', nothing happens. The function handleSubmit</a> is not being triggered, as no conso ...

javascripthtmlreactjsnext.js

Guide to using Vue.js and Vue Router to create a sub menu for the children of the current route

I am currently working on customizing the navigation for my Vue application. My goal is to create a main menu at the top that displays all the root level routes, and a side menu that appears when navigating through child routes. Here is an example of what ...

javascriptuser-interfacevue.jsroutes

Use two separate AJAX requests to open and close the modal dialog

I am experiencing an issue with my subscription form that uses modal windows. After closing the window and trying to subscribe again, the ajax calls are being duplicated, resulting in an error. $("#openModal").click(function() { if($("#wname").val() = ...

javascriptphpjqueryajax

Is concealing content using Javascript or jQuery worth exploring?

While I have been hiding content using display:none; in css, there are concerns that Google may not like this approach. However, due to the needs of jQuery animations, it has been necessary for me. Recently, I have come across a new method for hiding conte ...

javascriptjqueryhtmlcss

When using JSX, it's important to wrap adjacent elements within an enclosing tag to avoid errors. Make sure to properly wrap the JSX tags to

import React, { useState } from 'react'; import ReactDOM from 'react-dom'; function DisplayData(props) { //creating the DataList const dataList = data.map(data => ( <><span>{data.name}</span> nbsp; <span> ...

javascriptreactjsnpmreact-redux

How can we protect against CSRF attacks?

My typical approach involves using AJAX to input data into a MYSQL database like this: $.ajax({ url: "writescript.php", type: "POST", data: { data : mydata,//this could be anything }, success: function (html) { //do something ...

javascriptphpjqueryajaxcsrf

React animation failing to render underline animation

After tinkering with the underline animation while scrolling down on Codepen using Javascript, I successfully implemented it. You can check out the working version on Codepen. This animation utilizes Intersection Observer and a generated svg for the underl ...

javascriptcssreactjstypescriptmaterial-ui

JavaScript allows for the hiding of the Android navigation bar on web apps in Chrome, which includes the virtual back, home screen, and other buttons

In the process of developing a web application, I am aiming to provide users with a fully immersive fullscreen experience. This entails hiding not only the Chrome address bar at the top but also the navigation bar at the bottom (which includes virtual back ...

javascriptandroidweb-applicationsfullscreen

What is the best way to enable object references in Node modules?

I've been working on my Express.js web app and I've realized that as I extract parts of my code from the main app.js file into separate modules, I sometimes need to access objects from the main file. I'm trying to figure out the best way to ...

javascriptnode.jsexpressreferencemodule

What steps should I take to address the issue of sanitizing a potentially harmful URL value that contains a

I've encountered a URL sanitization error in Angular and despite researching various solutions, I have been unable to implement any of them successfully in my specific case. Hence, I am reaching out for assistance. Below is the function causing the i ...

javascriptangulartypescriptimageangular-dom-sanitizer

The revalidation feature in Next.js' getStaticProps function does not seem to be

https://i.stack.imgur.com/vnNMQ.png I have a question regarding my use of the getStaticProps function in index.js. I am trying to ensure that my API call runs every 60 seconds when a user visits my page, but I am experiencing issues with revalidate not wo ...

javascriptnode.jsreactjsgraphqlnext.js

What is the best way to synchronize HTML5 audio playback on different browsers?

When working with audio files in different browsers like Chrome, Firefox, and Safari, I noticed that they seem to start at slightly different timestamps. This discrepancy becomes more pronounced as the audio progresses, with a gap of around 5 seconds after ...

javascripthtmlmp3html5-audio

Tips for receiving dual return values from an AJAX request

I am sending an array of table IDs to retrieve the table numbers associated with those IDs from the database. I need to add up all the default seats for each table ID and return the total. JAVASCRIPT : function showUser(str) { if ...

javascriptphpjqueryajax

Bindings with Angular.js

I have developed an application similar to Pastebin. My goal is to allow users to paste code snippets and display them with syntax highlighting and other visual enhancements, regardless of the programming language used. To achieve this, I utilize Google&ap ...

javascriptangularjs

Exploring the functionality of Next.js with Links and routes

Currently, I am facing an issue with the popover menu in my header that displays products. The problem arises when I click on a product in the list; it navigates correctly to the path "products/some-product" regardless of the selected item. However, if I a ...

javascriptnext.js

Code - Capture user's input

I have multiple input fields in my HTML document and I want to retrieve the text entered into one of them. Here's an example of one such input field: <TH> <FORM> <input name="designation" type="text" size="12" /> < ...

javascriptjqueryhtmlinput