Frankie-AR

• 

  Frankie in action

• 

  Frankie in action

Inspiration

I had always wanted to take selfies with my mlh swag and goodies . But i wanted to add something more , something interesting to it . So i decided to devolope a site where we can take selfie with Frankie the system ferret , which is the 2022 mlh season mascot . Not only does it do motions but also reacts to click and touches .

What it does

Take great photos or use a screen recorder to record motion videos with Frankie the system ferret .

How we built it

The project was built using HTML , CSS and javascript including AR.js and three.js for inducing 2d animation in 3d space . The model was made with live2d software . Whole project runs on live2d sdk core for web applications .

Challenges we ran into

The most challenging problem was to make the character of Frankie the system ferret . Also i have to take care of positioning and location and size of the character and how to display it in the 3d space .

Accomplishments that we're proud of

I am very happy that it turned out so good in the end . I ran into many problems but by patience and perservance i was able to overcome them .

What we learned

I learned so much about AR.js and three.js and how it functions . I also got to learn and use a new software (LIVE2d) .

What's next for Frankie-AR

We can add more characters ( previous mascots ) in addition to Frankie , which will be so awesome .

Built With

• ar
• ar.js
• css3
• html5
• javascript
• live2d
• three.js