Apprendre à concevoir et à animer en 3D avec Zdog –

Il existe une bibliothèque JavaScript intéressante contenant des noms tels que Chris Gannon Val Head et CodePen . Vous pouvez également le trouver sur Product Hunt où il se débrouille plutôt bien. La bibliothèque n'est autre que de Zdog de Dave DeSandro .

Dans cet article, je vais vous présenter Zdog et vous montrer quelques démonstrations mignonnes réalisées par des développeurs incroyables.

Intéressons-nous!

Qu'est-ce que Zdog

DeSandro explique le fonctionnement de Zdog sur le site Web dédié de la bibliothèque:

Zdog est un moteur JavaScript 3D pour ] et SVG. Avec Zdog, vous pouvez concevoir et restituer des modèles 3D simples sur le Web. Zdog est un pseudo moteur 3D . Ses géométries existent dans l'espace 3D, mais sont rendues sous forme de formes plates. Cela rend Zdog spécial.

En d’autres termes, vous pouvez concevoir, afficher et animer des modèles 3D basés sur SVG ou .

Zdog est petit (2 100 lignes de code pour la bibliothèque entière, 28 Ko minifiée) et convivial pour les développeurs (vous pouvez rapidement l'implémenter à l'aide de son API simple et déclarative).

Bien démarrer avec Zdog

Comme c'est le Dans la plupart des bibliothèques JavaScript, vous pouvez inclure Zdog dans votre projet en…

• en téléchargeant simplement une copie de la bibliothèque dans votre environnement local à partir de ce lien: https://unpkg.com/ zdog@1/dist/zdog.dist.min.js ( https://unpkg.com/zdog@1/dist/zdog.dist.js pour la version non arrêtée); [19659014] Récupération de la bibliothèque à partir d’un CDN: https://unpkg.com/zdog@1/dist/zdog.dist.min.js
• ou en tapant npm install zdog si vous utilisez npm

Voici la démonstration officielle de Hello World sur CodePen pour vous permettre de démarrer immédiatement avec la bibliothèque:

Voir le stylo
Zdog – Bonjour toile du monde de Dav e DeSandro ( @desandro )
sur CodePen .

DeSandro propose un guide de démarrage génial, que je vais utiliser pour vous donner une idée. comment fonctionne la bibliothèque et quels résultats vous pouvez en attendre.

Comment Zdog fonctionne

Commençons par créer un cercle SVG statique.

Le code HTML n'est qu'un élément SVG que vous pouvez utiliser comme wrapper. Si vous préférez créer votre graphique Zdog à l'aide de l'élément canvas, remplacez simplement la balise svg par la balise canvas :

Maintenant, saupoudrez de CSS sur l'élément SVG: [19659024] #circle {
      couleur de fond: # 081d3f;
      largeur: 100vw;
      hauteur: 100vh;
    }

Enfin, le JavaScript:

     / * crée une instance du Zdog
    Cours d'illustration * /
    let circle = new Zdog.Illustration ({
      élément: '#circle'
    })

    / * crée une instance du
    Classe de forme Zdog Ellipse * /
    new Zdog.Ellipse ({
      // ajoute la forme au cercle
      addTo: cercle,
      // définir plus de propriétés
      diamètre: 20
      accident vasculaire cérébral: 20,
      couleur: '#ccc'
    })

    // affiche la scène
    circle.updateRenderGraph ()

Pour dessiner des graphiques, vous devez créer des instances de classes Zdog. Illustration est la classe de premier niveau qui traite de l'élément ou . Les formes que vous créez pour votre scène seront des enfants de l'instance de classe Illustration .

Ellipse est une classe de forme. Vous créez une nouvelle instance de la classe de forme Ellipse et l'ajoutez à votre conteneur, dans le cas présent à l'aide de la méthode addTo () . Zdog propose de nombreuses formes prédéfinies comme rect polygone etc. Pour créer votre forme personnalisée utilisez la classe Forme et définissez ses points de tracé. Vous pouvez ajouter d'autres propriétés à votre forme, comme de diamètre trait et de couleur . Pour plus de propriétés, consultez l’API de Zdog pour la classe Shape .

Pour afficher votre graphique à l'écran, appelez la méthode updateRenderGraph () sur votre instance de circle .

Voici à quoi devrait ressembler votre cercle:

Voir le stylo
Exemple de cercle statique Zdog de Maria Antonietta Perna ( @antonietta )
sur CodePen .

Animation et déplacement avec Zdog

L’animation requiert que votre instance de cercle soit restituée sur chaque image. Pour cela, vous utilisez .requestAnimationFrame () comme ceci:

     function animate () {
      / * augmente progressivement
      la rotation sur l'axe des ordonnées * /
      circle.rotate.y + = 0.03
      // re-rendre le graphique
      circle.updateRenderGraph ()
      // animer l'image suivante
      requestAnimationFrame (animer)
    }

    animer()

Zdog vous permet d'ajouter rapidement des fonctionnalités de glissement à votre graphique. Voici ce que vous devez faire si vous souhaitez arrêter l’animation au début du déplacement et reprendre l’animation une fois le déplacement terminé.

Tout d'abord, définissez un drapeau isSpinning sur true :

     let isSpinning = true

Revenez ensuite à votre exemple de cercle de la classe Illustration et définissez la propriété dragRotate sur true . En outre, basculez le drapeau à l’intérieur des méthodes surDragStart () et surDragEnd () de sorte que lorsque le déplacement commence, le drapeau est défini sur false et lorsque en faisant glisser les extrémités, il est remis à true :

     let circle = new Zdog.Illustration ({
      élément: '#circle',
      dragRotate: true,
      onDragStart () {
        isSpinning = false
      },
      onDragEnd () {
        isSpinning = true
      }
    })

Enfin, ajustez la fonction animate () en ajoutant cette instruction conditionnelle en haut de sorte que la rotation n'ait lieu que si le drapeau isSpinning est défini sur :

     if (isSpinning) {
      circle.rotate.y + = 0.03
    }

Voici la démonstration qui fonctionne, regardez-la:

Voir le stylo
Animation Zdog et exemple traînant de Maria Antonietta Perna ( @antonietta )
sur CodePen .

Ressources et démonstrations

Ce n’est que la pointe de l’iceberg de tous les graphismes et animations étonnants que vous pouvez créer avec Zdog. Vous pouvez également le combiner avec d'autres bibliothèques telles que GreenSock pour des résultats encore plus stupéfiants.

Voici un ensemble de ressources et de collections de démonstration où vous pouvez en savoir plus sur ce dernier ajout à l'espace de conception et d'animation réalisé dans le code:

• Site Web de Zdog où vous trouverez tous les Détails sur l'API, d'autres démonstrations, procédures pas à pas, etc.
• Holy Zdog une entrée de blog CodePen remplie de démonstrations basées sur Zdog
• Made with Zdog une collection CodePen de démos basés sur Zdog
• Made with Zdog une collection de démos géniales de Twitter, toutes évidemment réalisées avec… Zdog

Où sont vos créations Zdog?

Maria Antonietta Perna est corédactrice de la chaîne HTML / CSS de SitePoint et développeur web front-end. Elle aime bricoler avec les normes CSS rigoureuses et est curieuse d’apprendre des approches pédagogiques du code frontal. Lorsqu'elle ne code pas pour le Web ou n'écrit pas pour le Web, elle aime les livres de philosophie, les longues promenades et la bonne nourriture.