With Kalidokit 3d avatar pre-prepared list of coord

Questions
1

Hi everyone!
I have 3D avatar, and list of pre-prepared coordinates (from mediapipe) for body poses, facial expressions, or hand gestures.
I want to avatar to replicate these movements not real-time)
it might be button or etc.

2

What’s blocking you? What did you try so far? To pose a 3D model most of the time you need to bind it to a skeleton / armature - then just reposition bones according to the baked position coordinates you’ve mentioned (keep in mind, if the baked positions are only partial, you may also need some inverse kinematics to keep the skeleton intact.)

3

@mjurczyk block is that I’m not good at JavaScript and I tried to bind it but it was unsuccessfully)

Here is what I tried)

<!DOCTYPE html>
<html>
<head>
    <title>Enhanced 3D Avatar Animation</title>
    <style>
        body { margin: 0; height: 100vh; display: flex; justify-content: center; align-items: center; background-color: #f0f0f0; }
        #avatar-container { width: 70%; height: 80%; position: relative; }
        #avatar-canvas { width: 100%; height: 100%; border: 3px solid #333; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); }
    </style>
</head>
<body>

    <div id="avatar-container">
        <canvas id="avatar-canvas"></canvas>
    </div>

    <!-- Three.js -->
    <script src="https://cdn.jsdelivr.net/npm/three@0.140.2/build/three.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/three/examples/js/loaders/GLTFLoader.js"></script>
    
    <!-- Your JavaScript Code -->
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            let scene, camera, renderer, avatar, controls;

            function initThreeJS() {
                const canvas = document.getElementById('avatar-canvas');
                scene = new THREE.Scene();
                camera = new THREE.PerspectiveCamera(30, canvas.clientWidth / canvas.clientHeight, 0.1, 100);
                camera.position.set(0, 1, 3);

                renderer = new THREE.WebGLRenderer({ canvas: canvas, antialias: true, alpha: true });
                renderer.setSize(canvas.clientWidth, canvas.clientHeight);
                renderer.setPixelRatio(window.devicePixelRatio);

                const ambientLight = new THREE.AmbientLight(0xffffff, 0.8);
                scene.add(ambientLight);

                const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
                directionalLight.position.set(5, 5, 5);
                scene.add(directionalLight);
            }
            
            function loadAvatar() {
                const gltfLoader = new THREE.GLTFLoader();
                gltfLoader.load('https://models.readyplayer.me/658ba388fc8bec93d06753a7.glb', (gltf) => {
                    avatar = gltf.scene;
                    avatar.scale.set(0.5, 0.5, 0.5); // Scale the avatar to fit the scene
                    scene.add(avatar);
                    animate();
                });
            }
            
            function animate() {
                requestAnimationFrame(animate);
                applyPose();
                renderer.render(scene, camera);
            }

            function applyPose(poseData) {
                // Apply the pose to the avatar
                let rightUpperArm = avatar.getObjectByName("LeftHand");
                let rightForeArm = avatar.getObjectByName("LeftEye");

                if (rightUpperArm && rightForeArm) {
                    // Rotate the upper arm
                    rightUpperArm.rotation.x = Math.sin(Date.now() / 500) * 0.5;
                    rightUpperArm.rotation.y = Math.sin(Date.now() / 1000) * 0.5;

                    // Rotate the forearm
                    rightForeArm.rotation.x = Math.sin(Date.now() / 500) * 0.5;
                }
            }
            
            initThreeJS();
            loadAvatar();

            // Example pose data
            const examplePose = {
                rotationX: 0.1,
                rotationY: 0.9,
                rotationZ: 0.3
            };

            // Apply the pose
            // applyPose(examplePose);
            animate()
        });

    </script>
</body>
</html>

I’m not want a sample repeatable animation. I want make some action (it’s a list of coordinates, like hive five and stand and jump or etc)