3D model suddenly transforming into darkness as it loads the mtl file

Whenever I load the MTL file, the entire model turns black. Despite setting the RGB parameters to 1 as suggested in this link, my issue remains unsolved.

three.js mtl loader renders black

Below is the code snippet associated with the problem:

var scene = new THREE.Scene();
scene.background = new THREE.Color('0xf1f1f1');

var axesHelper = new THREE.AxesHelper( 5 );
scene.add( axesHelper );

const canvas = document.querySelector('#scene1');

var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
camera.position.set(5,5,5);
scene.add(camera);

var renderer = new THREE.WebGLRenderer({ canvas, antialias: true });
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

var controls = new THREE.OrbitControls(camera, renderer.domElement);
//controls.autoRotate = true;
//controls.autoRotateSpeed = 5;
controls.enableZoom = true;

var keyLight = new THREE.DirectionalLight( new THREE.Color('hsl(30, 100%, 75%)'), 1.0 );
keyLight.position.set(-100, 0, 100);

var fillLight = new THREE.DirectionalLight( new THREE.Color('hsl(240, 100%, 75%)'), 0.75 );
fillLight.position.set(20, 20, 20);

var backLight = new THREE.DirectionalLight( 0xffffff, 1.0 );
backLight.position.set(20, 20, -20).normalize();

var ambientLight = new THREE.AmbientLight();

var pointLight = new THREE.PointLight( 0xffffff,1,100 );
pointLight.position.set(20,20,20);

var pointLight2 = new THREE.PointLight( 0xffffff,0.5,100 );
pointLight2.position.set(20,-20,20);

var pointLight3 = new THREE.PointLight( 0xffffff,0.5,100 );
pointLight3.position.set(-20,20,-20);

var pointLight4 = new THREE.PointLight( 0xffffff,0.5,100 );
pointLight4.position.set(-20,-20,-20);

//scene.add(ambientLight);
scene.add(pointLight);
scene.add(pointLight2);
scene.add(pointLight3);
scene.add(pointLight4);


//scene.add(keyLight);
//scene.add(fillLight);
//scene.add(backLight);

var mtlLoader = new THREE.MTLLoader();
//mtlLoader.setTexturePath('https://i.ibb.co/n1vnyP6/piper-diffuse.jpg');
mtlLoader.setPath('https://raw.githubusercontent.com/fnaseem/3dModelTest/tc/Test/');
mtlLoader.load('soccer_ball.mtl',function(material){
material.preload();
var objLoader = new THREE.OBJLoader();
objLoader.setMaterials(material);
objLoader.load('https://raw.githubusercontent.com/fnaseem/3dModelTest/tc/Test/soccer_ball.obj', function(object){
object.position.set(0,0,0);
console.log(object.children[0].material.color);
object.children[0].material.color.r = 1;
object.children[0].material.color.g = 1;
object.children[0].material.color.b = 1;
console.log(object.children[0].material.color);
scene.add(object);
//renderer.render(scene, camera);
});
});

var animate= function(){

   controls.update();
   renderer.render( scene, camera );
requestAnimationFrame( animate );
};

animate();

You can view the codepen here: https://codepen.io/FarhaNaseem/pen/gOmwbYj?editors=0010

The expected output can be seen in this image: https://i.sstatic.net/6bSzR.png

Answer №1

When the MTL loads the texture as a TIFF image, it cannot be used as an image data source. It is recommended to use JPG or PNG formats instead.

Additionally, if you observe that the object's material has a texture assigned to the map property but with an undefined value for image, the texture may appear black in such cases.

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

The integration of HTML and CSS using ng-bind-html appears to be malfunctioning

<ion-item ng-bind-html="renderHtml(word[key])"> </ion-item> When referring to word[key], it represents: <ul> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ul> This is the CSS being u ...

Manipulate HTML Table to Obtain Value of First Column Cell When Another Cell is Clicked using Javascript

I have a PHP web application where I am retrieving data from MySql and displaying it in the HTML table below. <table id = "table" width="500px" cellpadding=2 celspacing=5 border=2 > <tr> <th>Subject Code</th> <th>Subje ...

The ajax response is being deserialized prior to being parsed by the

In my API controller, I need to respond with a model that includes a decimal property. However, the response type is simply a string. I am aware that converting large decimal data to a JavaScript number may result in some data loss. Therefore, I am consi ...

