Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/pera-swarm/visualizer
This is a web-based 3d visualizer interface for the Swarm Simulator developed for the Pera Swarm project.
https://github.com/pera-swarm/visualizer
gui js simulator webpack
Last synced: 16 days ago
JSON representation
This is a web-based 3d visualizer interface for the Swarm Simulator developed for the Pera Swarm project.
- Host: GitHub
- URL: https://github.com/pera-swarm/visualizer
- Owner: Pera-Swarm
- License: mit
- Created: 2020-08-04T06:32:24.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2023-09-06T17:40:54.000Z (over 1 year ago)
- Last Synced: 2023-09-06T20:02:43.899Z (over 1 year ago)
- Topics: gui, js, simulator, webpack
- Language: JavaScript
- Homepage: http://pera-swarm.github.io/visualizer
- Size: 9.92 MB
- Stars: 0
- Watchers: 2
- Forks: 6
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
[](https://opensource.org/licenses/MIT)
A basic boilerplate for a Three.js project including the use of Webpack and ES6 syntax via Babel.
## Project Structure
```
build - Directory for built and compressed files from the npm build script
src - Directory for all dev files
├── css - Contains all SCSS files, that are compiled to `src/public/css`
├── js - All the Three.js app files, with `app.js` as entry point. Compiled to `src/public/js` with webpack
│ ├── app
│ │ ├── components - Three.js components that get initialized in `main.js`
│ │ ├── helpers - Classes that provide ideas on how to set up and work with defaults
│ │ ├── managers - Manage complex tasks such as GUI or input
│ │ └── model - Classes that set up the model object
│ ├── data - Any data to be imported into app
│ └── utils - Various helpers and vendor classes
└── public - Used by webpack-dev-server to serve content. Webpack builds local dev files here.
└── assets - Is copied over to build folder with build command. Place external asset files here.
```
## Getting started
Install dependencies:
```
npm install
```
Then run dev script:
```
npm run dev
```
Spins up a webpack dev server at localhost:8080 and keeps track of all js and sass changes to files.
## Build
```
npm run build
```
Cleans existing build folder while linting js folder and copies over the public assets folder from src. Then sets environment to production and compiles js and css into build.
## Access the visualizer
You need to provide the username and password of the MQTT broker, when you are visiting the web interface for the first time. After the first visit, the login details will be stored in the browser cache.
Example URL (for local run):
http://localhost:8080/?username={user_name}&password={password}
Example URL (for production run):
http://pera-swarm.github.io/visualizer/?username={user_name}&password={password}
## Other NPM Scripts
You can run any of these individually if you'd like with the `npm run` command:
* `prebuild` - Cleans up build folder and lints `src/js`
* `clean` - Cleans build folder
* `lint` - Runs lint on the `src/js` folder and uses the `.eslintrc` file in root for linting rules
* `webpack-server` - Start up a webpack-dev-server with hot-module-replacement
* `webpack-watch` - Run webpack in dev environment with watch
* `dev:js` - Run webpack in dev environment without watch
* `build:dir` - Copy files and folders from `src/public` to `build`
* `build:js` - Run webpack in production environment
## Input Controls
* Arrow controls will pan
* Mouse left click will rotate/right click will pan
* Scroll wheel zooms in and out
## Latest build
You can see the latest deployment of this repository from [https://pera-swarm.ce.pdn.ac.lk/visualizer/](https://pera-swarm.ce.pdn.ac.lk/visualizer/)