Skip to content
Buffer geometry merging, procedural terrains and shadow mapper research with Three.js
Branch: master
Clone or download
Latest commit f1ee634 Mar 18, 2019
Type Name Latest commit message Commit time
Failed to load latest commit information.
lib Fixed up that weird tough highliting issue. Oct 25, 2016
public [fix] horizontal and vertical scroll on body Feb 12, 2019
resources Improved random generation. Nov 13, 2016
src Add copyright block Feb 11, 2019
LICENSE Create LICENSE Feb 13, 2019
package-lock.json Add production configuation Feb 11, 2019
webpack.common.js Add production configuation Feb 11, 2019 Config copy webpack plugin Feb 11, 2019

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

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


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


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
  • 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!


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




None whatsoever.

You can’t perform that action at this time.