three.js obj + mtl doesnt work - three.js

I have problem with three.js obj + mtl loader. obj still is without texture. any help? :(
var loader1 = new THREE.OBJLoader();
var loader2 = new THREE.MTLLoader();
loader2,load("models/house1.mtl"), function (materials){
loader1.load("models/house1.obj ", function(obj) {
object=obj;
object.materials.set( materials );
object.scale.set(4,4,4);
object.position.set(-60,0,30);
object.rotation.set(0,0,0);
scene.add(object);
})
}

I think you missed to preload the material resources. The MTLLoader will return an instance of "MaterialCreator" after parsing the mtl file. You can use this object to preload and prepare the resources required to create the materials. For more details, refer the code :
Also as #paulsm4 suggested, you are not using the proper syntax for loading an OBJ + MTL model.
var mtlLoader = new THREE.MTLLoader();
mtlLoader.setPath( "models/" ); //Give the path upto the mtl file
mtlLoader.load( "house1.mtl", function( materials ){
materials.preload();//We can preload the material resources like this.
var objLoader = new THREE.OBJLoader();
objLoader.setMaterials( materials );//Set the materials for the objects using OBJLoader's setMaterials method
objLoader.setPath( "models/" ); //Give the path upto the obj file
objLoader.load( "house1.obj", function( object ){
object.scale.set( 4, 4, 4 );
object.position.set( -60, 0, 30 );
object.rotation.set( 0, 0, 0 );
scene.add( object );
}, onProgress, onError );
} );
You can also refer this answer

Related

Three.js | Unable to access imported object property outside loader.load

I want to move an imported object(.obj) on every render/animate function call.
So, I made a copy of the object so as to access it outside the loader.load but everytime I call companion.position I'm getting this error. ( companion is a global variable )
Also, I tried object.traverse in render function and I got the same error (traverse got replaced with position in error).
Please help. Thanks in advance.
Following is where I'm loading the obj and copying it to companion.
var mtlLoader = new THREE.MTLLoader();
mtlLoader.setPath( 'obj/' );
mtlLoader.load( 'satellite.mtl', function( materials ) {
materials.preload();
var objLoader = new THREE.OBJLoader();
objLoader.setMaterials( materials );
objLoader.setPath( 'obj/' );
objLoader.load( 'satellite.obj', function( object ) {
object.position.z = 300;
object.scale.set( 0.25, 0.25, 0.25 );
object.rotation.y = Math.PI;
object.traverse( function( child ) {
if ( child instanceof THREE.Mesh ) {
child.castShadow = true;
if ( child.material !== undefined ) child.material.side = THREE.DoubleSide;
}
});
companion = object;
scene.add( object );
});
});
You can use the following pattern:
var parent = new THREE.Group();
scene.add( parent );
In your load code replace
// companion = object;
// scene.add( object )
// with
parent.add( object ); // will add the object to the parent but also to the scene
then in your animate() function you can do something like:
parent.position.x = ....

THREE.js OBJLoader not working properly

I have this file, I can display it in Blender, Cinema4D and Photoshop, but canĀ“t import it successfully with Three.js OBJLoader.
https://drive.google.com/file/d/0B8Hv0HwLV830VDZqVVlseFhEMkk/view?usp=sharing
I see the loaded model in black, but with the right geometry.
My scene is ok, with lights and other elements correctly displayed. The Browser's console shows the images loaded, and the materials created.
This is the code I use to load the model:
var mtlfile = filename.split('/').pop().replace('.obj', '.mtl');
var objfile = filename.split('/').pop();
var mtlLoader = new THREE.MTLLoader();
mtlLoader.setPath( path );
mtlLoader.load( mtlfile, function( materials ) {
materials.preload();
console.log( materials );
var objLoader = new THREE.OBJLoader();
objLoader.setMaterials( materials );
objLoader.setPath( path );
objLoader.load( objfile, function ( object ) {
handleMesh(object);
}, onProgress, onError );
});

Three.js: loader.setPath is undefined

Hello developers and geniuses,
I am trying to simply import an obj-model to my three.js scene with WebGLrenderer.
I tried a lot of different tutorials but nothing worked for me. I always get the following error:
TypeError: loader.setPath is not a function. loader.setPath is undefined. The module that's getting the error is MTLLoader.js.
I implemented the js-File in my html head and of course I also did with three.min.js and OBJLoader.js.
I just don't know what to do. Can anyone help me and have a look at the specific code-piece?
var mesh2 = null;
var mtlLoader = new THREE.MTLLoader(); mtlLoader.setBaseUrl(
"myurlpath" ); mtlLoader.setPath(
"myurlpath" ); mtlLoader.load(
'WaltHead.mtl', function( materials ) {
materials.preload();
var objLoader = new THREE.OBJLoader(); objLoader.setMaterials(
materials ); objLoader.setPath("myurlpath" ); objLoader.load(
'WaltHead.obj', function ( object ) {
mesh2 = object;
mesh2.position.y = -50;
scene.add( mesh2 );
} );
} );
Thanks for any help :-)

