Develop Reference

Three.js texture is not loading - what would cause this?

I am trying to create a scene using .obj and .mtl files exported from blender. The object is literally just a rectangle (it needs to be a .obj file. more objects will be added to create a scene) I am able to see the material load, but cannot see the texture being applied in chrome or firefox.
the mtl file text
the obj file text
Here is the javascript code:
const obj_loader = new THREE.OBJLoader(),
mtl_loader = new THREE.MTLLoader();
// uses example of OBJ + MTL from three.js/examples
mtl_loader
.setTexturePath('bar/')
.setPath('bar/')
.load('floor.mtl', (materials) => {
materials.preload()
obj_loader
.setMaterials(materials)
setPath('bar/')
.load('floor.obj', (object) => {
// everything returns status 200!
// material is being applied but no texture
scene.add(object);
})
});
project file structure
Checking the console, requests for the mtl, obj, and image files are returning 200 status codes
but the model renders without texture
No errors are in the console at all. What would cause this issue in Three.js? I suspect something is wrong with the .obj or .mtl but I cannot find the problem. (the file paths are correct based on the logged ajax request).

This may be due to the .preload() method not being called on the materials object returned in the material load callback. The preload() method basically creates the material objects loaded by the MTLLoader.
Consider the following updates, with this method call added:
const mtl_loader = new THREE.MTLLoader();
mtl_loader.setTexturePath('bar/');
mtl_loader.setPath('bar/');
mtl_loader.load('floor.mtl', function(materials) {
// Add this (see link below for more detail)
materials.preload()
const obj_loader = new THREE.OBJLoader();
obj_loader.setMaterials(materials);
obj_loader.setPath('bar/');
obj_loader.load('floor.obj', function(object) {
scene.add(object);
})
});
Here is a link to the THREE source code which shows the inner workings of .preload() - hope this helps!

It turned out to be an issue with the UV mapping of the texture. In Blender, you can create a texture, and Blender will show the texture in 'render' mode, even if the UV map is not set (It will wrap automatically).
Blender showing render, even without UV Map
This was especially frustrating because I had these settings when exporting the file:
export settings for OBJ
The MTL and OBJ file appeared to have all the content in it, but by manually UV mapping the texture (instead of using a simple repeat in the "texture" menu) the issue was resolved when I exported again.
UV/Image editor needed to be used
Sorry for any confusion that may have caused. I hope it helps anyone who has the same issue exporting from Blender.

Three.js materialLoader doesn't load embedded texture image

I'm exporting a three.js material using material.toJSON() provided method, this is the result:
{
"metadata":{"version":4.5,"type":"Material","generator":"Material.toJSON"},
"uuid":"8E6F9A32-1952-4E12-A099-632637DBD732",
"type":"MeshStandardMaterial",
"color":11141120,
"roughness":1,
"metalness":0.5,
"emissive":0,
"map":"876D3309-43AD-4EEE-946F-A8AE8BA53C9E",
"transparent":true,"depthFunc":3,"depthTest":true,"depthWrite":true,
"textures":[
{
"uuid":"876D3309-43AD-4EEE-946F-A8AE8BA53C9E",
"name":"",
"mapping":300,
"repeat":[1,1],
"offset":[0,0],
"center":[0,0],
"rotation":0,
"wrap":[1001,1001],
"minFilter":1008,
"magFilter":1006,
"anisotropy":1,
"flipY":true,
"image":"C6B4FEDA-8E7E-490A-A1AD-866ECE36E952"}],
"images":[
{
"uuid":"C6B4FEDA-8E7E-490A-A1AD-866ECE36E952",
"url":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgAAAAEACAYAAADFkM5nAAAg[...]"
}]}
I try to use MaterialLoader as the example suggest
https://threejs.org/docs/#api/loaders/MaterialLoader
but at parsing time I always get this error
THREE.MaterialLoader: Undefined texture
876D3309-43AD-4EEE-946F-A8AE8BA53C9E
I'm I wrong if I expect from the MaterialLoader to use the embedded resources?
I'm doing it wrong or missing something?
How can I also load the images in the json file into the related texture?
Thanks!
here a fiddle:
http://jsfiddle.net/akmcv7Lh/211/

Notice that MaterialLoader is not able to load textures. It expects that textures are set via MaterialLoader.setTextures() before loading a JSON file like ObjectLoader does:
const loader = new MaterialLoader();
loader.setTextures( textures );
So MaterialLoader can only be used as a standalone loader if the respective materials have no textures. Otherwise you have to prepare the textures on app level similar how ObjectLoader does.

Cannot load texture in obj+mtl file

