var loader = new THREE.OBJLoader();
loader.load(
'/Models/mi.obj',function (object) {
scene.add(object);
}
);
error message
three.min.js:639 GET http://localhost:55127/Models/mi.obj 404 (Not Found)
current situation
The obj file and the main page are separated by folders.
Related
I'm trying to apply MeshStandardMaterial to a mesh of a GLTF imported model. The GLTF model for testing is a simple cube exported from Blender.
After succesfully load the GLTF model I did:
this.material = new THREE.MeshStandardMaterial({
map: this.texture,
})
this.cubePost2Model = this.resources.items.cubePost2.scene
this.cubePost2Model.traverse((child) =>
{
if(child instanceof THREE.Mesh)
{
child.castShadow = true
child.material = this.material // This line throw the error
console.log(child) // Returns succesfully one mesh
}
})
this.scene.add(this.cubePost2Model)
In the previous code, this line: child.material = this.material throw an error in the console:
Uncaught TypeError: Cannot read properties of undefined (reading 'visible')
When an error happens at that point in projectObject(), it means you are assigning undefined to child.material. So it seems this.material does not point to the intended material object.
I am trying to animate my 3d model, which is a gltf model. I am trying it and getting but not sure what could have been wrong in code.
// Load a glTF resource
loader.load(
// resource URL
"human-small-with-uniform-and-lighting-all.gltf",
// called when the resource is loaded
function(gltf) {
console.log(gltf.animations[0]);
mixer = new THREE.AnimationMixer(gltf.scene);
action = mixer.clipAction(gltf.animations[0]);
action.play();
scene.add(gltf.scene);
},
function(xhr) {
console.log((xhr.loaded / xhr.total) * 100 + "% loaded");
},
function(error) {
console.log("An error happened");
}
);
This is json structure of gltf.animations, right side of image
this.loadMyModel = function(){
const loader2 = new THREE.GLTFLoader();
// Load a glTF resource
loader2.load(
// resource URL
'Duck.gltf',
// called when the resource is loaded
function ( gltf ) {
//alert('success');
this.scene.add( gltf.scene );
})
};
The js files have been included.
I got an error, but I don't know why:
TypeError:undefined is not an object (evaluating 'this,scene.add')
Inside of your callback function, this is not the same as outside of the function. For more information on how this works in JS, I'd suggest this article: http://www.digital-web.com/articles/scope_in_javascript/
To fix the issue, you should save a reference to the scene outside the callback:
var scene = this.scene;
this.loadMyModel = function () {
// ...
loader.load( 'foo.glb', function ( gltf ) {
scene.add( gltf.scene );
} );
}
Alternatively, using newer JS features like arrow functions will also get around this problem.
with the loader bellow the obj and mtl files are loaded, so how can I access the material and make it doublesided?
If I use mtlLoader.setMaterialOptions({side: THREE.DoubleSide}) as in the following threejs.org documentation page, it doesn't work -and I'm not getting any hinting from VScode about the .setMaterialOptions either.
https://threejs.org/docs/#examples/loaders/MTLLoader
Here's the main part of the obj+mtl loader:
var mtlLoader = new THREE.MTLLoader();
mtlLoader.setPath( 'female02/' );
//mtlloader.setMaterialOptions(side:THREE.DoubleSide)
mtlLoader.load( 'female02.mtl', function( materials ) {
materials.preload();
var objLoader = new THREE.OBJLoader();
objLoader.setMaterials( materials );
objLoader.setPath( 'female02/' );
objLoader.load( 'female02.obj', function ( object ) {
object.position.set( 0, -95, 0 );
sceneRTT.add( object );
}, onProgress, onError );
});
[and I can't add the main keyword "doublesided" because I lack... reputation]
In MTLLoader.setMaterialOptions( options ), the options argument is an object, so you must pass it as such.
loader.setMaterialOptions( { side: THREE.DoubleSide } );
three.js r.89
Does anybody knows how can i acess a object outside a OBJMTLLoader
var loader = new THREE.OBJMTLLoader();
loader.load( obj, mtl, function ( object ) {
object.position.set(0,0,0);
scene.add( object );
});
console.log(object);
inside of the function objects = THREE.Object3D but outside is equal do ObjectLoad.
Thanks for everybody.
The object is simply inside the scope of the undefined function.
Set the function to return the object
var loader = new THREE.OBJMTLLoader();
loader.load( obj, mtl, function ( object ) {
object.position.set(0,0,0);
return object;//here
});
scene.add( object );
console.log(object);