I have two separate models in which the first model's material gets loaded with the material of the second. Below I'm loading two separate models and material files with OBJLoader and MTLLoader:
MTLLoader.setPath( 'models/' );
var url = "model.mtl";
MTLLoader.load( url, function one( materials ) {
materials.preload();
OBJLoader.setMaterials( materials );
OBJLoader.setPath( 'models/' );
OBJLoader.load( 'model.obj', function ( object ) {
scene.add( object );
});
});
MTLLoader.setPath( 'models2/' );
var url2 = "model2.mtl";
MTLLoader.load( url2, function two( materials2 ) {
materials2.preload();
OBJLoader.setMaterials( materials2 );
OBJLoader.setPath( 'models2/' );
OBJLoader.load( 'model2.obj', function ( object ) {
scene.add( object );
});
});
I'm not specifying texture paths because the .mtl files links has the paths already. I know I'm doing this incorrectly but I can't find any solution for this anywhere. Why doesn't my first model get applied the correct material? I just want to correctly apply the respective material to its model.
Related
I'm trying to add an image texture to an loaded .OBJ
now it looks like that
https://cuplate.com/ttt.php
I use MeshBasicMaterial to load my image as a texture. I used that for different geometry on ThreeJS
OBJ loader is like this
var loader = new THREE.OBJLoader();
loader.load( './test1.obj',function ( object ) {
object.traverse( function ( node ) {
if ( node.isMesh) {
node.material = materialOuter;
}
});
scene.add( object );
});
the image doesnt show....
How should I place my image on the front side of this plate?
I created 1 small object file in the blender tool and then exported it to wavefront (.obj) format.
My code:
var mtlLoader = new THREE.MTLLoader();
mtlLoader.setPath( 'objs/' );
mtlLoader.load( 'final_blue_cup.mtl', function( materials ) {
materials.preload();
var objLoader = new THREE.OBJLoader();
objLoader.setMaterials( materials );
objLoader.setPath( 'objs/' );
objLoader.load( 'final_blue_cup.obj', function ( object ) {
scene.add( object );
}, onProgress, onError );
});
This is my output from my blender tool:
This is what is get after load in three.js:
With this link you can find my object, material and blender file: https://drive.google.com/drive/folders/1XW_teF6N3qqmqavsQrPpLZntJoMvqL0K
Can anyone help me in fixing it?
I'm using fbxloader of three.js to add model to my scene, and i've seen that the lastest version of fbxloader.js (https://github.com/mrdoob/three.js/blob/master/examples/js/loaders/FBXLoader.js) can read the camera data of .fbx file.
But how to add this camera to my scene?
Here is my current code which can only get the original model.
var loader = new THREE.FBXLoader( manager );
loader.load( 'url', function( object ) {
scene.add( object );
}, onProgress, onError );
You can do something like:
var loader = new THREE.FBXLoader( manager );
loader.load( 'url', function( object ) {
object.traverse( function( child ) {
if ( child instanceof THREE.Camera ) {
scene.add( child );
}
} );
scene.add( object );
}, onProgress, onError );
but you should now that the camera is already included in the scene.
I am wanting a method to get the loading progress of .obj and .mtl file in three.js.
In previous version (as r53) I do that with:
loader = new THREE.OBJMTLLoader();
loader.addEventListener('progress', function ( item ){
console.log( item.loaded, item.total, item );
});
but now, using version r67 I can´t do that whith this code.
I try with:
var loader = new THREE.OBJMTLLoader();
loader.load( 'obj/inicial/modelo.obj', 'obj/inicial/modelo.mtl', function(object){
scene.add( object );
}, function(item){
console.log(item);
});
but it doesn´t works.
I searched google but have not found anything about. Can someone help me?
Thans in advance.
Both LoadingManager and onProgress callbacks should/will be available in dev and in master soon, hopefully.
For onProgress, onError in OBJMTLLoader
https://github.com/mrdoob/three.js/pull/5423
For LoadingManager support
https://github.com/mrdoob/three.js/pull/5463
The OBJMTLLoader class is deprecated, instead the latest three.js (r78) uses MTLLoader plus OBJLoader, codes are something like below:
var onProgress = function ( xhr ) {
if ( xhr.lengthComputable ) {
var percentComplete = xhr.loaded / xhr.total * 100;
console.log( Math.round(percentComplete, 2) + '% downloaded' );
}
};
var onError = function ( xhr ) { };
THREE.Loader.Handlers.add( /\.dds$/i, new THREE.DDSLoader() );
var mtlLoader = new THREE.MTLLoader();
mtlLoader.setPath( 'obj/male02/' );
mtlLoader.load( 'male02_dds.mtl', function( materials ) {
materials.preload();
var objLoader = new THREE.OBJLoader();
objLoader.setMaterials( materials );
objLoader.setPath( 'obj/male02/' );
objLoader.load( 'male02.obj', function ( object ) {
object.position.y = - 95;
scene.add( object );
}, onProgress, onError );
});
I am loading a STL exported from Rhino. All works ok, however, when I try and apply a simple texture to the mesh, the STL objects are not rendered at all.
What am I missing
Code is as follows:
var diamondTexture = THREE.ImageUtils.loadTexture('images/diamond.jpg');
...
var loader = new THREE.STLLoader();
loader.addEventListener( 'load', function ( event ) {
var geometry = event.content;
stones = new THREE.Mesh( geometry, new THREE.MeshPhongMaterial({color:0x99CC3B, ambient:0x99CC3B, map:diamondTexture}) );
scene.add( stones );
} );
loader.load( 'models/jwl0020-stones.stl' );
You could try geometry.computeTangents(). Once I added that my stl files were able to have a texture though... the texture does not not properly "fit" the model since there are no UVs.