Code Monkey home page Code Monkey logo

galactic-plane / webgl-globe Goto Github PK

View Code? Open in Web Editor NEW
3.0 0.0 0.0 33.46 MB

A study of the behavior of bezier curves connecting points on a sphere. Particle effects cycles around the curve. A spike is created and marks the point of impact. Performance is measured in the table below if your browser support that.

Home Page: https://galactic-plane.github.io/webgl-globe/wwwroot/index.html

CSS 0.03% HTML 0.25% JavaScript 99.71% Procfile 0.01% Dockerfile 0.01%
webgl threejs webgl-globe heroku html5 curve

webgl-globe's Introduction

WebGL Globe

drawing


Github Version:

Runs static html assets only

https://galactic-plane.github.io/webgl-globe/wwwroot/index.html

Heroku Version:

Runs via node.js/express served up on heroku and stores stats via mongo atlas

https://frozen-basin-22700.herokuapp.com/

drawing


Learn More:

WebGL Globe is a cloud-enabled (via the cloud bump map :P), mobile-ready (if you want), earth powered HTML5/THREE.JS app.

  • jQuery
  • three.js
  • HTML5
  • Materialize-CSS

Clone

Use git to install webgl-globe.

$ git clone https://github.com/galactic-plane/webgl-globe.git

Install

In the webgl-globe directory run:

$ npm install

Run Local

Node.jsExpressNodemon

$ nodemon app.js

Run Local from Docker

Using the vivaldi browser (replace with your browser of choice)

$ docker pull dayafter/webgl-globe:latest

$ docker run -dp 3000:3000 dayafter/webgl-globe

$ vivaldi localhost:3000

Usage

let container = document.getElementById('globe');
let globeObj = new DAT.Globe(container);
// random line color
let color = new THREE.Color(0xffffff);
color.setHex(Math.random() * 0xffffff);
globeObj.lineColor(color);
// set particle color
globeObj.particleColor(0x01001f);
// starting point
let originate = [];
originate.push(35.1380556);
originate.push(-79.0075);
// ending points
let marks = [];
marks[0] = [];
marks[0][0] = 39.445723;
marks[0][1] = -123.8052935;

Contributing

Pull requests are welcome. My journey for learning never ends, so I look forward to your insights. For major changes, please open an issue first to discuss what you would like to change.

License

MIT

webgl-globe's People

Stargazers

 avatar  avatar  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.