top of page

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

WeChat-Screenshot_20220320002628.png

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

WeChat-Screenshot_20220320002722.png
WeChat-Screenshot_20220320002730.png

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.

WeChat-Screenshot_20220320004627.png

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

bottom of page