Je souhaite obtenir des informations sur une formation complète concernant le thème DIVI dispensé
par un organisme de formation certifié par l’état.
Que la formation soit finançable par mon CPF (idéalement) ou autre


Le design plat est excellent, mais les éléments 3D amènent les mises en page de conception Web à un nouveau niveau. Les sites Web avec des graphiques 3D animés et des scènes 3D interactives sont de plus en plus courants. Les clients veulent maintenant ces types de conceptions sur leurs sites Web et vous les demanderont. Apprendre à intégrer la conception 3D dans vos projets de conception Web ne fera qu’améliorer votre cheminement de carrière et attirer plus de clients. Heureusement, les concepteurs et développeurs de Divi disposent de ressources comme Three.js pour ajouter des éléments 3D personnalisés à leurs sites Web.

Dans cet article, nous allons plonger dans les bases de Three.js et expliquer pourquoi l’ajout d’éléments 3D à vos sites Web est un excellent choix. Oui, même vos sites Web Divi. Pour démarrer avec Three.js, vous aurez besoin de quelques connaissances en programmation, en particulier HTML, CSS et Javascript. Si vous apprenez encore à programmer, suivez le didacticiel étape par étape sur le site Web Three.js depuis le début. Si vous ne connaissez pas la terminologie pour ajouter le code, de nombreux didacticiels sont disponibles pour vous guider à travers les étapes techniques. Je vous suggère de regarder des vidéos, peut-être de suivre un cours sur Skillshare ou Udemy pour avoir une idée de la façon d’incorporer la bibliothèque Three.js dans vos conceptions.

Commençons.

Qu’est-ce que Three.js?

Qu’est-ce que Three.js?

Three.js est une bibliothèque 3D javascript qui -, , Les moteurs de rendu CSS3D et WebGL. Il apporte des conceptions 3D à votre navigateur sans avoir besoin d’un plugin. La bibliothèque vous permet de créer des éléments 3D simples, des interactions 3D complexes et des jeux animés créatifs. Three.js est une bibliothèque open source avec un référentiel Github où les utilisateurs peuvent partager leurs propres créations Three.js.

De tous les moteurs de rendu couverts par Three.js, le plus couramment utilisé est WebGL. Créer des éléments 3D avec WebGL seul nécessite beaucoup de lignes de code et beaucoup de connaissances mathématiques. Three.js facilite grandement la création et le rendu d’une scène avec WebGL.

Comprendre une scène 3D et la terminologie Three.js

Pour créer une animation 3D avec Three.js, vous devez d’abord comprendre comment une scène 3D est mise en place. Les trois éléments requis pour créer un décor 3D sont les suivants:

  1. La scène
  2. L’appareil photo
  3. Le moteur de rendu

le scène C’est ici que vous configurez tous les éléments 3D que Three.js affichera. Visuellement, cela ressemble à une scène de théâtre ou à une télévision. les caméra est le point de vue de la scène et comment un humain verrait techniquement les éléments de la scène. le Renderer met tout ensemble et dessine la scène. Si vous maîtrisez l’animation 3D, vous reconnaîtrez sûrement cela comme la norme pour la mise en place d’une scène.

Une fois la scène mise en place, des objets y sont placés. Les objets sont créés en trois étapes:

  1. La géométrie
  2. Le matériel
  3. Le réseau

le géométrie d’un objet est le squelette ou le contour d’une forme. Pour donner à la géométrie une couleur ou une texture, le Matériel est appliqué. La combinaison de la géométrie et du matériau s’appelle un Tissu en maille.

La bibliothèque Three.js possède déjà de nombreuses géométries de base que vous pouvez utiliser. Ils n’ont pas besoin d’être construits à partir de zéro. Tout ce que vous avez à faire est de l’appeler depuis la bibliothèque dans votre code, puis de le personnaliser. En plus d’utiliser des codes hexadécimaux pour les couleurs comme matériau, vous pouvez créer des textures avec des images ou les trouver dans des bibliothèques de textures.

Après avoir configuré la scène et ajouté la géométrie, ajoutez des fonctions pour éclairer la scène, animer les objets, etc. En plus des objets de base disponibles dans la bibliothèque Three.js, vous pouvez également télécharger d’autres images 3D à partir de bibliothèques en ligne ou de celles que vous créez dans Blender.

Premiers pas avec Three.js

Il ne pourrait pas être plus facile de vous familiariser avec Three.js. Le site Web Three.js contient toute la documentation dont vous avez besoin pour comprendre le fonctionnement de la bibliothèque et comment l’utiliser.

Vous pouvez trouver une version en direct du code pour les Three.js les plus faciles à utiliser sur le site Web Three.js et sur leur github. Vous utilisez JSFiddle, mais vous pouvez également voir que cela fonctionne sur CodePen ou Codesandbox.io

Je vous suggère de suivre les étapes du site Web Three.js pour vraiment comprendre comment tout cela fonctionne. Soit avec Codepen, votre terminal ou un logiciel de codage préféré. L’ensemble de la bibliothèque Three.js est disponible sur le site Site Web de Threejs.org à utiliser une fois que vous avez défini votre scène et remarqué ce qui peut être fait. Vous trouverez ci-dessous l’application de base Three.js fonctionnant sur JSFiddle. Cliquez sur « Modifier avec JSFiddle » pour jouer avec le code.

Ressources d’apprentissage Three.js

Étant donné que Three.js est une API open source, les choses se passent toujours dans leur référentiel GitHub. Cela signifie qu’il y a toujours beaucoup de nouvelles choses à apprendre. Heureusement, ils ont créé un manuel numérique constamment mis à jour pour refléter les changements. Vous pouvez le trouver sur removethreejs.com. C’est de loin la meilleure ressource sur le marché. Si vous avez besoin d’un guide étape par étape sur la configuration de l’application et l’utilisation des ressources de la bibliothèque, c’est un excellent guide Cours sur le partage des compétences Cela vous guidera à travers toutes les étapes de la documentation Three.js.

De même, ce tutoriel YouTube vous montre les bases de la configuration d’une scène avec Three.js, mais suppose que vous avez une compréhension de base du développement Web.

Si vous souhaitez vous plonger dans Three.js et WebGL, ce cours Udemy explique tout et promet que vous serez en mesure de créer du contenu 3D couramment jusqu’à la fin.

Êtes-vous à la recherche d’un didacticiel délicat, rapide et sale? Pas à pas Tutoriel de code sur CreativeBloq est exactement ce dont vous avez besoin.

Exemples de Three.js

Il n’y a rien de tel que l’inspiration pour créer vos propres conceptions 3D avec Three.js. Pour voir des créations Three.js assez incroyables, facile aller sur leur site web et explorez.

Utiliser Three.js avec Divi

Utiliser Three.js avec Divi est assez simple. Tout ce que vous avez à faire est d’ajouter la bibliothèque javascript à vos fichiers de projet et de l’ajouter à votre HTML. Pour ajouter une application à une mise en page Divi, créez d’abord la conception 3D séparément sur votre logiciel de codage préféré ou sur le terminal de votre ordinateur. Lorsque la construction est terminée, copiez le javascript dans un module de code. Assurez-vous d’ouvrir et de fermer le



Source link

Recent Posts