Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/michaelkolesidis/synthetique

Retrofuturistic demo
https://github.com/michaelkolesidis/synthetique

3d-graphics 3d-scene 3d-structure 80s art artwork demo demoscene digital-art mark-fisher retrofuturism synthwave three-js threejs threejs-example threejs-learning

Last synced: 10 days ago
JSON representation

Retrofuturistic demo

Host: GitHub
URL: https://github.com/michaelkolesidis/synthetique
Owner: michaelkolesidis
Created: 2022-12-24T13:08:22.000Z (about 2 years ago)
Default Branch: main
Last Pushed: 2023-11-23T03:07:31.000Z (about 1 year ago)
Last Synced: 2024-11-12T05:07:30.013Z (2 months ago)
Topics: 3d-graphics, 3d-scene, 3d-structure, 80s, art, artwork, demo, demoscene, digital-art, mark-fisher, retrofuturism, synthwave, three-js, threejs, threejs-example, threejs-learning
Language: JavaScript
Homepage: https://synthetique.vercel.app/
Size: 4.08 MB
Stars: 3
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

        # synthétique

Made with [Three.js](https://threejs.org/)

![screenshot](/screenshots/screenshot-main.png)

## Other Technologies Used

- [dat.GUI](https://github.com/dataarts/dat.gui)

- [Webpack](https://webpack.js.org/)

- [Babel](https://babeljs.io/)

- [Yarn](https://yarnpkg.com/)

- [Web Audio API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API)

## Controls

| Key |      Function      |

| --- | :----------------: |

| S   |  Start/stop music  |

| M   | Toggle Mark Fisher |

| H   |   Show controls    |

### Control panel

| Option          |                          Function                          |

| --------------- | :--------------------------------------------------------: |

| enabled         |   Enable orbit controls (hold left-click and move mouse)   |

| enablePan       |  Enable camera panning (hold right-click and move mouse)   |

| freeControls    | Remove limits to camera's horizontal and vertical rotation |

| autoRotate      |    Rotate the structure automatically around the Y-axis    |

| autoRotateSpeed |          Set the speed of the automatic rotation           |

## Setup

First, you need to download and install [Node.js](https://nodejs.org/en/download/), as well as, install Yarn globally. Then, clone or download the project, and while inside its main folder run the following commands:

```bash

# Install dependencies (only the first time)

yarn

# Run the local server at localhost:8080

yarn dev

# Build for production in the dist/ directory

yarn build

```

## Screenshots

![screenshot](/screenshots/screenshot-menu.png)

![screenshot](/screenshots/screenshot-01.png)

![screenshot](/screenshots/screenshot-02.png)

## Acknowledgments

Music by [Aries Beats](https://free-songs.de/synthwave-piano/)

Special thanks to [Ricardo Cabello, aka Mr. doob](https://mrdoob.com/) for creating Three.js and to [Bruno Simon](https://bruno-simon.com/) for being such an inspiring teacher.

Inspired by the works of [Mark Fisher, aka k-punk](https://en.wikipedia.org/wiki/Mark_Fisher)

## 💖 Support the Project

Thank you so much for your interest in my project! If you want to go a step further and support my work, buy me a coffee:



## Copyright

Copyright (c) 2023 Michael Kolesidis. All rights reserved.