After following the steps outlined in this tutorial to export a .blend file using the Blender exporter packaged with Three.js, I encountered an issue. Despite loading the mesh successfully into my experiment environment, the textures were not displaying as expected. To troubleshoot, I checked that the images were loading correctly by logging their creation in the Loader source of Three.js.
var jLoader = new THREE.JSONLoader();
jLoader.createModel(map.data, function(geometry) {
var material = new THREE.MeshFaceMaterial(),
mesh = new THREE.Mesh(geometry, material);
mesh.scale.set(50, 50, 50);
scene.add(mesh);
}, map.texturePath);
I used createModel to load the JSON data and map.data contains the exported JSON while map.texturePath points to the directory containing the textures. Despite this setup, the textures were still not rendering properly. Upon inspecting the metadata, I noticed a discrepancy between the actual number of materials and what was indicated in the JSON.
The rendered result showed blank areas where textures should have been displayed. Even after trying different approaches such as adjusting paths and modifying material properties within the JSON, the issue persisted.
Upon further investigation using WebGL-Inspector, I identified errors related to bound buffers and element arrays. The debugging output pointed towards possible inconsistencies or missing values within the JSON structure that could be causing the problem.
If needed, additional details and debug information can be found in the links provided for the working "649" texture and the broken "rust" texture, extracted through WebGL-Inspector analysis.
Edit 3
Using the WebGL-Inspector I have pulled a little more info about the actual calls that are failing. Here is the debug info for the working "649" texture and the broken "rust" texture though the texture doesn't show on the linked pages the data is all there if it helps someone (the textures do show on the WebGL-Inspector on the isolate page, just not on the exported pages I linked).