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 :-)
Related
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
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 = ....
I am pretty new to THREE, and I am trying to include a obj model witl mtl in my framework - I installed three-obj-loader by typing the following:
npm install --save three-obj-loader
I can then load a model, like this:
import * as THREE from 'three'
import * as objlibrary from 'three-obj-loader'
let OBJLoader = objlibrary(THREE)
let scene = new THREE.Scene();
let camera = new THREE.PerspectiveCamera(75, window.innerWidth /
window.innerHeight, 0.1, 50000);
let renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0xB1B1B1, 0);
renderer.domElement.id = 'view3d'
document.body.appendChild(renderer.domElement);
//load obj-model
var loader = new THREE.OBJLoader();
loader.load("http://blabla/object.obj" , function ( object ) {
var material = new THREE.MeshLambertMaterial( { color: 0x006400 } );
object.traverse( function ( child ) {
if ( child instanceof THREE.Mesh ) {
child.material = material;
}
} );
object.scale.x = 0.01;
object.scale.y = 0.01;
object.scale.z = 0.01;
scene.add( object );
} );
But I wish to include the objects mtl-file. I install three-mtl-loader by again using npm install, and include the following to the code:
import * as mtllibrary from 'three-mtl-loader'
let MTLLoader = mtllibrary(THREE)
And I then tried using code similar to this: https://github.com/mrdoob/three.js/blob/master/examples/webgl_loader_obj_mtl.html :
var mtlLoader = new THREE.MTLLoader();
mtlLoader.load("http://blabla/object.obj.mtl", function(materials) {
materials.preload();
var objLoader = new THREE.OBJLoader();
objLoader.setMaterials(materials);
objLoader.load("http://blabla/object.obj", function(object) {
object.scale.x = 0.01;
object.scale.y = 0.01;
object.scale.z = 0.01;
scene.add(object);
});
});
But the following error is then thrown : 'Uncaught TypeError: THREE.MTLLoader is not a constructor', which I don't quite understand when the same doesn't happen with the three-obj-loader. (I also tried installing the objmtllloader, which results in the same error) - Any help is very appreciated :)
Edit:
As mentioned in the comments it seems that the three-mtl-loader doesn't take THREE as a input as in the three-obj-loader. I figured that maybe you could just change that (I don't know if I did it properly), which I tried as seen here:
https://www.dropbox.com/s/gbefq8x7roqwhww/index.js?dl=0
Now there are no errors, but the object simply doesn't show at all.
Actually changing the mtl-loader to: https://www.dropbox.com/s/gbefq8x7roqwhww/index.js?dl=0 , did fix the problem :D
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 );
});
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
} );