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