Previously, I used mtl+obj files in an iOS app to load a 3D PCB chip into a scene.
However, when trying to load it using three.js (r80), the object loads fine and the geometry appears correct, but none of the textures, colors, or images load onto the object. Is there something wrong with my approach?
All the images referenced in the mtl file are located in the same directory as the mtl+obj files, and they are properly requested and served to the browser.
In XCode, the object looks correct: https://i.sstatic.net/FDJB7.png
When loaded in Blender, it displays correct colors, but the images do not appear on the object: https://i.sstatic.net/ahE68.png
Loaded via three.js, it just shows up as a black object: https://i.sstatic.net/EgcES.png
The JavaScript code I'm currently using:
var camera, scene, renderer;
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
init();
function init() {
var mtlLoader = new THREE.MTLLoader();
mtlLoader.load( "Thunderboard.mtl", function( materials ) {
materials.preload();
var objLoader = new THREE.OBJLoader();
objLoader.setMaterials( materials );
objLoader.load("Thunderboard.obj", function ( object ) {
scene.add(object);
});
});
camera.position.z = 3;
renderer = new THREE.WebGLRenderer({ alpha: true });
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
renderer.render( scene, camera );
}