https://github.com/joseguilherme96/tsuru

Este projeto tem por finalidade de renderizar elementos 3D no browser, aprendendo conceitos sobre webgl, websocket e geolocation API.
https://github.com/joseguilherme96/tsuru

flask-websocket geolocation-api threejs webgl websocket

Last synced: 27 days ago
JSON representation

Este projeto tem por finalidade de renderizar elementos 3D no browser, aprendendo conceitos sobre webgl, websocket e geolocation API.

• Host: GitHub
• URL: https://github.com/joseguilherme96/tsuru
• Owner: joseguilherme96
• Created: 2024-09-06T13:01:42.000Z (2 months ago)
• Default Branch: main
• Last Pushed: 2024-09-06T15:21:48.000Z (2 months ago)
• Last Synced: 2024-09-28T23:41:41.970Z (about 1 month ago)
• Topics: flask-websocket, geolocation-api, threejs, webgl, websocket
• Language: Vue
• Homepage: https://tsuru-pi.vercel.app
• Size: 237 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
## Tsuru 3D

Este projeto tem por finalidade em aprender conceitos sobre webgl para redenrização de elementos 3D no browser, websockets para atualizar a lista de novos passaros conectados em tempo real e também para identificar a localização de cada passaro conectado utilizando a Geolocation API.



Foi utilizado o framework vue.js e a biblioteca three.js para renderizar o passáro em 3D.

O pássaro foi importado do site [(sketchfab)](https://skfb.ly/o8Pyt) que gera um arquivo na extensão .glb que é utilizado para criação de objetos 3D. Após baixado o modelo fiz a importação para dentro da biblioteca three.js onde pude ter acesso ao objeto onde pude alterar sua cor como outras propriedades que o arquivo oferece para alteração.

## Passaros ativos

É possível saber em tempo real quais pássaros que estão conectados, assim como a localização deles.

Foi utilizada também a biblioteca Socket.IO que permite conectar com uma API websocket feita em flask. Assim cada passaro conectado é enviado a informação para a API, onde ela faz um broadcast para todos os outros passaros conectados. Assim todos sabem quais passaros estão ativos e aonde estão, claro apenas se o usuário autorizar sua localização.

## Setup do projeto

### Pasta backend

Entre na pasta backend e instale as dependências com os seguintes comandos :

#### Execute

Crie um ambiente virtual

```sh

    python -m venv .venv 

```

Ative o ambiente virtual

```sh

    .venv\Scripts\activate

```

Instale as dependências

```sh

    pip install -r requirements.txt

```

Execute o flask

```sh

    flask run

```

### Pasta frontend

Abra a pasta frontend e execute os seguintes comandos :

#### Execute

```sh

npm install

```

### Compile and Hot-Reload for Development

```sh

npm run dev

```