September 28, 2019

303 words 2 mins read

alexanderperrin/threejs-ballooning

alexanderperrin/threejs-ballooning

Buffer geometry merging, procedural terrains and shadow mapper research with Three.js

repo name alexanderperrin/threejs-ballooning
repo link https://github.com/alexanderperrin/threejs-ballooning
homepage
language JavaScript
size (curr.) 2449 kB
stars (curr.) 510
created 2019-02-11
license MIT License

Ballooning with Three.js

This was developed as a study into procedural terrains, buffer geometry optimisation and shadow mappers with Three.js and WebGL. I had some grand plans for the application, but they were never realised so it’s probably more useful to just release it as it is for others to take a look! There are plenty of issues with it and it’s pretty rough having been developed over 2 years ago now, but if it’s some use to anyone that’s great.

Example at https://alexanderperrin.com.au/triangles/ballooning.

Use the arrow keys or the left and right sides of the screen on touch devices to move the balloon.

Features

  • Procedurally generated infinite terrain & tree placement
  • Happy flapping birds
  • Shoreline boathouse placement
  • Pleasant mountain ballooning
  • Statically batched tree rendering
  • Runs on desktop and mobile

Development

Feel free to have a dig around in the code and change things. I’ve setup a webpack development environment with hot module replacement that you can use to quickly iterate the application.

  • Ensure that you have node and npm installed on your machine. You can follow the official instructions at https://www.npmjs.com/get-npm
  • Clone the repository into your desired project folder
  • Run npm install from within the project folder to install dependencies
  • Ensure webpack-cli is either available globally or installed locally (npm install --save-dev webpack-cli)
  • Run npm start. This will spin up a webpack development server running at http://localhost:8080
  • Change the code you like and see what happens!

Building

  • Run npm run build to build a production ready version of the web app.
  • Contents will be processed into /dist, which you can upload to your web server.

License

MIT

Warranty

None whatsoever.

comments powered by Disqus