How can i set materials to collada child in THREE.js

i created a scene in blender it contains some meshs with out materials then i exported it to collada, i load it to three.js scene with colladaloader everything is ok but when i put some materials to children using the following code :
loader.load( "../models/islands/"+islandselected.getAttribute("data-model")+".dae", function(object){
scene.remove("island");
plane=object.scene;
plane.name=islandselected.innerHTML;
plane.traverse(function(child){
if(child.children[0]){
if(child.children[0].geometry){
console.log(child)
var t = new THREE.ImageUtils.loadTexture( '../models/islands/'+child.name+'.jpg' );
t.wrapS = t.wrapT = THREE.RepeatWrapping;
t.repeat.set( 50, 50 );
var ma= new THREE.MeshBasicMaterial( {map:t} );
child.children[0].material=ma
}
}
});
plane.scale.set(100,100,100);
scene.add(plane);
});
i get errors in console :
[.WebGLRenderingContext]GL ERROR :GL_INVALID_OPERATION : glDrawElements: attempt to access out of range vertices in attribute 1
empcreator.jsp:1 WebGL: too many errors, no more errors will be reported to the console for this context.
var model,mat;
var loader = new THREE.ColladaLoader();
var lastTimestamp = 0;
var progress = 0;
loader.load( 'obj/mymodel.dae', function ( collada ) {
model = collada.scene;
model.children[3].children[0].material = new THREE.MeshPhongMaterial({map:THREE.ImageUtils.loadTexture('obj/images/myimage.jpg')});
console.log(model.material);
model.scale.x = model.scale.y = model.scale.z = 0.10;
model.rotation.y = 0.80;
scene.add( model );
}
//you will need to modify a little to work it, i took it from my old project

threejs wireframe not working with OBJMTLLoader

am loading my object in threejs using OBJMTLLoader, the wireframe control is working alone for OBJLoader, but for the OBJMTLLoader it doesn't working
var loader = new THREE.OBJMTLLoader();
loader.load( 'obj/male02/male02.obj', 'obj/male02/male02_dds.mtl', function ( object ) {
object.children[0].geometry.computeFaceNormals();
var geometry = object.children[0].geometry;
console.log(geometry);
THREE.GeometryUtils.center(geometry);
geometry.dynamic = true;
var material = new THREE.MeshLambertMaterial({color: 0xffffff, shading: THREE.FlatShading, vertexColors: THREE.VertexColors });
mesh = new THREE.Mesh(geometry, material);
scene.add( mesh );
} );
function wireframe(){
//alert('hhhhhh');
mesh.material.wireframe = true;
mesh.material.color = new THREE.Color( 0x6893DE );
}
but it causing the following error, so my model is not showing on the viewer,
so here i want to know that we can create wireframe on any kind of 3d models??
object.children[0].geometry is undefined
Even though the OBJMTLLoader returns a THREE.Object3D object which does have .children, you should not assume that the .children is of type THREE.Mesh. So you should actually traverse() the THREE.Object3D in order to find the THREE.Mesh.
object.traverse( function ( child ) {
if ( child instanceof THREE.Mesh )
// do something with the geometry
} );

Resources