I just follow this example: http://threejs.org/examples/webgl_loader_obj_mtl.html
But my object loads without texture. I used a .obj and a .mtl file generated by Blender. What can I do to apply a texture to this object in Three.js?
Here is the object I want to load: http://tf3dm.com/3d-model/super-camputer-ibm-75503.html
How I load the object:
var loader = new THREE.OBJMTLLoader();
loader.load('obj/servidor.obj', 'obj/servidor.mtl', function(object) {
object.position.y = -80;
scene.add(object);
}, onProgress, onError);

The problem was that the texture was not included in MTL file. I applied the texture with blender and generated obj and mtl again, now Three.js loads the object with texture (the javascript code from the question is ok)

Auto-scale when rendering an .stl file with three.js

I'm trying to create a server/webpage that works as follows:
Client uploads an .stl file that they want 3D-printed
Server runs a mesh repair script on the .stl file
The newly repaired .stl file is rendered in the client's browser so they can confirm that the script didn't alter the .stl file in a bad way
The problem I'm having is with step 3. I'm trying to use this example from the three.js repo to render the .stl file:
https://github.com/mrdoob/three.js/blob/master/examples/webgl_loader_stl.html
The problem is, if the model in the .stl file is too large you can't see the entire thing.
I can fix this so that the entire model is in view of the camera by playing around with the three parameters in the mesh.scale.set(x, y, z) function in this code block:
var loader = new THREE.STLLoader();
loader.addEventListener( 'load', function ( event ) {
var geometry = event.content;
var mesh = new THREE.Mesh( geometry, material );
mesh.position.set( 0, - 0.37, 0 );
mesh.rotation.set( - Math.PI / 2, 0, 0 );
mesh.scale.set( 2, 2, 2 );
mesh.castShadow = true;
mesh.receiveShadow = true;
scene.add( mesh );
} );
loader.load( './models/stl/binary/pr2_head_tilt.stl' );
However, I would like to know how to automatically recognize the size of the model in the .stl file, and scale it accordingly.
I know it is possible, as GitHub has achieved this with their STL file viewer.
You can see how it works by navigating here and clicking on one of the .stl files:
https://github.com/mrdoob/three.js/tree/master/examples/models/stl/binary
Basically the GitHub STL file viewer is exactly what I want to emulate, since it loads any .stl file cleanly without requiring the user to zoom-in/out to properly view the model.

How much of a model is visible in your viewport does depend on your camera parameters and how you have set up your scene.
You can use the .boundingBox or .boundingSphere of the Geometry to figure out how big the model is and then use some heuristic to scale it down or up appropriately to what you would like to achieve. There is also a BoundingBoxHelper that can help you visualize the extends of your model.
In addition you can look at:
How to Fit Camera to Object and
Adjusting camera for visible Three.js shape

THREE.js Imported model doesn't apply face textures

I'm trying to import a model that was exported from blender using the THREEJS exporter.
So far the model loads and appears in my scene with the materials being applied correctly (Car is yellow as it's supposed to be and the glass is transparent as it's supposed to be.)
But it's not applying my textures to the car which are saved in .tga form.
If I DO NOT include the textures in my server directory where the model is i will get this error:
http://novsstudio.com/race/model//wheel.tga 404 (Not Found)
Notice it has two /'s after model.
I'm not sure if this is my problem, and I don't know how to fix it.
But when I upload my textures to /race/model/ all the textures are DOWNLOADED as seen in the Network tab in Chrome but are not applied to the model.
I believe maybe threejs cant find them because it's looking for them in /race/model//?
Here's my code to import the model:
var jsonLoader = new THREE.JSONLoader();
jsonLoader.load( "model/car.js", addModelToScene );
// addModelToScene function is called back after model has loaded
var ambientLight = new THREE.AmbientLight(0xFFFFFF);
scene.add(ambientLight);
ambientLight.position.set(0, 500, 200);
function addModelToScene( geometry, materials )
{
var material = new THREE.MeshFaceMaterial( materials );
android = new THREE.Mesh( geometry, material );
android.scale.set(10,10,10);
scene.add( android );
}
To see a live example of what it looks like now go to http://novsstudio.com/race
You can also view the source there too to get the full source and you can also browse my directories to see where i have all my files at http://novsstudio.com/race/model
Thank for the help let me know if you need more information.
Tip: You can move the camera at my website by clicking and holding/dragging to see the whole model.

See the TGALoader located in the examples/js/loaders directory.
Example: http://threejs.org/examples/webgl_materials_texture_tga.html.
Alternatively, you can convert you TGA files to PNGs and modify the JSON file accordingly.
EDIT: Updated to three.js r.68