https://github.com/jstrait/city-tour

A procedurally generated city built with WebGL and three.js
https://github.com/jstrait/city-tour

canvas city procedural-generation threejs webgl

Last synced: 2 days ago
JSON representation

A procedurally generated city built with WebGL and three.js

• Host: GitHub
• URL: https://github.com/jstrait/city-tour
• Owner: jstrait
• License: mit
• Created: 2012-10-18T04:39:20.000Z (about 12 years ago)
• Default Branch: master
• Last Pushed: 2024-07-14T00:38:17.000Z (6 months ago)
• Last Synced: 2024-12-17T08:07:01.158Z (9 days ago)
• Topics: canvas, city, procedural-generation, threejs, webgl
• Language: JavaScript
• Homepage: https://www.joelstrait.com/citytour/
• Size: 4.36 MB
• Stars: 83
• Watchers: 6
• Forks: 18
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# City Tour

Visit a procedurally generated city, different each time. Sit back and enjoy the ride!



Made using [three.js](http://threejs.org) and WebGL.

## How It Works

First, blueprints of the world are generated:

* A terrain map

* A road network that follows the terrain

* Empty building lots along roads

* Buildings in the lots

The results are different each time due to random variation, but follow configurable rules.

Next, this abstract definition is turned into a 3D model that can be rendered with WebGL, with the help of [three.js](http://threejs.org).

Once this is all created, you can move around the city using touch gestures (mobile) or the mouse (desktop). Navigation works similar to Google/Apple Maps. You can also click the "Take a Tour" button to go on an automatic flight/drive through the city.

## Running Locally

* If running the app locally for the first time, run `yarn install`

* Run `yarn serve`, which will build the app and start a local development server

* Open the `localhost` URL listed in the command-line output in your browser

* If a source file is changed while the server is running the app will automatically be rebuilt. However, you'll need to manually refresh the page in your browser to see the changes.

## Building For Production

* If building the app for the first time, run `yarn install`

* Run `yarn build`

* The `dist/` folder will contain the files that should be deployed to production

## Running Tests

* `yarn test`