{"id":23213452,"url":"https://github.com/nagipragalathan/readyplayermeintegaration","last_synced_at":"2026-05-08T13:34:43.779Z","repository":{"id":243942857,"uuid":"813832164","full_name":"NagiPragalathan/ReadyPlayerMeIntegaration","owner":"NagiPragalathan","description":"This project demonstrates character controls using Three.js, integrated with Ready Player Me avatars.","archived":false,"fork":false,"pushed_at":"2024-06-20T13:13:26.000Z","size":10219,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-18T04:42:25.579Z","etag":null,"topics":["3danimation","3dgraphics","charactercontrols","frontenddevelopment","gamedevelopment","interactive3d","javascript","opensource","readyplayerme","stackblitz","techinnovation","threejs","virtualavatars","webdevelopment","webgl"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/NagiPragalathan.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-06-11T20:39:41.000Z","updated_at":"2024-10-03T21:14:22.000Z","dependencies_parsed_at":"2024-06-21T04:35:53.582Z","dependency_job_id":null,"html_url":"https://github.com/NagiPragalathan/ReadyPlayerMeIntegaration","commit_stats":null,"previous_names":["nagipragalathan/readyplayermeintegaration"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NagiPragalathan%2FReadyPlayerMeIntegaration","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NagiPragalathan%2FReadyPlayerMeIntegaration/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NagiPragalathan%2FReadyPlayerMeIntegaration/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NagiPragalathan%2FReadyPlayerMeIntegaration/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/NagiPragalathan","download_url":"https://codeload.github.com/NagiPragalathan/ReadyPlayerMeIntegaration/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247339124,"owners_count":20923009,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["3danimation","3dgraphics","charactercontrols","frontenddevelopment","gamedevelopment","interactive3d","javascript","opensource","readyplayerme","stackblitz","techinnovation","threejs","virtualavatars","webdevelopment","webgl"],"created_at":"2024-12-18T19:17:38.687Z","updated_at":"2026-05-08T13:34:38.752Z","avatar_url":"https://github.com/NagiPragalathan.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# threejs-character-controls-example\n\nThis project demonstrates character controls using Three.js, integrated with Ready Player Me avatars.\n\n## Installation and Setup\n\n1. Clone the repository:\n\n    `git clone https://github.com/NagiPragalathan/ReadyPlayerMeIntegaration.git\n    cd ReadyPlayerMeIntegaration` \n    \n2. Install dependencies:\n\n    `npm install` \n    \n3. Start the development server:\n    \n    `npm run start` \n    \n4. Open your browser and navigate to `http://localhost:3000` to see the example in action.\n    \n\n## Key Features\n\n- **Character Controls**: Implemented in `characterControls.ts`, includes movement and interaction logic.\n- **Ready Player Me Integration**: Integrates Ready Player Me avatars for 3D character representation.\n\n## Usage\n\n- Modify `characterControls.ts` for custom character control logic.\n- Integrate different Ready Player Me avatars by modifying the avatar loading logic.\n\n## Integration Code\n\nHere's a snippet for integrating Ready Player Me avatars and animations:\n\n`gltfLoader.load('https://models.readyplayer.me/65893b0514f9f5f28e61d783.glb', function (gltf) {\n    const model = gltf.scene;\n    model.position.y = 0; // Set initial position closer to the ground\n    model.traverse(function (object) {\n        if ((object as THREE.Mesh).isMesh) (object as THREE.Mesh).castShadow = true;\n    });\n    scene.add(model);\n\n    mixer = new THREE.AnimationMixer(model);\n\n    // Load Walking Animation\n    fbxLoader.load('models/Walking.fbx', function (walkFbx) {\n        const walkAction = mixer.clipAction(walkFbx.animations[0]);\n\n        // Load Idle Animation\n        fbxLoader.load('models/Idle.fbx', function (idleFbx) {\n            const idleAction = mixer.clipAction(idleFbx.animations[0]);\n\n            // Load Run Animation\n            fbxLoader.load('models/Run.fbx', function (runFbx) {\n                const runAction = mixer.clipAction(runFbx.animations[0]);\n\n                // Load Jump Animation\n                fbxLoader.load('models/Jump.fbx', function (jumpFbx) {\n                    const jumpAction = mixer.clipAction(jumpFbx.animations[0]);\n\n                    const animationsMap = new Map\u003cstring, THREE.AnimationAction\u003e();\n                    animationsMap.set('Walk', walkAction);\n                    animationsMap.set('Idle', idleAction);\n                    animationsMap.set('Run', runAction);\n                    animationsMap.set('Jump', jumpAction);\n\n                    characterControls = new CharacterControls(model, mixer, orbitControls, camera, animationsMap, 'Idle');\n                    characterControls.playAnimation('Idle');  // Start with Idle animation\n                }, undefined, function (error) {\n                    console.error('Error loading Jump animation:', error);\n                });\n            }, undefined, function (error) {\n                console.error('Error loading Run animation:', error);\n            });\n        }, undefined, function (error) {\n            console.error('Error loading Idle animation:', error);\n        });\n    }, undefined, function (error) {\n        console.error('Error loading Walk animation:', error);\n    });\n}, undefined, function (error) {\n    console.error('Error loading model:', error);\n});` \n\n# Steps\n - Replace your link For : `https://models.readyplayer.me/65893b0514f9f5f28e61d783.glb`\n - And default models which is in models. for example models/Idle.fbx\n   \n## Try it Online\n\n- Explore the example on [Stackblitz](https://stackblitz.com/github/tamani-coding/threejs-character-controls-example).\n\n## Ready Player Me\n\nReady Player Me is a platform that allows the creation of customizable 3D avatars for use in various applications, including games and virtual environments. For more information, visit [Ready Player Me](https://readyplayer.me/).\n\n## License\n\nThis project is licensed under the MIT License.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnagipragalathan%2Freadyplayermeintegaration","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnagipragalathan%2Freadyplayermeintegaration","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnagipragalathan%2Freadyplayermeintegaration/lists"}