How load humanoid gltf/glb and play mixamo animation clip?

🌵 Needle Engine
1

How load humanoid gltf/glb and play mixamo animation clip ?

2

To load a humanoid GLTF/GLB model and play a Mixamo animation clip in Needle Engine, follow this step-by-step approach:

  1. Load the GLTF Model:

    • Use GLTFLoader from Three.js to load your humanoid model.

  2. Set Up the Animation:

    • Once the model is loaded, extract the animations associated with it. Mixamo animations can be imported directly if they have been baked into the GLTF.

  3. Playing the Animation:

    • Use AnimationMixer to manage and play the animations.

Here’s a sample code to illustrate the above steps:

import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
import { AnimationMixer } from 'three';

const loader = new GLTFLoader();
let mixer;

loader.load('path/to/your/humanoid.glb', (gltf) => {
    const model = gltf.scene;
    scene.add(model); // Add the model to the scene

    // Create AnimationMixer for the loaded model
    mixer = new AnimationMixer(model);

    // Add all animations from the loaded GLTF
    gltf.animations.forEach((clip) => {
        mixer.clipAction(clip).play();
    });
});

// In your animation update loop:
function animate() {
    requestAnimationFrame(animate);
    if (mixer) mixer.update(deltaTime); // Update mixer with delta time
    renderer.render(scene, camera);
}

animate();

Considerations:

  • Ensure that the paths for your GLTF/GLB files are correct.
  • Ensure to set the correct animation blending options if multiple animations should play together.
  • You may need additional configuration based on the specifics of your scene setup in Needle Engine.

For deeper integration or specific setups, feel free to ask!

3 replies left
thread_mb0f5mudQDI5RZXjoyXWWt4I
Reply to this message to continue the conversation

3

how work with humanoid avatar in needle engine

4

To work with humanoid avatars in Needle Engine, you typically follow these steps:

  1. Importing the Humanoid Avatar:

    • Use a compatible format like GLTF/GLB that supports humanoid rigging. Ensure your model is correctly rigged in your 3D modeling tool (like Blender or Unity).

  2. Loading the Avatar:

    • Use the provided loaders in Needle Engine to import the model into your scene. This generally involves specifying the model path and handling its animations.

  3. Setting Up Animations:

    • If your avatar has animations (e.g., from Mixamo), you need to use an animation mixer or similar system to manage and play these animations when the avatar is loaded.

  4. Customizing Avatar Behavior:

    • You may want to create custom behaviors or components that interact with the avatar, such as movement controls or interaction handlers.

  5. Integrating Interactions:

    • To enable user interactions, you might need to add event listeners or behaviours that detect and respond to input.

Here’s some example pseudocode to illustrate initializing and manipulating a humanoid avatar:

import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';

const loader = new GLTFLoader();
let avatar;

loader.load('path/to/humanoid.glb', (gltf) => {
    avatar = gltf.scene; // Access the loaded model
    scene.add(avatar); // Add to the Needle Engine scene
    
    // Set up animations if available
    const mixer = new AnimationMixer(avatar);
    gltf.animations.forEach((clip) => mixer.clipAction(clip).play());
    
    // Custom behavior can be added here
});

// Animation loop
function update() {
    const deltaTime = clock.getDelta(); // Assuming you have a clock in your code
    if (mixer) mixer.update(deltaTime); // Update animations
    renderer.render(scene, camera);
}

Make sure to refer to the Needle Engine documentation for more details on specific functions and classes needed. For any particular questions or advanced setups, let me know!

2 replies left
thread_mb0f5mudQDI5RZXjoyXWWt4I
Reply to this message to continue the conversation

5

Hi, does your mixamo clip play correctly in Unity?

6

Do you mean

  1. importing humanoid avatars (VRM?) at runtime, and then applying FBX clips from Mixamo, or
  2. importing humanoid avatars in the Unity Editor, applying FBX clips from Mixamo, then exporting to the web?

For (2), that should “just work” – make sure to set your imported file to “Humanoid” rig import. Mixamo clips imported as “humanoid” should then just work.

7

I mean 1. Or loadgltf file at runtime.how? like ready player me.