Hi Guys! I’m new at Three.js. I hope you can help me.
So I’m trying to import object FBX and sad to say the texture and animation are not found, only the Object itself.
I’m using the latest version of Blender 2.80 to create my object. I’m not sure if the problem is when I export. Or do you guys know how to export an object from the blender with texture and animation?
Here’s my code:
var loader = new THREE.FBXLoader();
loader.load( 'models/neonglobe/LaserBeam.fbx', function ( object ) {
mixer = new THREE.AnimationMixer( object );
var action = mixer.clipAction( object.animations[ 0 ] );
action.play();
object.traverse( function ( child ) {
if ( child.isMesh ) {
child.castShadow = false;
child.receiveShadow = false;
}
} );
// var light = new THREE.PointLight( 0xff0000, 1, 100 );
// light.position.set( 50, 50, 50 );
// scene.add( light );
test_object = object;
//object.position.set(100, 0, 1000);
// object.rotation.set(-15, 0, Math.PI/5);
// scene.add( object );
}, undefined, function ( e ) {
console.error( e );
} );
Your help is much appreciated! Thank you so much!
Hi ! The recommended workflow is to export GLTF from Blender. You can export animations, and materials with textures. It’s brand new so the exporter of version 2.8 is quite buggy… But they made a lot of improvements that will be available in Blender 2.81. Actually you can download Blender 2.81 beta now and enjoy the fixes and improvements now, that’s what I did.
3 Likes
Hi Felix 
The Blender 2.81 is not available for now it said “LANDING NOVEMBER 2019”. So it’s better to use GLTF than FBX? Thank you so much for your reply I really appreciate it.
I’ve also tried importing GLTF. It has object and texture but the animation is not found.
Here’s my code in importing GLTF:
// Instantiate a loader
var loader = new THREE.GLTFLoader();
// Load a glTF resource
loader.load(
// resource URL
'models/neonglobe/Parrot.glb',
// called when the resource is loaded
function ( gltf ) {
scene.add( gltf.scene );
},
// called while loading is progressing
function ( xhr ) {
console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
},
// called when loading has errors
function ( error ) {
console.log( 'An error happened' );
}
);
and here the output: I got the object from Three.js Sample.
You can download Blender 2.81 beta here, I assure you it’s better to use that than 2.80 for exporting GLTF.
As for your code, I see that you only add the model to the scene without initiating the animation system. This is not done automatically, so try to add this in your onLoad function :
// Add a visual helper for the skeleton of your skinned model
let skeleton = new THREE.SkeletonHelper( object );
scene.add( skeleton );
// Initiate the animation system and start the first animation of your model
let animations = gltf.animations;
mixer = new THREE.AnimationMixer( object );
let action = mixer.clipAction( animations[ 0 ] );
action.play();
Then in your loop function, you must add this :
mixer.update( deltaSeconds );
Where deltaSeconds is the seconds elapsed since last frame, that you can get by instantiating a THREE.Clock and calling clock.getDelta() at each frame.
There is a documentation page dedicated to the animation system, and I urge you to look at the examples code to see working example in action.
In general, when you are not sure wether your issue comes from your model or your code, you can load your model into this GLTF viewer, which works with Three.js. If your model works properly in this viewer and you can play the animation(s), then the issue comes from your code, otherwise it comes from your model.
3 Likes
I already put SkeletonHelper and the mixer.update( deltaSeconds ); on my function animate.But still no animation 
Here my code:
var loader = new THREE.GLTFLoader();
// Load a glTF resource
loader.load(
// resource URL
‘models/neonglobe/Parrot.glb’,
// called when the resource is loaded
function ( gltf ) {
model = gltf.scene;
scene.add( model );
model.scale.set( 2, 2, 2);
model.traverse( function ( object ) {
if ( object.isMesh ) object.castShadow = true;
} );
helper = new THREE.SkeletonHelper( model );
helper.material.linewidth = 5;
helper.visible = true;
scene.add(helper);
},
// called while loading is progressing
function ( xhr ) {
console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
},
// called when loading has errors
function ( error ) {
console.log( 'An error happened' );
}
);
and here’s my code where I put my mixer.update( deltaSeconds ); and already instantiate the THREE.Clock.
I already download the Blender 2.81. Thank you so much.
What is important to play the animations is not the skeleton helper (which is totally optional, a visual helper), it is this part :
// Initiate the animation system and start the first animation of your model
let animations = gltf.animations;
mixer = new THREE.AnimationMixer( object );
let action = mixer.clipAction( animations[ 0 ] );
action.play();
As I told you, you must put it in the onLoad function, next to where you put the skeleton helper code.
1 Like
Oh I see sorry about that. Yup I already put it and then when try to run the object is not shown.
Well if the code that you show is not the code that you use, how do you think we can help debugging ?
The code that I show is the code that I’m using right now. I just change a little in the loader part tho, but still the same.
Please show a live example demonstrating your issue.
1 Like
oh wait, I got it! hahaha Thank you for your help felix
1 Like
