"Upon loading an mtl file in three.js, the result appears

I'm encountering an issue while attempting to incorporate a .obj level into my program as it appears black when rendered. The associated .mtl file necessitates multiple images spread throughout, leaving no untextured spaces. Strangely, the same object worked flawlessly in my previous project, yet fails to do so in my current one. Oddly enough, when I omit the materials, the lighting behaves as expected, but as soon as I include them, the object turns pitch black. Interestingly, the renderer continues to render without any disruption, and the console displays no errors.

Below is the code utilized in my current project, with MaterialLoader representing an instance of MTLLoader and ObjectLoader representing an instance of OBJLoader:

MaterialLoader.load("bbb/bbb.mtl",
    function(materials) {
        materials.preload()
        ObjectLoader.setMaterials(materials)
        ObjectLoader.load("bbb.obj",
            function(model) {
                let mesh = model.children[0]
                scene.add(mesh)
            }, null,
            function(error) { alert(error) }
        )
    }, null,
    function(error) { alert(error) }
)

And here is the code from my prior project, with the loader variable denoting an OBJLoader instance with successful material loading:

mtlLoader.load(
    "bbb.mtl",
    function(materials) {
        materials.preload()
        loader.setMaterials(materials)
        loader.load("bbb.obj",
            function(obj) {
                level = obj.children[0]
                scene.add(level)
            }, null,
            function(error) { alert(error) }
        )
    }, null,
    function(error) { alert(error) }
)

Answer №1

experiment by adjusting the material color of the object, like so:

model.children[0].material.color.r = 0.5;
model.children[0].material.color.g = 0.8;
model.children[0].material.color.b = 0.2;

this method worked for me

Answer №2

Your code has been successfully tested! If the issue persists, it could be related to problems with material export, UV unwrapping, incorrect texture path, or insufficient lighting in the scene. Below is a sample of test code that may help identify and resolve the problem:

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75,320/240,1,500);
camera.position.set( 0,2,2 );
camera.lookAt( scene.position );
var lightIntensity = 1;
var lightDistance = 10;
var light = new THREE.AmbientLight( 0xFFFFFF, lightIntensity, lightDistance );
light.position.set( 0, 5, 0 );
scene.add( light );
var grid = new THREE.GridHelper(10,10);
scene.add( grid );
var renderer = new THREE.WebGLRenderer({});
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( 320,240 );
renderer.domElement.style.margin = '0 auto';
renderer.domElement.style.display = 'block';
renderer.domElement.style.backgroundColor = '#dddddd';
$(document.body).append(renderer.domElement);
function update(){
  renderer.render( scene, camera );
  requestAnimationFrame( update );
}
update();
mtl_loader = new THREE.MTLLoader();
mtl_loader.load("assets/doughnut.mtl",
    function(materials) {
        materials.preload()
            var obj_loader = new THREE.OBJLoader();
            obj_loader.setMaterials(materials)
            obj_loader.load("assets/doughnut.obj",
            function(object) {
                let mesh = object.children[0]
                scene.add(mesh);
            }, null, function(error) {alert(error)}
        )
    }, null, function(error) {alert(error)}
);

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

Dealing with a unique key error in a loop while using React and Google

I've implemented a react-google-maps component that successfully retrieves data from various locations. However, I'm encountering an error message in the console: Warning: Each child in a list should have a unique "key" prop. I made s ...

Failure of the controller in a different module

Hello, I'm currently facing an issue with setting up my child controller. I have developed two modules - one for managing directives and controllers, and another for handling Gmail functionalities. //js file 1 var gmailMod = angular.module('gm ...

Preparing the data before displaying it

I have a data display in the view that needs to be formatted first. Previously, I used val.toFixed(2) which worked fine for numbers, but when letters were included with the numbers, the formatting didn't account for them and only displayed the numbers ...

learning how to combine two json arrays of objects and showcase them in a react component

