Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/qc20/endless-mountains
This repository contains a WebGL-based terrain visualization using Three.js, a popular JavaScript library for creating 3D graphics in the browser. The project dynamically generates a terrain landscape with mountains and valleys that evolve over time.
https://github.com/qc20/endless-mountains
creative-coding css html javascript ui-design ux-design visualization webdevelopment
Last synced: 6 days ago
JSON representation
This repository contains a WebGL-based terrain visualization using Three.js, a popular JavaScript library for creating 3D graphics in the browser. The project dynamically generates a terrain landscape with mountains and valleys that evolve over time.
- Host: GitHub
- URL: https://github.com/qc20/endless-mountains
- Owner: QC20
- Created: 2024-07-01T00:06:20.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2024-07-01T00:21:07.000Z (5 months ago)
- Last Synced: 2024-07-05T06:48:51.230Z (4 months ago)
- Topics: creative-coding, css, html, javascript, ui-design, ux-design, visualization, webdevelopment
- Language: JavaScript
- Homepage:
- Size: 154 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Endless Mountrains: WebGL Terrain Visualization with Three.js
This repository contains a WebGL-based terrain visualization using Three.js, a popular JavaScript library for creating 3D graphics in the browser. The project dynamically generates a terrain landscape with mountains and valleys that evolve over time.
## Features
- **Dynamic Terrain Generation**: The terrain is generated using Perlin noise and sine wave functions to create natural-looking mountains and valleys.
- **Interactive Camera**: The camera perspective is adjustable and follows the terrain movement.
- **Responsive Design**: The visualization adapts to window resizing, maintaining a consistent display.
- **Continuous Animation**: The terrain moves horizontally, creating a looping effect while updating the geometry to simulate movement.
## Technologies Used
- **Three.js**: A JavaScript library that simplifies the creation and rendering of 3D scenes in WebGL.
- **jQuery**: Used for DOM manipulation and event handling, ensuring smooth interaction with the WebGL canvas.
- **HTML/CSS**: Basic web technologies for structure and styling of the page.
## How to Use
1. Clone the repository locally.
2. Open `index.html` in a web browser.
3. Explore the WebGL terrain visualization.
4. Resize the window to see the responsive behavior.
5. Enjoy the continuous animation of the terrain.
## Credits
- Three.js: [https://threejs.org/](https://threejs.org/)
- jQuery: [https://jquery.com/](https://jquery.com/)