JSFiddle - React, Tailwind, and code Playground

HTML

<html>
    <head>
        <title>Avatar</title>
        <style>

            #avatar-canvas{
                width: 1280px; height: 720px;
                position: absolute; top: 0; left: 0;
                border: 1px solid black;
            }

            #mediapipe {
                z-index: 1; width: 320px; height: 240px;
                position: absolute; top: 0; left: 0;
                border: 1px solid black;
            }

            #mediapipe-video {
                z-index: 2; width: 100%; height: 100%;
                position: absolute; top: 0; left: 0; 
            }

            #mediapipe-canvas {
                z-index: 3; width: 100%; height: 100%;
                position: absolute; top: 0; left: 0; 
            }
        </style>
    </head>
    <body>

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

        <div id="mediapipe">
            <video  id="mediapipe-video"></video>
            <canvas id="mediapipe-canvas"></canvas>
        </div>

        <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

        <!-- ThreeJS -->
        <script src="https://cdn.jsdelivr.net/npm/three@0.140.2/build/three.min.js" integrity="sha256-8CFqISEHDRT+UakNv52KG8Yhm5tV+OR5Kq84Z+YTrG0=" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/three/examples/js/loaders/GLTFLoader.min.js"></script>
 
        <!-- MediaPipe -->
        <script src="https://cdn.jsdelivr.net/npm/@mediapipe/camera_utils/camera_utils.js" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/@mediapipe/drawing_utils/drawing_utils.js" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/@mediapipe/holistic/holistic.js" crossorigin="anonymous"></script>

        <!-- Kalidokit -->
        <script src="https://cdn.jsdelivr.net/npm/kalidokit@1.1/dist/kalidokit.umd.js"></script>


       ...

JavaScript

// ------------------------------------------
//  AVATAR CLASS
// ------------------------------------------


class AvatarPose {
    constructor(avatar, three) {
        this.THREE = three || window.THREE
        this.avatar = avatar
        this.mesh = this.avatar.scene || this.avatar.mesh
        this.mapSkeleton()
    }

    mapSkeleton() {
        this.bones = {}
        console.log(this.mesh)
        this.mesh.traverse((child) => {
            
            if (child.name == 'Hips')         { this.bones['Hips'] = child  }
            if (child.name == 'Chest')        { this.bones['Chest'] = child }

            if (child.name == 'LeftHand')     { this.bones['LeftHand']     = child }
            if (child.name == 'LeftForeArm')  { this.bones['LeftLowerArm'] = child }
            if (child.name == 'LeftArm')      { this.bones['LeftUpperArm'] = child }
            if (child.name == 'LeftUpLeg')    { this.bones['LeftUpperLeg'] = child }
            if (child.name == 'LeftLeg')      { this.bones['LeftLowerLeg'] = child }

            if (child.name == 'RightHand')    { this.bones['RightHand']     = child }
            if (child.name == 'RightForeArm') { this.bones['RightLowerArm'] = child }
            if (child.name == 'RightArm')     { this.bones['RightUpperArm'] = child }
            if (child.name == 'RightUpLeg')   { this.bones['RightUpperLeg'] = child }
            if (child.name == 'RightLeg')     { this.bones['RightLowerLeg'] = child }
            
            if (child.name == 'Spine')        { this.bones['Spine'] = child }
        })
        console.log(this.bones)
    }

    // https://github.com/rashgaroth/Face-Recognition/blob/b4d77fdac78f85e4a6d37a442abb02a540860942/scripts/kalidokit.js#L133
    setPose(results){ 

        let facelm      = results.faceLandmarks;
        let poselm      = results.poseLandmarks;
        let poselm3D    = results.ea;
        let rightHandlm = results.rightHandLandmarks;
        let leftHandlm  =...