This project is a 3D AI classroom application built using Three.js, React Three Fiber, and the OpenAI API. It provides an immersive learning experience with an AI-powered teacher that can engage in interactive conversations with users.
- 3D Classroom Environment – Modeled using Blender and rendered with Three.js.
- AI-Powered Teacher – An intelligent virtual instructor with interactive chat capabilities.
- Realistic Animations – 3D models animated using Mixamo for enhanced engagement.
- Voice Interaction – Integrated speech-to-text and text-to-speech for a natural user experience.
- Chat History – Tracks conversations for reference and improved learning.
- API Handling – Built-in Express.js server for secure API requests.
- Frontend: React Three Fiber, Three.js
- Backend: Express.js
- AI Services: OpenAI API
- 3D Modeling & Animation: Blender, Mixamo
-
Clone the Repository:
git clone https://github.com/haiderali780/AI-Classroom-XR.git cd AI-Classroom-XR
-
Install Dependencies:
npm install
-
Configure API Keys:
- Create a
.env
file in the project root. - Add your OpenAI API Key and other required environment variables.
- Create a
-
Start the Development Server:
npm start # or use npm run dev
-
Run the Proxy Server:
node proxy.js
-
Access the Application:
Open your browser and visit: http://localhost:3000
Navigate through the 3D classroom environment using the mouse and keyboard controls Interact with the AI teacher by typing or speaking your questions The AI teacher will respond with both text and speech View the chat history to keep track of previous conversations
Contributions are welcome! If you have any suggestions, improvements, or bug fixes, please open an issue or submit a pull request.