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.

Collada loader: Is there anyway to get several meshes from the scene object?

I recently tried some experiments with Blender and the Collada Loader in three.js. In my Blender scene, I have three objects, but of course I only can manage one scene object with three.js with the loader. Everything works fine, even materials imported from Blender, but I was wondering if there is anyway to get the several objects from the scene object, turn them into three.js meshes, and then animate them individually, without turning them into several .dae files.
Posting my code here if it is useful:
var loader = new THREE.ColladaLoader();
loader.options.convertUpAxis = true;
loader.load( 'scene.dae', function ( collada ) {
dae = collada.scene;
dae.position.set(0, 0, 0);
dae.scale.set(50, 50, 50);
scene.add(dae);
});
Thanks for your help!

If you console.log(collada.scene) you'll see that you have a child array. This is where all the meshes live.
E.g. you can access the first one like so:
collada.scene.children[0].children[0];

Accessing multiple objs using .getObjectById() with JSONLoader in Three.js

Is it possible to differentiate between the meshes within one .js file exported from blender and animate them separately using Three.js?
The cube I would like to select is named "Cube" loads properly. However, when I try to get it by Name or Id, it doesn't recognize the var item1.
loader = new THREE.JSONLoader();
loader.load('engine.js', function (geometry, materials) {
var mesh, material;
material = new THREE.MeshFaceMaterial(materials);
mesh = new THREE.Mesh(geometry, material);
mesh.scale.set(1, 1, 1);
var item1 = scene.getObjectByName("Cube");
item1.position.x = 15;
scene.add(mesh);
});
I found this post but it seems unresolved: Three.js load multiple separated objects / JSONLoader
What is the best approach to loading multiple meshes via JSONLoader? I'd prefer to load them together as one .js file and just select the ones I would like to animate.
Thanks for your help!

In your blender scene you need to name every mesh you want to access independently in three.js. Then you can use Object3D.getObjectByName() to access your mesh in three.js.

Yes, it is possible to load an entire scene with several meshes from a json file exported from Blender!
You can see the complete process described on my answer of the cited post
So, you can differentiate between the meshes using the getObjectByName method and manipulate them separately. But it is important to know that the loaded object isn't a Geometry anymore. It is labeled with the Scene type by now and it must be handled in a different way.
You must change the loading code for one like this:
loader = new THREE.JSONLoader();
loader.load( "obj/Books.json", function ( loadedObj ) {
var surface = loadedObj.getObjectByName("Surface");
var outline = loadedObj.getObjectByName("Outline");
var mask = loadedObj.getObjectByName("Mask");
mask.scale.set(0.9, 0.9, 0.9);
scene.add(surface);
scene.add(outline);
scene.add(mask);
} );
In the above code we can indeed animate the surface, outline and mask meshes independently.

Can't create a mesh from a loaded Three.js object

I used clara.io to export a model with four textures on it in the ThreeJS Object format. It results in a .json file. I am trying to load it and have it display correctly. If I do the following(taken directly from the clara.io exporting help), it loads and displays but without textures:
var loader = new THREE.ObjectLoader();
loader.load( "wsc3.json", function(obj){
scene.add(obj);
});
One thing that I have found, is, in reference to using a different kind of loader, it should be possible to convert the loaded object into a THREE.Mesh, get the textures, and then apply them to the mesh. I have a working example of this:
loader = new THREE.JSONLoader();
loader.load("wsc3.js", function(geometry, materials){
// get the materials loaded from the file
var materialsFromFile = new THREE.MeshFaceMaterial(materials);
// create our mesh with the loaded geometry and materials
mesh = new THREE.Mesh(geometry, materialsFromFile);
scene.add(mesh);
});
The problem with using the JSONLoader is that the model I am exporting has subparts, and when the .js file that the JSONLoader uses is exported, it loses the model hierarchy(I checked the .js file itself and none of the subparts are there. It is just a huge list of vertices). If I have a look at the .json file that clara.io exports, I can see the various subparts listed, so I would guess that I need to use this format.
I have looked around and seen that there is the suggestion to just create a new mesh from the obj that is generated by the ObjectLoader. Something like this:
var loader = new THREE.ObjectLoader();
loader.load( "wsc3.json", function(obj){
// get the geometry from the obj
var geometry = obj.geometry;
// get the materials from the obj
var materials = obj.materials;
mesh = new THREE.Mesh(geometry, materials);
scene.add(mesh);
});
Unfortunately, this doesn't work. Nothing displays. I can't figure out what I am doing wrong. Is there a format that Three.js will load, that not only brings the textures but the hierarchy as well?

Three.js loaded .obj does not show after updated to r67

My initial version of three.js is r62, and I can load and show my .obj Objects with .mtl file to the scene correctly.
However, after updating the three.js to r67 (with the OBJMTL loader), my object become unable to render on the scene. I tried to revert everything as the same as the code inside example in webgl_loader_obj_mtl.html from the official:
var loader = new THREE.OBJMTLLoader();
//The exmaple object
//loader.load( 'obj/male02/male02.obj', 'obj/male02/male02_dds.mtl'
//My object
loader.load( '../../my_model/my_model.obj"
, "../../my_model/my_model.mtl"
,function(object){
object.position.y = - 80;
scene.add( object );
}
);
It comes very wield that the example object comes from webgl_loader_obj_mtl.html can be loaded and showed in r67. But for my .obj file, the chrome console message shows that the files are successfully loaded, but it does not show up on the scene.
What would be the problem here? Does there are any limitation/format differences between r62 and r67 in importing .obj and .mtl files?
Looking forward for help, many thanks!