Skip to content

Carloscruzvalencia/3d-triangle-animation-Zdog.js

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

objetivo

  • Recrear y animar la siguiente imagen en Zdog.js inspiracion

Resultado final

Resultado final del proyecto

Miralo en la web

Documentacion del proyecto

Mediante un bucle se generan triangulos nesesarios

for (i = 0; i != 30; i++) {
    new Zdog.Shape({
        addTo: piramid,
        path: [ // triangle
            { x: i * 0, y: i * -95 },
            { x: i * 90, y: i * 60 },
            { x: i * -90, y: i * 60 },
        ],
        stroke: i * 1.5,
        color: 'gray',
        translate: {
            y: -100,
            z: i*120
        },
        rotate: {
            z: 9.42
        }
    });
}

Para terminar animamos toda la figura

function animate() {
    mv = 0.000
    for (i = 0; i != 30; i++) {
        piramid.children[i].rotate.z += mv
        mv = mv + 0.00005
    }
    piramid.updateRenderGraph();
    requestAnimationFrame(animate);
}
animate();

Resultado final

Resultado final del proyecto

visita la pagina web Pagina web