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 = ....
Related
I'm trying to use the THREE.JS InstancedMesh to make copies of an imported gltf file, but nothing shows up in the scene. This is the code I've used so far:
const equatorMaterial = new THREE.MeshStandardMaterial({color: 0x242526, metalness:1,
opacity:0.8, roughness:0.8} )
let ball;
const loader = new GLTFLoader()
loader.load( './ball.gltf', function ( gltf ) { //load sphere
gltf.scene.traverse(function(model) {
if (model.isMesh) {
//model.castShadow = true;
ball = model.geometry
}
});
let mesh = new THREE.InstancedMesh(ball, equatorMaterial, 20)
scene.add( mesh )
}, undefined, function ( error ) {
console.error( error );
} );
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
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 :-)
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
} );
var loader = new THREE.OBJMTLLoader();
loader.addEventListener( 'load', function ( event ) {
var object = event.content;
object.position.z = -700;
scene.add( object );
});
loader.load( 'obj/male02/male02.obj', 'obj/male02/male02.mtl' );
how to remove the object?
You just scene.remove (object);