I have a code with character animation in gltf but when i put fbx character the character is revealed but without animation

abdallah_hosny · July 28, 2023, 8:55pm

const assetLoader = new FBXLoader();
let mixer;
assetLoader.load(monkeyUrl.href, function(object) {
	
    const model = object.scene;
    scene.add(model);
    mixer = new THREE.AnimationMixer(model);
    const clips = object.animations;
	scene.add( object );
	object.rotation.set (4.7,0,0)
	object.scale.set(.01, .01, .01)

    // Play all animations at the same time
    clips.forEach(function(clip) {
        const action = mixer.clipAction(clip);
        action.play();
    });
}, undefined, function(error) {
    console.error(error);
});


// the animations
const clock = new THREE.Clock();
function animate() {
    if(mixer)
        mixer.update(clock.getDelta());		
    renderer.render(scene, camera);
}
renderer.setAnimationLoop(animate);

mjurczyk · July 29, 2023, 4:32am

That’s just a copy-pasted, unformatted code - without any context, explanation, or even question appended to it. If one expects people to put effort into helping them, it’d be polite to put at least an equal effort into stating a problem and a question?

The code seems to include animations / mixer - so if there’s a specific part blocking you, please be a little more explicit about the part that’s blocking you.

abdallah_hosny · July 29, 2023, 4:49am

um srry for that bro but um frustraited cuz no one helps but i want to make my character do the animation the animation works in gltf viewer but not in my code

PavelBoytchev · July 29, 2023, 5:45am

Are you sure the property is called animation? Please, inspect the structure of the GLTF model after loading. Check whether the animation is stored in gltf.animation or in gltf.animations.

Also, when posting such problems:

The best would be to make an online editable example (in CodePen, CodeSandbox, JSFiddle), so that people can debug and explore the code – this maximizes the changes to get help.
If this is not possible, at least format the code – this may not solve the problem, but will allow more people to read the code

abdallah_hosny · July 30, 2023, 4:25am

it worked but with another method but how about if i want to add a dat gui slider and choose many animations with the slider how do i do it

Harold · July 30, 2023, 9:22am

Learn how to walk before you start to run. Don’t expect others to do the running for you.

abdallah_hosny · July 30, 2023, 10:35am

will um just asking and um still learning is there any problem with asking? i searched alot but i got nothin

prisoner849 · July 30, 2023, 1:03pm

@abdallah_hosny I would follow this advice.

PavelBoytchev · July 30, 2023, 1:20pm

I’m not sure how and where did you search. There is an official example in Three.js, which uses a GLTF model with several animations, they can be activated via GUI panel. This example has something like this to get access to three of the animations and to control them:

const animations = gltf.animations;

mixer = new THREE.AnimationMixer( model );

idleAction = mixer.clipAction( animations[ 0 ] );
walkAction = mixer.clipAction( animations[ 3 ] );
runAction = mixer.clipAction( animations[ 1 ] );

Here is the example:

https://threejs.org/examples/#webgl_animation_skinning_blending

You may also look at another official example:

https://threejs.org/examples/#webgl_animation_skinning_additive_blending

Anyway, good luck with your project.

Edit: I see that you have changed the initial question and the initial source code. My reply above is related to the original code that was about GLTF animations. For FBX animations see yet another official example, called “WebGL Loader FBX”.

abdallah_hosny · July 30, 2023, 1:32pm

yeah i saw this code but when i put a character i dont know wether i import it with animation in blender or i make a character and import animations seperatly because in this code i of the robot guy i dont see him importing animation files into animation code

Fennec · July 31, 2023, 1:23am

While I understand your frustration, you need to understand that it’s part of the process, ThreeJS can be difficult and not for the faint of heart and the people trying to help you here recognize that too, even the once criticizing the way you’re presenting your problem. You need to work on the way you ask for help and don’t take it for granted, remember to stay humble and appreciative, and don’t reply with “Yeah I know” and “Yeah I saw that”, if you know and saw, than why you’re asking in the first place, a simple “thank you” or “I appreciate the help” can make a world difference.

I’ve found two step-by-step tutorials that might be beneficial. the first is about “How To Export 3D Models With Their Animation From Blender And Import Them Into Your Three.js App” and the second “Loading Models (using Three.js) - Both Static and Animated!”. Take your time, be patient, try and try again and if you get stuck, you are welcome to post again, with the specific point you are struggling with.

Best of luck.

abdallah_hosny · July 31, 2023, 6:20pm

ok thanks brother i appretiate your help yall

abdallah_hosny · July 31, 2023, 6:51pm

thanks for helping me bro i solved my issue after a week of searching i dont know if that is regular thing or i am just slow in learning this library specificly but here what worked with me, in gltf only the animation is working but in fbx it doesnt ill keep searching in how to activate it but anyways here is my code




