React-Three-Fiber Convai-Lipsync Example

This project demonstrates how to integrate Convai-Lipsync with Ready Player Me characters using React Three Fiber in real-time.

Getting Started

Before running the project, follow these instructions:

Prerequisites

Make sure you have Node.js and npm installed on your machine. Also make sure the Ready Player Me character has Morphs enabled. Documentation Link : https://docs.readyplayer.me/ready-player-me/api-reference/rest-api/avatars/get-3d-avatars#examples-7

Installation

1. Clone the repository to your local machine:

   git clone https://github.com/Conv-AI/RPM-Lipsync.git

2. Navigate to the project directory:

   cd RPM-Lipsync

3. Install the project dependencies:

   npm install

Configuration

Before starting the project, you need to add your Convai API key and character ID in the App.jsx file.

1. Open src/App.jsx in your preferred code editor.

2. Locate the following lines:

   // Replace 'YOUR_CONVAI_API_KEY' and 'YOUR_CHARACTER_ID' with your Convai API key and character ID
   const convaiApiKey = 'YOUR_CONVAI_API_KEY';
   const characterId = 'YOUR_CHARACTER_ID';

3. Replace 'YOUR_CONVAI_API_KEY' and 'YOUR_CHARACTER_ID' with your actual Convai API key and character ID.

Run the Project

After configuring the Convai API key and character ID, you can run the project:

npm start

This will start the development server, and you can view the project at http://localhost:3000 in your web browser.

Usage

Explore the project to understand how Convai-Lipsync is integrated with Ready Player Me characters in a real-time React Three Fiber application.

Feel free to modify and extend the code for your own projects.

Contributing

If you encounter any issues or have suggestions for improvements, please open an issue or submit a pull request.

License

This project is licensed under the MIT License.