Interactive-Particles-Music-Visualizer

KO | EN

gitlite — search

#hacktoberfest #typescript #golang #machine-learning #deep-learning #linux #docker #nodejs #awesome #kubernetes #awesome-list #pytorch #ios #open-source

Interactive-Particles-Music-Visualizer

(★ 89)

Learn how to build audio-reactive visual experiences in Three.js, featuring synchronized sound and dynamic 3D visuals, inspired by ARKx's work for Coala Music's website.

파일 탐색기

최종 버전 다운로드 (.zip)

- - favicon.ico
- - .DS_Store
  - App.js
  - index.js
- - style.scss
.DS_Store
.eslintrc.json
.gitignore
.prettierrc
favicon.ico
index.html
LICENSE
package.json
README.md
vite.config.js

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Audio-Reactive Visuals in Three.js

Learn how to create a music visualizer in Three.js, inspired by ARKx's work for Coala Music's website.

![Audio Reactive Particles](https://tympanus.net/codrops/wp-content/uploads/2023/12/feature_particles-visualizer_high.gif)

[Article on Codrops](https://tympanus.net/codrops/?p=74700)

[Demo](https://tympanus.net/Tutorials/ParticlesMusicVisualizer/)

## Installation

Install dependencies:

```
npm install
```

Compile the code for development and start a local server:

```
npm run dev
```

Create the build:

```
npm run build
```

## Credits

- [Coala Music Website](https://coalamusic.com/) by [ARKx](https://arkx.cc)
- [FBO Particles](https://www.youtube.com/watch?v=oLH00MXTqNg) by Yuri Artiukh
- [Threejs](https://threejs.org/)
- [GSAP](https://gsap.com/)
- [WebGL Noise](https://github.com/ashima/webgl-noise)
- [web-audio-beat-detector](https://github.com/chrisguttandin/web-audio-beat-detector)

- Music by Kendrick Lamar - Money Trees from [Spotify API](https://developer.spotify.com/documentation/web-api/reference/get-track)

## Misc

Follow Tiago: [Instagram](https://instagram.com/tgcnzn), [Twitter](https://twitter.com/tgcnzn), [GitHub](https://github.com/tgcnzn), [Linkedin](https://www.linkedin.com/in/tcanzian/)

Follow ARKx: [Website](https://arkx.cc), [Instagram](https://instagram.com/arkx_cc), [Twitter](https://twitter.com/arkx_cc), [Linkedin](https://www.linkedin.com/company/arkx/)

Follow Codrops: [Twitter](http://www.twitter.com/codrops), [Facebook](http://www.facebook.com/codrops), [GitHub](https://github.com/codrops), [Instagram](https://www.instagram.com/codropsss/)

## License

[MIT](LICENSE)

Made with :blue_heart: by [Codrops](http://www.codrops.com)

Interactive-Particles-Music-Visualizer

파일 탐색기

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Interactive-Particles-Music-Visualizer

파일 탐색기

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README