/MyHOLO

Front-End for a 3D application called myHolo

Primary LanguageJavaScript

MyHolo - Raise Your Holo Today

An application that allows you to raise your own virtual Holo. Users are able to feed it, play with it, and interact with it. Being a good Holo owner will be rewarded with coins, while bad one's will experience the lost of their Holo forever! This application will be powered with React on the front-end and renders ThreeJS Library with React-Three-Fiber.



Hierarchy

Component Hiearchy

WireFrame -[One Page Application]

WireFrame



---

Technologies:

Thoughts Before Creation / User-Planning:


( As a user, I want ___ so, as a developer, I should ___)

  • As a user I want to be able to see these amazing 3D features. As a developer; I will accomplish this by using ThreeJS and React-Three-Fiber to render 3D models and UI's

  • As a user I want to be able to see my Holo and name it. As a developer, I will choose a model that will be rendered when components are mounted and then implement a form that will store user inputs into state when submitted.

  • As a user I want to be able to at least interact with my Holo in two different ways; I as a developer, will have eventlisteners that will allow users to feed and play with their Holo

  • As a user with a low end computer, I would still like to run this application. As a developer, I will try to accomplish this by choosing models that are not too heavy on textures and use as little z-axis lighting as possible.

  • As a user I want to push the boundaries and see what it will take for me to lose my Holo. As a developer, I will implement a feature that will decrement Holo's health based on boredom and hunger, and [ allow users to own a new Holo with an X amount of currency ( stretch ) ].

MVP Goals

  • Render 3D Models and UI ~ React-Three/Fiber | ThreeJS
  • [ 7/31 ] Holo Name is present …
  • [ 7/31 ] Multiple Holo Interactives
    • Feed Functionality [Button Event]
    • Play Functionality [Button Event]
  • [ 7/30 ] Renderable on Low-End Devices
    • Health
    • Hunger Meter
    • Happiness Meter



---

Installation

npm install
npm install @react-three/fiber
npm install @react-three/drei

Unsolved / Bugs:

[x] useReducer increments double the payload. Fixed

Credits:

SketchFab Licensing Guidelines

HoloLive Copyright TOS

Sukon Boss Holo-live

KirbyDX

Kass & Deku

Motion Pack

Launch:

Link to Applpication - MyHolo