3D Virtual Assistent (Mobile)

Table of Contents

• Table of Contents
• Introduction
• Installation
• Functionalities
• Screenshots
• Technologies Used
• Usefull Docs and Links

Introduction

3D Virtual Assistent is a project to display a 3D charecter and have a conversation with. This project was built to serve as a study for the use of 3d models in React and React Native.
The Mobile version runs both in iOS and Android phones with Expo.

Tip: This repository is the Mobile version. If you wish to see the backend version click here

Installation

1. First, install the dependencies:

npm install

2. Second, use expo to initialize:

npm start

Functionalities

• Display Avatar: Display a 3D Model using Ready Player Me Avatar
• lipsync When Avatar Speak: Map an mouth animation to play when message is ready.
• Audio Message: Recive and play an audio file when message is ready.
• Gesture Animations: Play an animation when message is ready to enhance interection.
• Send text to Avatar: Send text message to the avatar speak.
• Test backend conection: "Speak" Button to use mockup text message and audio from backend.
• Hide/Show UI: 👁️ Button to change the UI display.

Screenshots

Technologies Used

• React Native
• React Three Fiber
• React Three Drei
• Tailwind CSS
• Typescript
• Expo

Usefull Docs and Links

• Ready Player Me - RestAPI Documentation
  • In case you wish to place your own RPM model on the project, here is the RestAPI Link to GET your 3D Avatar.
• React Three Fiber Documentation
• gltfjsx - Map your 3D model file in glt to .jsx or .tsx .