Π ΡΡΡΠΊΠΈΠΉ: ΠΡΠ΄ΠΈΠΎΠΏΠ»Π΅Π΅Ρ Ρ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΠ΅ΠΉ Π½Π° Three.js, ΡΠ΅Π°Π³ΠΈΡΡΡΡΠ΅ΠΉ Π½Π° ΠΌΡΠ·ΡΠΊΡ Π² ΡΠ΅Π°Π»ΡΠ½ΠΎΠΌ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ.
English: Audio player with a real-time music-responsive 3D visualization using Three.js.
Π ΡΡΡΠΊΠΈΠΉ:
ΠΠ°ΡΠ»Π°ΠΆΠ΄Π°ΠΉΡΠ΅ΡΡ Π°ΡΠ΄ΠΈΠΎΠΏΠ»Π΅Π΅ΡΠΎΠΌ Ρ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΠΎΠΉ 3D-Π°Π½ΠΈΠΌΠ°ΡΠΈΠ΅ΠΉ. ΠΠ°ΠΆΠ΄ΠΎΠ΅ Π°ΡΠ΄ΠΈΠΎ ΡΡΠ΅ΠΊ ΠΈΠ·ΠΌΠ΅Π½ΡΠ΅Ρ ΡΠΎΡΠΌΡ ΠΈ Π΄Π²ΠΈΠΆΠ΅Π½ΠΈΠ΅ ΠΎΠ±ΡΠ΅ΠΊΡΠΎΠ² Π½Π° ΡΠΊΡΠ°Π½Π΅.
English:
Enjoy the audio player with interactive 3D visuals. Every track dynamically influences shapes and animations in real-time.
Π ΡΡΡΠΊΠΈΠΉ:
- πΆ ΠΠΎΡΠΏΡΠΎΠΈΠ·Π²Π΅Π΄Π΅Π½ΠΈΠ΅ Π°ΡΠ΄ΠΈΠΎ ΡΠ°ΠΉΠ»ΠΎΠ² ΠΏΡΡΠΌΠΎ Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ΅
- π 3D Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΡ Π°ΡΠ΄ΠΈΠΎ Π² ΡΠ΅Π°Π»ΡΠ½ΠΎΠΌ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ Three.js
- π¨ ΠΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠ°Ρ Π΄Π΅ΡΠΎΡΠΌΠ°ΡΠΈΡ ΠΎΠ±ΡΠ΅ΠΊΡΠΎΠ² ΠΏΠΎΠ΄ ΠΌΡΠ·ΡΠΊΡ
- π¨ ΠΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ ΠΊΠ°ΡΡΠΎΠΌΠΈΠ·Π°ΡΠΈΠΈ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΡΡ ΡΡΡΠ΅ΠΊΡΠΎΠ²
- β‘ ΠΡΡΠΎΠΊΠ°Ρ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΡ Π±Π»Π°Π³ΠΎΠ΄Π°ΡΡ React + Three.js + Vite
- π§ ΠΡΠΎΡΡΠ°Ρ ΠΈΠ½ΡΠ΅Π³ΡΠ°ΡΠΈΡ ΠΈ ΡΠ°ΡΡΠΈΡΡΠ΅ΠΌΠΎΡΡΡ
English:
- πΆ Play audio tracks directly in the browser
- π Real-time 3D audio visualization with Three.js
- π¨ Dynamic object deformation responding to music
- π¨ Customizable visual effects
- β‘ High performance with React + Three.js + Vite
- π§ Easy integration and extensibility
Frontend:
- β React 19
- π Three.js (3D visualization)
- π @react-three/fiber & @react-three/drei
- π Simplex Noise for procedural animations
- β‘ Vite (fast bundler & dev server)
- β ESLint & Prettier for code quality
