Comment créer un panorama d’une photo vue 360 avec framework Three.js

Apprenez à réaliser un panorama photo avec une vue sur 360° avec le framework JavaScript three.js

Tout est dans la vidéo.

[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]

Comment créer un panorama d’une photo vue 360 avec framework threejs

Bonjour à tous et bienvenu sur Développement Facile.

Dans cette nouvelle vidéo vous allez toujours apprendre à créer des applications JavaScript performantes avec l’aide des Framework donc là ce cours est dédié au Framework three.JS, je ne sais pas si vous le connaissez, c’est un Framework qui permet de créer des applications JavaScript HTML 5, beaucoup plus rapidement, beaucoup plus simplement, grâce à toutes les fonctionnalités dédiées.

Je vais vous montrer quelques exemples de ce qu’il est capable de faire, par exemple ceci, les attributs personnalisés qui permettent de faire des effets comme cela, vous avez il y a tout un tas de fonctionnalités et même de la modélisation, de texture, la gestion un petit peu des vidéos, mais en même temps possibilité de bouger comme ceci donc c’est assez impressionnant, des animations, donc l’effet avec des lunettes, vous avez, j’ai vu passer le loading des chargements, donc des loaders, vous pouvez charger des éléments, là on voit les effets lumière donc ça c’est collada c’est tous les logiciels qui permettent de faire la modélisation 3D donc, vous avez vu c’est un framework extrêmement puissant si vous regardez le code source, il est pas si énorme que ça, pas si difficile que ça, et bien là je vais vous montrer un exemple, vraiment un exemple très simple pour effectuer un panorama avec une simple photo, vous avez une photo et vous l’affichée avec cette application, ça va vous permettre de regarder, de faire une sorte d’effet comme si on se baladait dans la photo, en fait, ça c’est juste une seule photo quand vous téléchargerez le code source à la fin de ce cours vidéo, il y a un dossier avec des simples photos qui deviennent des sortes d’effets de panoramas ou on est immergés dedans.

Comment ça se passe au niveau du code ?

Vous incluez le framework three en minimum, en version compressée, votre fichier main, toujours avec le cache désactivé, vous avez des variables du panorama, donc contrôle manuel du panorama j’ai mis tout les commentaires en français, la caméra, l’objet de rendu, la scène graphique, la sphère matérielle et dès que le DOM est chargé on appelle la fonction main qui va s’occuper de construire le diaporama, donc vous avez un tableau qui contient le lien vers toutes les images, ensuite vous choisissez une image aléatoirement tout simplement, et vous construisez votre moteur de rendu avec la taille de la fenêtre d’affichage, vous ajoutez le panorama juste après la balise ID game div, donc ici après cette balise vous ajoutez votre diaporama avec l’instruction open child, vous créez votre scène, la caméra, la sphère géométrique, la sphère matérielle, vous mettez des écouteurs sur mose down et mose up, c’est-à-dire mose down on arrête le défilement du diaporama, c’est en manuel, mose up on reprend le défilement du diaporama et key up, lorsque l’utilisateur appuie sur n’importe quelle touche du clavier.

Là c’est le rendu du panorama, si on est en mode automatique ont fait un petit déplacement comme ceci, voilà, il y a un déplacement qui a été effectué, donc cette fonction est appelée en continue rendor diaporama, ensuite qu’est-ce que vous avez, vous mettez à jour la caméra en fonction du mouvement de l’image tout simplement, lorsque vous appuyez sur la souris, déjà vous désactivez le contrôle automatique, vous sauvegardez les différentes valeurs et quand vous bougez la souris, vous mettez à jour ses différentes valeurs qui vont permettre de déplacer le diaporama tout simplement. Là request animation 5 je vous l’ai précisé, ça enregistre la fonction pour un appelle récurrent à chaque image, voilà, ensuite quand on relâche la souris, l’utilisateur clique sur la souris, on sauvegarde les valeurs, on active le mode manuel, il bouge la souris on met à jour les différentes valeurs donc automatiquement la caméra vu que cette fonction est appelée à chaque image, elle va se mettre à jour, l’utilisateur relâche la souris, on repasse en mode automatique, j’appuie sur la souris on est en mode manuel, tout simplement, je relache la souris on repasse en mode automatique, la je relâche mode automatique.

Et là si l’utilisateur appui sur une touche, on sélectionne une nouvelle image et on la met en diaporama en faisant un load texture de l’image. Voilà c’est aussi simple que ça, cette petite application qui est faite grâce aux Framework three, vous avez tout un tas de fonctionnalités donc je vous invite vraiment à découvrir ce framework, je ferai quelques tutoriels, je prendrai plusieurs exemples pour créer des applications avec ce framework dans les prochains cours, en attendant sous cette vidéo comme d’habitude vous trouverez le code source complet à télécharger donc commenté en français bien évidemment, si vous avez des questions posez les directement sous ce cours vidéo, les experts de développement facile vous répondront avec grand plaisir, et maintenant juste au-dessus de ce cours, il y a une bannière, donc un lien cliquable qui s’affiche et je vous invite à cliquer dessus parce ce que vous allez être redirigés vers une deuxième vidéo c’est-à-dire dans cette deuxième vidéo vous allez apprendre à aller beaucoup plus loin dans la création d’applications performantes avec JavaScript HTML 5, vous verrez la programmation orientée objet, la programmation événementielle, les modèles de conceptions, des Framework pour créer des jeux HTML 5 JavaScript sur les Smartphones, les tablettes et les ordinateurs, vous apprendrez dans le détail la méthode développement facile, cette méthode vous permet travailler en équipe sur vos projets JavaScript HTML 5, de coder deux à trois fois plus rapidement, de réduire les bugs de 90 % à la source grâce à une architecture d’applications conçue, solide, souple et évolutive, donc je vous explique, je vous dis tout dans la deuxième vidéo en plus y’a les experts de la méthode développement facile donc de l’équipe développement facile qui seront à votre disposition pour assurer votre accompagnement, vous répondre en cas de questions, si vous avez des difficultés à appliquer tel ou tel cours, ils seront là pour vous aider donc juste au-dessus de ce cours cliquez simplement sur la bannière, sur le lien cliquable pour voir cette deuxième vidéo, je vous dit à tout de suite.

[/ppmtoggle][/ppmaccordion]

Télécharger l’exemple de panorama 360°

Retrouvez le code source commenté du panorama avec vue à 360°

Montrez vos panoramas ici

Utilisez la zone commentaire pour poster les liens de vos panoramas réaliser avec le framework three.js