Adjust the size of images using jQuery to perfectly fit the container dimensions

I am currently working on a script to automatically resize images that are too large for the container: $('img').each(function(i){ var parent_width = parseInt($(this).parent().width()), image_width = parseInt($(this).width()); ...

Utilizing Jquery and Ajax to create a dynamic dropdown selection feature based on dependencies from a JSON file

Could you assist with the code snippet below? I have a form where each dropdown list depends on the selection above it. Based on the user's selection, the appropriate data should display in the subsequent dropdown list. I am trying to make dropdown l ...

Generating React components dynamically can bring flexibility and efficiency to the

Looking for a solution to dynamically render different components based on the arguments passed with data. While using regular or React.createElement(Item) works fine, all other options seem to fail. http://jsfiddle.net/zeen/fmhhtk5o/1/ var React = windo ...

The Correct Approach for Implementing Error Handling in a Node.js API Server

In my Node.js API server, I encountered an issue with error handling. To tackle this problem, I developed a module specifically for error handling. When in development mode, this module sends JSON objects containing errors to the API client. Here is an exa ...

What are the methods for determining if a Triangle intersects a Box3?

Is there a built-in function in THREE.js to determine if a THREE.Triangle overlaps with a THREE.Box3 object? If not, what approach can be taken to achieve this? ...

Reorder elements using CSS when they do not share the same immediate parent container

I am looking to rearrange the order of some items on my page using JS or CSS. The project I am working on is written with ReactJS. Here is the basic structure: <div class="parent"> <form> <div class="header"></di ...

Retrieve the latest entry from a JSON file containing epoch timestamps

Currently, I am in the process of developing an app using angularjs. In my json data, I have timestamps and corresponding values like below: { "dps": { "1455719820": 0, "1455720150": 0, "1455720480": 0, "1455720810": 0, " ...

Manipulating binary data through the use of encodeURIComponent

Currently, I am reading a binary file by making a jQuery ajax get request. The file (a zip file in this instance) is returned as a string. After performing some actions on the file within the browser without modifying it, I need to send it back to a server ...

Suggestion for implementing numerous ajax countdown timers (one call per second)

I am currently developing a system with 100 countdown timers that each make an ajax call every second to retrieve the endTime from the database and update the countdown time. The reason for calling this every second is because the endTime can be altered. ...

The ES6 alternative to require() when not using exports

When I utilize require(./filename), I am able to include and run the code within filename without any explicit export being defined inside filename. In ES6, what is the equivalent of this using import ? Appreciate it ...

Transform a 3D text rotation JavaScript file into an Angular component tailored TypeScript file

I have a javascript file that rotates text in 3D format, and I need help converting it into an Angular component specific TypeScript file. You can find the codepen for the original JavaScript code here. Below are my Angular files: index.html <!doctyp ...

What steps should I take to incorporate this feature into my Meteor project?

After successfully installing the type.js package, I discovered that the code works fine when directly executed in the console. Here is the code snippet: $(function(){ $(".typedelement").typed({ strings: ["You don&apo ...

Create PDF and Excel files using Javascript on the client side

Are there any client-side Javascript frameworks that are comparable to Jasper Report in Java? I need to be able to generate both PDF and Excel files on the client side (browser) without relying on server-side processing. While I've come across Ja ...

Rotating Character in Three.js

I need help adjusting the direction in which a character is facing at spawn in three.js. I referenced an example from to add the character to my scene. While following advice from , I encountered issues with the character controls due to rotation. Curren ...

Can you interact with a node within an Electron application even if the node integration feature is not enabled?

I have an electron app created with vanilla electron. (using npx create-electron-app ......) Can I use const electron = require("electron"); with nodeintegration:true? The library I'm using does not support nodeintegration:true, but my scr ...

Incorporate a JavaScript variable into an HTML href link for dynamic web content

This is a snippet from my code: <p id="demo">{$value.file_name}</p> <script type="text/javascript"> var str = document.getElementById("demo").innerHTML; var res = str.replace("/var/www/html/biology/demo", ""); document.getElementById(& ...

Rejuvenating a template generated on the server in AngularJS

I have a specific partial which is a report - simply a static list of names and dates designed for viewing and printing purposes. For efficiency reasons, the report is rendered server-side, so when a report request is made, my API responds with HTML rathe ...