Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/marcosd59/threejs-party-scroller
Este proyecto utiliza THREE.js para crear una experiencia interactiva en 3D que simula una fiesta. Los usuarios pueden interactuar con objetos 3D como un toroide, una bola de discoteca y un avatar, y controlar la música a través de interacciones en la interfaz.
https://github.com/marcosd59/threejs-party-scroller
animation party threejs
Last synced: 13 days ago
JSON representation
Este proyecto utiliza THREE.js para crear una experiencia interactiva en 3D que simula una fiesta. Los usuarios pueden interactuar con objetos 3D como un toroide, una bola de discoteca y un avatar, y controlar la música a través de interacciones en la interfaz.
- Host: GitHub
- URL: https://github.com/marcosd59/threejs-party-scroller
- Owner: marcosd59
- Created: 2024-04-15T22:44:22.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2024-05-07T16:19:15.000Z (7 months ago)
- Last Synced: 2024-05-07T17:33:49.773Z (7 months ago)
- Topics: animation, party, threejs
- Language: JavaScript
- Homepage: https://marcosd59-data-break-festival.netlify.app/
- Size: 35.5 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Scrollable 3D Animation with Three.js
## Descripción
Este proyecto utiliza THREE.js para crear una experiencia interactiva en 3D que simula una fiesta. Los usuarios pueden interactuar con objetos 3D como un toroide, una bola de discoteca y un avatar, y controlar la música a través de interacciones en la interfaz.
## Funcionalidades
- **Animación de Objetos 3D**: Toroide y bola de discoteca animados que giran automáticamente.
- **Interacción con el Avatar**: Al hacer clic en el avatar, los usuarios pueden reproducir o pausar la música.
- **Fondo Interactivo**: El fondo de la escena utiliza una textura que simula un ambiente de fiesta.
- **Estrellas Aleatorias**: Generación de estrellas en posiciones aleatorias para simular un cielo nocturno.
- **Animación de Cámara**: La posición de la cámara cambia con el desplazamiento de la página para crear un efecto de movimiento.
## Capturas de Pantalla
---
---
## Prerrequisitos
Antes de empezar, asegúrate de tener instalado lo siguiente:
- [Node.js](https://nodejs.org/en/): Entorno de ejecución para JavaScript.
- Un navegador moderno capaz de ejecutar WebGL.
## Comenzando
### Instalación
Para poner en marcha el proyecto en tu máquina local para fines de desarrollo y pruebas, sigue estos pasos:
1. Clona el repositorio:
```
git clone
```
2. Navega al directorio del proyecto:
```
cd tu-repositorio
```
3. Instala las dependencias:
```
npm install
```
4. Inicia el servidor de desarrollo:
```
npm run dev
```
5. Abre `http://localhost:3000` en tu navegador para ver la aplicación en acción.
## Herramientas Utilizadas
- [THREE.js](https://threejs.org/)
- WebGL
## Contribuir
¡Las contribuciones son lo que hacen que la comunidad de código abierto sea un lugar increíble para aprender, inspirar y crear! Cualquier contribución que hagas será **muy apreciada**.
Si tienes una sugerencia para mejorar esto, por favor:
1. **Fork** el repositorio.
2. Crea tu **Feature Branch** (`git checkout -b feature/AmazingFeature`).
3. Haz tus **cambios** en el código.
4. **Commit** tus cambios (`git commit -m 'Add some AmazingFeature'`).
5. **Push** a la rama (`git push origin feature/AmazingFeature`).
6. Abre un **Pull Request**.
## Contacto
- **Nombre**: Marcos Damián Pool Canul
- **Correo Electrónico**: [email protected]
- **GitHub**: [marcosd59](https://github.com/marcosd59)
---
© 2024 Marcos Damián Pool Canul.