welcome to frogf3fiber

Ribbit! Hello!

You're looking in the right place! However, this project is under construction. Check back soon ❤️

OR! clone, yarn install + yarn run to play current version in your browser ( use directional pad and mouse to move the platform and goblins )

You can hear the original soundtrack here: Froge Wizard Soundtrack

You can watch the screen recording of the Epicodus Capstone presentation here: Screen Recording of r3f Presentation with Sound

On the eighth of May, 2020

From the imagination of Jeremy Kale Padot, frogf3fiber is a three.js react three fiber animation about a frog.

For macOS:

If Homebrew is not installed on your computer already, then install Homebrew by entering the following two commands in Terminal:

• $ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
• $ echo 'export PATH=/usr/local/bin:$PATH' >> ~/.bash_profile

Install Git with the following command:

• $ brew install git

Next, install Node.js by entering the following command in Terminal:

• $ brew install node

For Windows:

Please visit the Node.js website for installation instructions.

Install this application

Clone this repository via Terminal using the following commands:

• $ cd desktop
• $ git clone {url to this repository}
• _$ cd frogf3fiber Then, confirm that you have navigated to the frogf3fiber project directory by entering "pwd" in Terminal.

Next, install npm at the project's root directory via the following commands:

• $ npm install
• $ npm run build

I feel like yarn works better with r3f, instead try: yarn install, yarn start to run the applicaion

Open the contents of the directory in a text editor or IDE of your choice (e.g., to open the contents of the directory in Visual Studio Code on macOS, enter the command "code ." in Terminal).

Available Scripts

In the project directory, you can run:

npm start or yarn start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

Controls:

• Use the directional pad (up down left right) to move the goblins around the screen
• Use your mouse to click, hold, drag, and zoom the froge platform

Technologies:

• React
• React-three-fiber
• Three.js
• Blender
• Adobe
• Illustrator
• Affinity
• JavaScript
• MagicaVoxel
• Git

License:

MIT

Copyright (c) 2020 Jeremy Padot