i want to get the wireframe of an object that is loaded from OBJMTLLoder ,so here i have the code as like below
var loader = new THREE.OBJMTLLoader();
loader.load( 'obj/male02/male02.obj', 'obj/male02/male02_dds.mtl', function ( object ) {
object.traverse( function ( child ) {
if ( child instanceof THREE.Mesh )
{
child.geometry.computeFaceNormals();
var geometry = child.geometry;
console.log(geometry);
geometry.dynamic = true;
material = new THREE.MeshLambertMaterial();
mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
var useWireFrame = true;
if (useWireFrame) {
mesh.traverse(function (child) {
if (child instanceof THREE.Mesh) child.material.wireframe = true;
});
}
}
object.position.y = - 80;
scene.add( object );
});
} );
this is working well, and i can see the wireframe on my object, unfortunately here my object material is changed into MeshLambertMaterial. but i want to get the wireframe of the object with the default material of the object loaded, i can use variety of Material as in the threejs document, but none of them give me a result with the default object material
i got fixed it by add child.material for material , so here is the answer
loader.load( 'obj/male02/male02.obj', 'obj/male02/male02_dds.mtl', function ( object ) {
object.traverse( function ( child ) {
if ( child instanceof THREE.Mesh )
{
//child.geometry.computeFaceNormals();
var geometry = child.geometry;
//console.log(geometry);
//geometry.dynamic = true;
material = child.material;
mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
var useWireFrame = true;
if (useWireFrame) {
mesh.traverse(function (child) {
if (child instanceof THREE.Mesh)
{
child.material.wireframe = true;
child.material.color = new THREE.Color( 0x6893DE );
}
});
}
}
object.position.y = - 80;
//scene.add( object );
});
here i added material = child.material; as like geometry = child.geometry; and it worked fine
Related
What I want
I am quite new to Three.js and I am trying to apply a texture to a loaded object.
The problem
I have tried quite a few things and still not sure how to do this. I don't get any errors and the object loads in but with no texture.
My code
var loader6 = new THREE.OBJLoader();
// load a resource
loader6.load(
// resource URL
'models/Chair.obj',
// called when resource is loaded
function ( object ) {
object.scale.x = 20;
object.scale.y = 30;
object.scale.z = 20;
object.rotation.y = -0.3;
object.position.z = -500;
object.position.x = 30;
object.traverse( function ( child ) {
if ( child instanceof THREE.Mesh ) {
console.log(texture);
child.material.map = texture;
}
});
var texture = new THREE.TextureLoader().load('models/Chair.mtl');
object6 = object;
scene.add( object6 );
},
Any help?
You can not load .mtl file using TextureLoader, you have to use MTLLoader for that. MTLLoader should load the texture. Then you have to set the material to OBJLoader using 'setMaterial' function.
Checkout this code -
new THREE.MTLLoader()
.setPath( 'path to the material folder' )
.load( 'material_file.mtl', function ( materials ) {
materials.preload();
new THREE.OBJLoader()
.setMaterials( materials )
.setPath( 'path to the obj folder' )
.load( 'objModel.obj', function ( object ) {
object.position.y = - 95;
scene.add( object );
}, onProgress, onError );
} );
I can able to visible object but don't work multiple material textures images. It's visible black color. what is missing in my code?
case 'plant':
var mtlLoader = new THREE.MTLLoader();
mtlLoader.setPath('models/LivingRoom/Sample1/');
mtlLoader.load( '3dbts103601T.mtl', function( materials ) {
materials.preload();
var loader = new THREE.OBJLoader();
loader.setPath('models/LivingRoom/Sample1/');
loader.load('3dbts103601T.obj', function (object) {
var geometry = object.children[ 0 ].geometry;
var materials = [];
var mat1=new THREE.MeshBasicMaterial( { map : THREE.ImageUtils.loadTexture('models/LivingRoom/Sample1/3dbts103601T1.jpg')});
var mat2=new THREE.MeshBasicMaterial({ map : THREE.ImageUtils.loadTexture('models/LivingRoom/Sample1/3dbts103601T2.jpg')});
materials.push(mat1);
materials.push(mat2);
Mesh = THREE.SceneUtils.createMultiMaterialObject(geometry,materials);
object.traverse(function (child) {
if (child instanceof THREE.Mesh) {
child.materials = materials;
}
});
scene1.add(object);
});
});
break;
I tried to use different textures in export loader obj file.
I am able to make my object visible on the scene but I couldn't set either its size nor its shape.
Any idea on what is wrong/is missing in my code ?
var loader = new THREE.OBJLoader();
loader.load(
'models/Sofa/sofa.obj',
function (object) {
var geometry = object.children[ 0 ].geometry;
var materials = [];
materials.push(new THREE.MeshBasicMaterial( { map : THREE.ImageUtils.loadTexture( 'models/Sofa/Texturses/1.jpg')}));
materials.push(new THREE.MeshBasicMaterial( { map : THREE.ImageUtils.loadTexture( 'models/Sofa/Texturses/paradis_beige.jpg')}));
materials.push(new THREE.MeshBasicMaterial( { map : THREE.ImageUtils.loadTexture( 'models/Sofa/Texturses/2.jpg')}));
mesh = THREE.SceneUtils.createMultiMaterialObject(geometry, materials);
object.traverse(function (child) {
if (child instanceof THREE.Mesh) {
child.material = material;
}
});
scene1.add(mesh);
},
function ( xhr ) {
returnValue = ( xhr.loaded / xhr.total * 100 ) + '% loaded';
console.log(returnValue);
},
function ( error ) {
console.log( 'An error happened' );
}
);
attempting to apply a bump map to an object loaded, but no change is seen on the material
var loader = new THREE.ObjectLoader();
loader.load("../js/brain2.json", function(object) {
var mapHeight = new THREE.TextureLoader().load( "../js/texture.jpg" );
var material = new THREE.MeshPhongMaterial( { color: 0x888888, specular: 0xEEEEEE, shininess: 5} );
object.traverse( function ( child ) {
if ( child instanceof THREE.Mesh ) {
child.material = material;
child.material.bumpMap = mapHeight;
child.material.bumpScale = 1;
var geometry = new THREE.Geometry().fromBufferGeometry( child.geometry );
geometry.computeFaceNormals();
geometry.mergeVertices();
geometry.computeVertexNormals();
child.geometry = new THREE.BufferGeometry().fromGeometry( geometry );
var modifier = new THREE.BufferSubdivisionModifier(1);
modifier.modify(geometry);
child.material.overdraw = 1
};
});
object.scale.set(15, 15, 15);
object.position.x = 1;
object.position.y = 1;
object.position.z = 1;
object.rotation.set( 5, 1, 1 );
scene.add( object );
});
I've already fixed earlier issues with this code, including applying a subdivision modifier to it, but now it appears the bump map refuses to be applied.
I have been working on ThreeJS for a while, i tried to load a house model using OBJ + MTL loader, now i need to apply glass shaders for window materials
i managed to load the model successfully by
var mtlLoader = new THREE.MTLLoader();
mtlLoader.setBaseUrl( 'new/' );
mtlLoader.setPath( 'new/' );
mtlLoader.load( 'House.mtl', function( materials ) {
materials.preload();
var objLoader = new THREE.OBJLoader();
objLoader.setMaterials( materials );
objLoader.setPath( 'new/' );
objLoader.load( 'House.obj', function ( object ) {
object.position.y = - 5;
object.scale.x=object.scale.y=object.scale.z=0.05
object.castShadow = true;
object.receiveShadow = true;
object.traverse( function( node ) { if ( node instanceof THREE.Mesh ) { node.castShadow = true;
node.receiveShadow = true; } } );
mesh = object;
scene.add( mesh );
});
});
Now i would like to add glass shaders for house windows in this model, in which way should i code, how can i take the reference from loaded house to make a shader ?
Any other way to code glass shader ?