XR Toon Tutor

Inspiration

I wanted to make learning spatial design concepts feel more interactive and easier to understand. Many lessons rely on flat slides, so I focused on creating a simple immersive classroom where learners can explore ideas visually.

What it does

XR Toon Tutor lets learners explore a 3D-style classroom scene with a character guide. They can switch between lessons about scale, color, lighting, and shadows, listen to voiceover explanations, adjust the scene depth, and answer short activities.

How I built it

I built the prototype with HTML, CSS, and JavaScript. The 3D-style scene is rendered with Canvas, while the voiceover uses the Web Speech API. The interface is designed to work in a browser and demonstrate how the concept could expand toward mobile or headset-based learning.

Challenges I ran into

The main challenge was making the experience feel immersive without using a heavy framework or external 3D engine. I also had to keep the interface simple enough for a learner to understand quickly while still showing meaningful interaction.

Accomplishments that I'm proud of

I’m proud that the prototype has a complete learning flow: lesson selection, visual interaction, voice guidance, activity questions, scoring, and a focused viewing mode. It feels like a usable concept rather than only a static mockup.

What I learned

I learned how much small interactions matter in an educational experience. Simple things like labels, guided text, voiceover, and immediate feedback make the scene easier to follow and more useful for learners.

What's next for XR Toon Tutor

Next, I would add a real GLB character model, improve the scene with a 3D engine like Three.js, and connect it to WebXR so it can run on mobile AR or a headset. I would also add more lessons and teacher controls.

Built With

• api
• browser-based
• canvas
• css
• html
• javascript
• speech
• web