GithubHelp home page GithubHelp logo

bernhardfritz / terraineditor Goto Github PK

View Code? Open in Web Editor NEW
13.0 5.0 2.0 70 MB

This project is about the development of a platform-independent terrain editor. The terrain format produced by this editor is designed to be easy to use in your own projects.

License: MIT License

HTML 1.00% JavaScript 73.98% CSS 1.45% GLSL 23.58%
javascript electron threejs terrain heightmap

terraineditor's Introduction

terraineditor

This terrain editor offers you the following two ways to design your own terrain:

  • Brush-based height manipulation
  • Brush-based multi-layer texturing

The terrain format produced by this terrain editor will be image-based. Once the documentation is ready you shouldn't have much trouble integrating it into your own projects.

Feel free to check out the current state of development by following the instructions below. I'd be happy about any feedback :)

Instructions

git clone https://github.com/bernhardfritz/terraineditor.git
cd terraineditor
npm i
npm start

Controls

  • W, A, S, D, SPACE, SHIFT for movement
  • hold middle mousebutton to temporarily switch to CAMERA MODE
  • while in CAMERA MODE move your mouse to rotate the camera
  • esc to switch to COMMAND MODE
  • while in COMMAND MODE you can safely use the sliders in the menu without worrying about accidentally altering your terrain in any way
  • C to switch to CAMERA MODE (alternative to middle mousebutton)
  • E to switch to EDIT MODE
  • while in EDIT MODE use left mousebutton / right mousebutton to raise / lower terrain in an indicated area around your cursor
  • T to switch to TEXTURE MODE
  • while in TEXTURE MODE, use left mousebutton / right mousebutton to apply / erase the current texture layer in an indicated area around your cursor
  • while in TEXTURE MODE, use 1 (default), 2, 3 to switch between texture layers
  • the base texture layer (layer 0) is applied to the whole terrain per default and cannot be erased
  • all texture layers are added on top of each other, layer 0 being on the very bottom and layer 3 on the very top

Screenshots

screenshot screenshot screenshot

TODO

  • Saving/Loading of terrain
  • Detailed documentation of the terrain format
  • Implementation of a JavaScript module that allows you to directly import terrain files into your three.js scene
  • Allow textures to be drag and dropped into texture layer slots during runtime
  • Custom brushes
  • Keyframe-based modification of sky parameters over time

terraineditor's People

Contributors

bernhardfritz avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar

terraineditor's Issues

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.