Git Product home page Git Product logo

hormiguero3d's Introduction

Hormiguero 3D

Descripción

He realizado una pequeña aplicación para mostrar todas las piezas de un proyecto 3d de la web thingivese. El proyecto se llama formicarium BetterForm y se trata de un hormiguero modular con muchas piezas distinta.

Con esta aplicación solo busco tener una forma de ver mejor las piezas y poder elegir cual imprimir de una forma más sencilla y más intuitiva. De otra manera tendría que tener varios archivos stl abiertos a la vez y no tendría una visión rápida de todas las piezas.

Herramientas Utilizadas.

Three.js: Esta librería se encargara de cargar todos los ficheros stl y visualizar todas las partes 3d del proyecto. También nos dará las opciones para poder interactuar con ellos.

Django: En la parte del servido utilizaremos django al estar familiarizado ya con su uso.

Postgress: En este caso la base de datos solo almacenara los datos de las piezas (Nombre fichero, tamaño y imagen).

Docker: Sera el encargado de desplegar los contenedores para la web y la base de datos.

Después para realizar la aplicación web se utilizara como es lógico css, html y javascript.

Funcionalidad de la aplicación

Al iniciar la aplicación nos mostrara todas las piezas del proyecto alineadas y colocadas por filas. De esta forma tendremos una vista rápida de todas para poder seleccionar las que queramos ver. Podremos acercar y alejar la cámara ademas de rotar para ver las piezas desde otra perspectiva.

1MoverTodos.mp4

En la parte inferior de la pantalla principal tendremos dos botones. El primero tiene la funcionalidad de volver los valores iniciales de la cámara para colocarla en la posición inicial de nuevo

2moveryhome.mp4

El otro botón nos da la opción de descargarnos un fichero zip con todos los ficheros stl de las piezas que estamos viendo.

3descargarTodos.mp4

También mostramos la información de las piezas por las que pasamos el ratón en la esquina superior izquierda de la pantalla. Se mostrara el nombre del fichero que le corresponde y las medidas de dichas piezas.

5infoPIezasInicio.mp4

Con esto tenemos explicada toda la función del menu inicial de la aplicación. Nos queda la parte que nos muestra las piezas de una forma más detallada y individual. Para esto solo tenemos que hacer doble click en una de las piezas y nos llevara a la vista individual. En la esquina superior izquierda se mostrara la información de la pieza que estamos observando. En el mismo video vemos como pulsando el boton de home volveriamos a la vista de todas las piezas juntas.

4clickPiezaYVolver.mp4

Vemos como se ha aumentado la botonera y tenemos más opciones. Lo primero que podemos hacer es pasar de una pieza a otra con los botones de los dos extremos de la botonera.

6nextyprevious.mp4

Ademas podemos mover la cámara como en la pantalla de inicio y volver la cámara a la posición inicial posteriormente.

7moverYResetCamera.mp4

Tenemos la opción de escalar una pieza y volver a dejarla como estaba anteriormente volviendo a pulsar el botón de escalado.

8Escalar.mp4

Podemos descargar el fichero de la pieza que estamos visualizando.

9DescargarSTl.mp4

Por ultimo tenemos un menu lateral con todas las piezas dividas por secciones. Este menu nos da la opción de buscar una pieza que queremos visualizar de una forma más rápida que pasando de una a otra. Podremos desplegar varias secciones o ninguna según las que nos interese ver y al hacer doble click sobre una pieza sera visualizada esta en la pantalla.

10MenuPiezas.mp4

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.