What is the best way to combine this data and present it in a table with a map using React? The text will be in the first column and the count in the second. const handleSubmit = async (event) => { event.preventDefault(); let URL1 = " ...

The array containing JSON objects enclosed within curly braces is causing a syntax error

Given a variable containing data that looks like an "array" with JSON Objects inside (even though it is not actually formatted as an array, starting and ending with curly braces): {"x1","x2"},{"y1","y2"},{"z1","z2"} How can I transform this so that the i ...

Generate a graphical representation with react-d3

In an attempt to create a histogram using react-d3-components, I have the following code: import React, { Component } from 'react'; import * as d3 from 'd3'; import * as ReactD3 from 'react-d3-components'; import propTypes fr ...

Unable to view sidebar navigation on the screen

I've been experimenting with the sidebar navigation from w3 schools, specifically trying to create a side-nav that opens from one div. You can see an example here: http://www.w3schools.com/w3css/tryit.aspfilename=tryw3css_sidenav_left_right&stack ...

Beware of UTF-8 Decoding Problems: Avoid using "0"-prefixed octal literals and octal escape sequences as they are outdated. For octal literals, opt for the "0o" prefix

I've hit a roadblock trying to achieve this task, any assistance would be greatly appreciated. I have a string that looks like this "jas\303\241nek" and I need to convert it to look like "jasánek". After using [this web ...

Can the data from these JSON elements be obtained?

Suppose I have a JSON file with the following structure: { "update" : { "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c3a6aea2aaaf83a4aea2aaafeda0acae">[email protected]</a>":{ "1234": {"notfication" ...

What is preventing me from utilizing automatic reloading in Next.js to view changes without the need to restart the server?

Being a beginner in Next.js and the world of web development, I may have some basic questions. Following the installation guide, I managed to successfully create my first Next.js app. However, I'm facing an issue with auto-reloading when I make change ...

Using Material-UI with @emotion/cache in SSR results in consistently empty cache

After transitioning my React SSR from pure @emotion to material-ui 5.0, I encountered an issue where the styles no longer get extracted. The ID extraction in createExtractCriticalToChunks seems to be functioning correctly, but the cache.inserted object fro ...

Issue: Unable to locate the "es2015" preset in relation to the given directory

I encountered an issue while attempting to use babel. Error: Couldn't find preset "es2015" relative to directory webpack.config.js module.exports = { entry: './main.js', ourput: { path:'./', filename:&a ...

Having trouble retrieving data from the server for the POST request

I am fairly new to using Jquery and Ajax requests. I'm currently working on a website where I have a simple form that collects an email address from users and sends it to the server. However, I'm struggling to figure out how to capture the form d ...

What is the process for verifying a particular user in AngularJS?

I'm new to AngularJS and I'm a bit confused about the concepts of GET, PUT requests. I am currently working on an app where I display a list of users on one page, and on another page, I have a form with three buttons. My main focus is on the "Con ...

Encountering an error while attempting to utilize the split function in browser.umd.js due to

Hey there, I seem to be encountering an issue that states: Cannot read properties of undefined (reading 'split'). I came across this error message in the console https://i.sstatic.net/3nICv.png Upon clicking the link to the error, it directs me ...

Encountering errors while running Angular 8's ng build prod command

After successfully migrating my project from Angular 7 to Angular 8, I encountered an issue when attempting to run 'ng build prod' which resulted in the following error: ERROR in Error during template compile of 'Ng2CompleterModule' Cou ...

Ensure that the form is submitted when a checkbox is clicked, while also maintaining the native browser

My form contains a text input field and a checkbox. The text input must not be left empty when the form is submitted, which is why the required attribute is used. I want the form to be submitted every time the checkbox is clicked, while still maintaining ...

Discover the power of EJS embedded within HTML attributes!

There are two cases in which I am attempting to use an EJS tag within an HTML attribute. SITUATION 1: <input style="background-image: url(<%= img.URL %>)" /> SITUATION 2: <input onchange="handleCheckboxChange(<%= i ...

Incorporate a dynamic fading effect for text and images using JQuery

I successfully implemented a Crossfade effect using Jquery: function doAnimationLoop(o, n, t, i, a) { fadeInOut(o, n, t, i, function() { setTimeout(function() { doAnimationLoop(o, n, t, i, a) }, a) ...

Global variable in Npm CLI

I'm working on a CLI tool that heavily relies on storing a unique identifier (uid). I attempted to use fs to store the uid; however, the file was created in the directory where the command was executed. #!/usr/bin/env node const program = require("co ...