De nombreux sites Web commerciaux prennent désormais en charge des images panoramiques à 360 ° d'objets réels et vous pouvez choisir de visualiser des échantillons à 360 degrés. Il s'agit d'une bonne expérience de consommation pour les acheteurs. Il existe de nombreux plug-ins de ce type sur Internet basés sur jQuery, certains sont payants. ou gratuit Oui, il existe en fait un plug-in très utile appelé 3deye.js. Le plug-in prend en charge les terminaux de bureau et mobiles iOS et Android. Son programme de démonstration : http://www.voidcanvas.com/demo/28823deye/.
Après avoir joué moi-même à cette démo, j'ai suivi ses idées et implémenté des fonctions similaires en utilisant HTML5 Canvas.
Alors parlons d’abord du principe de son panorama à 360 degrés1. Tout d'abord, vous devez prendre des photos de l'objet réel. L'intervalle est de faire pivoter chaque photo de 15 degrés, donc 23 photos sont nécessaires.
2. Une fois la photo prête, essayez de choisir le format JPG et recadrez-la à la taille appropriée.
3. Toutes les photos sont préchargées en JavaScript et la précision du chargement peut être affichée en conjonction avec la barre de progression.
4. Créez/récupérez l'objet Canvas, ajoutez des événements d'écoute de la souris et dessinez différentes images de manière appropriée lorsque la souris se déplace vers la gauche et la droite. Le principe général est le suivant, simple !
Code d'implémentation :
<!DOCTYPE html> <html> <head> <meta charset=utf-8> <title>Vue complète à 360 degrés</title> <script> var ctx = null; // variable globale contexte 2d var frame = 1; / 23 var largeur = 0; var hauteur = 0; var démarré = false; var images = new Array(); var startupX = -1; var toile = document.getElementById (fullview_canvas); toile.width = 440;// fenêtre.innerWidth; toile.hauteur = 691;//fenêtre.innerHeight; largeur = toile.largeur; .getElementById('loadProgressBar'); for(var i=1; i<24; i++) { bar.value = je; si(i<10) { images[i] = nouvelle Image(); images[i].src = 0 + i + .jpg } else { images[i] = nouvelle Image(); .src = i + .jpg; } } ctx = canvas.getContext(2d); // événement de souris canvas.addEventListener(mousedown, doMouseDown, false); canvas.addEventListener('mousemove', doMouseMove, false); canvas.addEventListener('mouseup', doMouseUp, false); // chargé( // frame = 1 frame = 1; ) { redraw(); bar.style.display = 'aucun'; } } function doMouseDown(event) { var x = event.pageX; event.pageY; var canvas = event.target; var loc = getPointOnCanvas(canvas, x, y); console.log(souris vers le bas au point( x: + loc.x + , y: + loc.y + )); démarréX = loc.x; démarré = vrai; } function doMouseMove(event) { var x = event.pageX; var y = event.pageY; var loc = getPointOnCanvas(canvas, x, y); if (démarré) { var count = Math.floor(Math.abs((startedX - loc.x)/30)); loc.x)/30); while(count > 0) { console.log(frameIndex = + frameIndex); if(frameIndex > 0) { frameIndex--; frame++; } else if(frameIndex < 0) { frameIndex++; else if(frameIndex == 0) { break; <= 0) { frame = 23; } redraw(); } } } function doMouseUp(event) { console.log(mouse up now); (démarré) { doMouseMove(event); startupX = -1; start = false; } } function getPointOnCanvas(canvas, x, y) { var bbox = canvas.getBoundingClientRect(); toile.width / bbox.width), y : y - bbox.top * (canvas.height / bbox.height) } ; } functionloaded() { setTimeout( update, 1000/8 } function redraw() { // var imageObj = document.createElement(img); // var imageObj = new Image(); ; ctx.clearRect(0, 0, largeur, hauteur) ctx.drawImage(imageObj, 0, 0, largeur, hauteur }) function update() { redraw(); if (frame >= 23) frame = 1; setTimeout( update, 1000/8 } </script> </head> <body> <progress id=loadProgressBar value= 0 max=23></progress> <canvas id=fullview_canvas></canvas> <button onclick=loaded()>Lecture automatique</button> </body> </html>Adresse de téléchargement du fichier de démonstration -> fullview.rar
Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.