Git Product home page Git Product logo

app's Introduction

Webaverse client app

Uses NodeJS, with vite.js on the backend, serving up index.js and index.html and other types of imports to the end-client. We also have Totum which accepts requests to decode or load various types of files and represent it as a javascript file, and wsrtc handling the multiplayer over websockets. Users can join rooms and share CRDT z.js state data to one another across the network. Also utilised by wsrtc are web codecs used to perform voice encoding and decoding. Once the app is installed all you need to do is go to localhost:3000 to launch the client. ThreeJS is used as a Renderer, physx-wasm for physics calculations as well as VRM models for avatars.

Client Quick Start

To Use!

To clone and run App you'll need Git and Node.js v.17(which comes with npm) installed on your computer. From your command line:

# Clone this repository
git clone --recurse-submodules https://github.com/webaverse/app.git
# Go into the repository
cd app/
# Install dependencies
npm install
# Run the app
npm run dev
# Navigate to the URL mentioned in the terminal

Pay Attention

When cloning App from git, you must include the option "--recurse-submodules". The App repo relies upon and imports other Webaverse repos that are vital to the functioning application.


Development Environment Setup

###IDEs

We prefer using VSCode for development, so the below notes reflect that toolset; however you should be able to adapt this guide to apply to any other IDEs.

Technologies

The App primarily uses the following technologies


Directory Structure

**Root**
│
├───src <--- React Application Resides Here
	├───Main.jsx <-- Rgisters the routes of the React App and Load Dom
	├───App.jsx <-- Loads Webaverse.js from Root directory
│
├─ index.js <-- This starts the vite server that serves the React App
│
├─ webaverse.js <-- This is the entry point of the Webaverse
│
├─ io-manager.js <-- Controls the input events within the application.
...

Setup ESLint

  • Within VSCode, go to your extensions tab and search for ESLINT

VSCodeESLintSetup

OR From the command line:

```bash
	npm install eslint -g
	eslint --init
```

Development Mode

The application uses vite to hot reload itself automatically if there are any changes to any files. To start the App in dev mode, run:

npm run dev

Any changes inside the packages folder won't recompile automatically and so will require restarting the entire development server by just running again: npm run dev


app's People

Contributors

avaer avatar chrislatorres avatar utf94 avatar lalalune avatar shu8 avatar mujabmuneeb avatar loryhoof avatar torchesburn avatar rob-webaverse avatar skaljac avatar vernigora2k avatar plankatron avatar agoblinking avatar christophertrimboli avatar bru345 avatar hanzlamateen avatar madjin avatar robmcohn avatar tids avatar robert-rdl avatar benjamin-dobell avatar jaredmonkey avatar sirahi avatar galadwarder avatar hamzatrq avatar jerknose avatar zetaphor avatar mohsinanees avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.