Share
Three.js est une bibliothèque / API JavaScript open source utilisée pour créer et afficher des images informatiques 3D animées sur un navigateur Web, compatible avec l'élément de toile HTML5, WebGL et SVG. Dans cet article, nous allons explorer les fonctionnalités de ce moteur et partager des ressources et des suggestions pour vous aider à commencer à développer des jeux avec ce dernier..
Depuis que Ricardo Cabello a publié pour la première fois Three-js sur GitHub en 2010, la base de code a été constamment maintenue et améliorée par une communauté de plus en plus nombreuse et active. L'ensemble des fonctionnalités intégrées est vaste et comprend:
Plus de 100 exemples illustrant ces fonctionnalités (et bien plus encore) sont inclus dans le référentiel principal et de nombreux autres sites fournissent des collections d'exemples avec le code source disponible. De plus, la bibliothèque étant écrite en Javascript, il est facile de se lancer et de déployer son travail..
Un jeu de course futuriste créé par Thibaut Despoulain:
Un jeu de course automobile créé par Jasmine Kent:
Des articles sur le développement peuvent être trouvés sur le blog de Jasmine sur Gamasutra.
Un jeu de plateforme 2.5D rendu en 3D, avec un éditeur de niveau live intégré, créé par Mario Gonzalez:
Un jeu de marbre / football créé par Jérôme Etienne:
Un jeu de labyrinthe créé par Rye Terrell:
Un jeu de ping-pong 3D intégrant le chat vidéo au sein du jeu, créé par Google:
Pour plus d'informations, consultez la page Chrome Experiments du jeu et cet article dans les coulisses..
Un parcours interactif créé par Walt Disney et UNIT9
Plus d'informations sont disponibles sur la page Chrome Experiments du jeu..
Étant donné que Three.js est une bibliothèque JavaScript, la configuration de votre environnement de développement est particulièrement simple: vous n'avez besoin que d'un éditeur de texte et d'un navigateur Web. Cela étant dit, les éditeurs de texte dotés de fonctionnalités telles que la coloration syntaxique / pliage, la mise en correspondance des crochets, un mappage de document, etc., tels que Notepad ++ ou Sublime Text, offrent une meilleure expérience de codage..
En ce qui concerne les navigateurs Web, Google Chrome et Mozilla Firefox offrent une excellente prise en charge de WebGL. Google Chrome contient un ensemble particulièrement utile d'outils de développement intégrés qui peuvent grandement simplifier le processus de flux de travail, tels qu'une console pouvant être utilisée pour le débogage et l'inspection de valeurs et d'objets Javascript, ainsi que des paramètres de Workspace permettant de modifier et d'enregistrer des fichiers source. depuis le navigateur. Plus de détails peuvent être trouvés sur le site Chrome DevTools.
Pointe: Il est également possible d'écrire du code en utilisant Three.js entièrement en ligne, en utilisant des services tels que jsFiddle, comme illustré par cet exemple. Cependant, cette option est généralement utilisée uniquement pour partager des exemples ou des démonstrations avec de petites quantités de code..
Pour configurer Three.js, rendez-vous d'abord dans le référentiel GitHub. Il y aura un bouton "Download ZIP" qui vous permettra de télécharger tout le code du référentiel sous forme de fichier ZIP. (Il existe d'autres alternatives, telles que le clonage ou le bricolage du référentiel à l'aide de Git, qui sont inutiles pour l'utilisateur moyen. Ces options ne sont utiles que si vous envisagez de contribuer au code source ou à la documentation en ligne.)
Articles SimilairesUne fois que vous avez téléchargé et décompressé le fichier dans un répertoire de votre choix, il vous reste une étape importante avant de pouvoir afficher la plupart des exemples sur votre propre ordinateur. De nombreux projets Three.js impliquent le chargement de contenu à partir de fichiers externes (tels que des images), mais pour des raisons de sécurité, les navigateurs Web limitent ce comportement par défaut. Les deux options permettant de résoudre ce problème sont de modifier les paramètres de sécurité de votre navigateur Web ou d’exécuter des fichiers à partir d’un serveur local..
La première option est la plus simple (par exemple, il est possible de modifier les paramètres de Google Chrome dans Windows en créant un raccourci pour Chrome et en modifiant le chemin d'accès afin d'inclure l'indicateur. --autoriser-fichier-accès-de-fichiers). Les instructions pour les deux options se trouvent sur le wiki officiel, dans la page intitulée Comment exécuter les tâches localement.
Three.js est écrit en Javascript, il est donc recommandé de posséder des connaissances pratiques de cette langue. Il existe une multitude de ressources disponibles gratuitement sur Internet pour cela; Deux ressources interactives particulièrement remarquables sont:
Pour apprendre à configurer une scène de base dans Three.js (y compris une discussion sur les scènes, les caméras, les rendus, les maillages et la boucle d’animation, visitez le manuel officiel. Une autre introduction intéressante à la création d’une scène de base est l’article Getting Started. avec Three.js de Paul Lewis
Une introduction plus complète aux capacités de Three.js est l’excellente présentation de James Williams (vidéo et diaporama) dans Introduction to WebGL et Three.js..
La documentation Three.js, disponible à l'adresse http://threejs.org/docs/, est en cours mais constitue un bon point de départ pour se faire une idée de la plupart des fonctions disponibles..
Une façon plus complète d’en savoir plus sur le fonctionnement interne de la bibliothèque consiste à parcourir le code source de la collection officielle d’exemples à l’adresse http://threejs.org/examples/, qui sont souvent intitulés par l’aspect de la bibliothèque qui leur est le plus utile. caractéristique en évidence. Une autre ressource, composée d'exemples simplifiés et parfaitement commentés écrits pour les débutants, est la collection sur http://stemkoski.github.io/Three.js/. De plus, de nombreux projets Three.js sont annoncés sur Twitter avec le hashtag #ThreeJS ou sur le subreddit Three.js.
Voici deux collections particulièrement impressionnantes et inspirantes de projets avancés Three.js:
Certains sites Web et blogs traitant de développement et présentant fréquemment des projets Three.js incluent:
Pour en savoir plus sur les fondements de l'infographie 3D, consultez Interactive 3D Graphics, un cours en ligne gratuit dispensé par Eric Haines, qui propose des conférences vidéo et des exercices de programmation interactifs utilisant Three.js..
Si vous devez incorporer des fonctionnalités autres que celles fournies par Three.js, il est facile (et pratique courante) d'intégrer des bibliothèques Javascript supplémentaires, telles que:
Si vous souhaitez créer des effets graphiques avancés autres que ceux inclus dans Three.js, vous devez apprendre à écrire des shaders, fonctions qui s'exécutent directement sur le processeur graphique. Deux excellentes introductions aux shaders, écrites spécifiquement pour les utilisateurs de Three.js, sont:
Enfin, si vous souhaitez déployer votre projet pour Android ou iOS, CocoonJS de Ludei est une plate-forme qui fait exactement cela. Le processus est bien documenté et relativement facile, car la plupart du travail est automatisé par le système de compilation Cloud de CocoonJS..
Si vous avez une question que vous ne pouvez pas comprendre en consultant les exemples ou les ressources ci-dessus, Stack Overflow, le premier site de questions et réponses pour les programmeurs professionnels et enthousiastes, est à sa disposition. Commencez par chercher si votre question a déjà été posée. sinon, créez un compte et demandez-le-là!
Avec ces ressources à votre disposition, il est temps de commencer à créer! Three.js a une communauté active et dynamique, vous devriez donc toujours vous sentir libre de poser des questions, de participer aux discussions et de présenter votre travail. Bonne chance à vous dans vos efforts!
Accentsconagua