TeleChat

Idea

I want to build a web app that allows people to talk one on one with audio and avatars. Also, I want it to be adorable and relaxing so I choose a tv-head person as the base of the avatar.

for friends and friendly strangers
no video (for comfort)
using a customized avatar as yourself

Visual Design

UI/UX Design

I start from the UI design. Using bright color and rounded rectangle as the main visual language of the whole frame, a relaxing atmosphere is easily built.

step1: customize your avatar
step2: choose your room (not available so far)
step3: chat with someone else

Modeling Avatar

I use blender to build my little tv-head avatar. It’s my first try on blender so the avatar is a little bit rough.

Front-end Development

part 1 – web development

In this part I use html and CSS to rebuilt my design as an adaptable webpage. And I use some js function to control the customize part. So far it’s pretty good.

part 2 – socket & three.js part

I learned a lot about socket and three.js in this part.

load model in three.js with certain texture rendered on it
using socket to transit the color data in local storage
make the avatar on others’ scene using the same color you customized

Future

A real login system using mongoDB

An async function for users to confirm the customized color load at the same time