import * as THREE from 'three';
import { GUI } from 'dat.gui'
import { Mesh, AnimationMixer } from 'three';
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls.js';
import {GLTFLoader} from 'three/examples/jsm/loaders/GLTFLoader.js';
import { FBXLoader } from 'three/addons/loaders/FBXLoader.js';
import * as dat from 'dat.gui';
import { ShadowMapViewer } from 'three/addons/utils/ShadowMapViewer.js';


const monkeyUrl = new URL('/house/plaane.glb', import.meta.url);

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera(45,
window.innerWidth / window.innerHeight,
    0.1,
    1000
);
//world color
renderer.setClearColor(0xA3A3A3);
renderer.shadowMap.enabled = true;
const orbit = new OrbitControls(camera, renderer.domElement);

// light

const ambientlight =new THREE.AmbientLight(0xffffff,0.5)
scene.add(ambientlight)

const directionalLight = new THREE.DirectionalLight(0xffffff, 0.4);
directionalLight.position.set(50, 70, 20);
directionalLight.castShadow = true ;
scene.add(directionalLight);


//Hemisphere
// var light = new THREE.HemisphereLight(0xf6e86d, 0x404040, 1);
// scene.add(light);




// const spotLight = new THREE.SpotLight(0xFFFFFF);
// scene.add(spotLight);
// spotLight.position.set(-100, 100, 0);
// spotLight.castShadow = true;
// spotLight.intensity =1.2;
// spotLight.angle = 0.2;
// spotLight.penumbra =0.3

// spotLight.shadow.mapSize.width = 1024;
// spotLight.shadow.mapSize.height = 1024 ;
// spotLight.shadow.camera.near = 5;
// spotLight.shadow.camera.far = 10;
// spotLight.shadow.focus = 1 ;

// const sLightHelper = new THREE.SpotLightHelper(spotLight);
// scene.add(sLightHelper);

// const planeGeo = new THREE.PlaneGeometry(100, 100);

// const planeMat= new THREE.MeshPhongMaterial({
//     color: 0xFFFFFF,
//     side: THREE.DoubleSide ,
//     dithering:true
// });
// const plane = new THREE.Mesh(planeGeo, planeMat);
// scene.add(plane);
// plane.rotation.x = -0.5 * Math.PI;
// plane.receiveShadow = true;

// gui

const gui =new dat.GUI();


// camera

camera.position.set(10, 10, 10);
orbit.update();
// grid

const grid = new THREE.GridHelper(30, 30);
scene.add(grid);


//loaders

const assetLoader = new GLTFLoader();
// const assetLoader = new FBXLoader();
let mixer;
assetLoader.load(monkeyUrl.href, function(object) {
	
    const model = object.scene;
    scene.add(model);
    mixer = new THREE.AnimationMixer(model);
    const clips = object.animations;
    model.position.set(1,3,1);

    // model.castShadow = true ;
    // model.traverse(function(node) {
    //     if(node.isMesh)
    //     node.castShadow = true ;
    // });
    //in fbx use these below

	// scene.add( object );
	// object.rotation.set (4.7,0,0)
	// object.scale.set(1,1,1 )
;
    // Play a certain animation
    // const clip = THREE.AnimationClip.findByName(clips, 'HeadAction');
    // const action = mixer.clipAction(clip);
    // action.play();

    // Play all animations at the same time
    clips.forEach(function(clip) {
        const action = mixer.clipAction(clip);
        action.play();
    });
	
}, undefined, function(error) {
    console.error(error);
});

//animation

const clock = new THREE.Clock();
function animate() {
    if(mixer)
        mixer.update(clock.getDelta());
		
    renderer.render(scene, camera);
}

renderer.setAnimationLoop(animate);

//window resize

window.addEventListener('resize', function() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
});

PavelBoytchev · July 31, 2023, 10:58pm

I’m sorry I was not able to help you.

The code, that you posted, is for loading GLTF/GLB files. Note, that it is not sufficient to just replace the loader and the asset file name. Different loaders provide different structures for the 3D models they load. For example, loaded FBX models have no property scene, while loaded GLTF/GLB models always have scene. Change the code to process loaded FBX model correctly.

My last suggestion is this:

You have either a bug in your code, or your FBX file is broken/incomplete … or both. You should first find out which of these cases you have, because their solutions are different. You can try the following workflow:

pick some FBX model from Three.js – it is guaranteed to be OK
use this model with your code
if the animation is shown, then your code is correct, and maybe you have a problem with your FBX file
if the animation is not shown, then your code has a problem, and you should fix it

Topic		Replies	Views
Animations on GLTF not loading Questions loaders , animation , animation-loader , animation-mixer	3	1549	September 6, 2022
Can't get gltf animation to play (but it works in the gltf viewer) Questions animation , gltf-loader	2	3455	April 14, 2020
GLTF exported from Blender won't animate Questions blender , animation , gltf , animation-mixer	2	1445	February 21, 2022
Animations aren't playing well, am I even doing this right? Questions animation , gltf-loader	4	664	March 29, 2019
Gltf animation question Questions gltf-loader	19	2274	June 12, 2021

I have a code with character animation in gltf but when i put fbx character the character is revealed but without animation

Related topics