Many shopping websites now support 360 panoramic images of real objects, and you can choose to view samples at any 360 degrees. This is a good consumption experience for buyers. There are many such plug-ins on the Internet based on jQuery, some are paid or free. Yes, there is actually a very useful plug-in called 3deye.js. The plug-in supports desktop and mobile terminals iOS and Android. Its demo program: http://www.voidcanvas.com/demo/28823deye/
After playing this demo myself, I followed its ideas and implemented similar functions using HTML5 Canvas.
So first let’s talk about the principle of its 360-degree panorama1. First, you need to take photos of the actual object. The interval is to rotate each photo 15 degrees, so 23 photos are needed.
2. After the photo is ready, try to choose the JPG format and crop it to the appropriate size.
3. All photos are preloaded in JavaScript, and the loading accuracy can be displayed in conjunction with the progress bar.
4. Create/get the Canvas object, add mouse listening events, and draw different frames appropriately when the mouse moves left and right. The general principle is this, simple!
Implementation code:
<!DOCTYPE html> <html> <head> <meta charset=utf-8> <title>Full 360 degree View</title> <script> var ctx = null; // global variable 2d context var frame = 1; / / 23 var width = 0; var height = 0; var started = false; var images = new Array(); var startedX = -1; window.onload = function() { var canvas = document.getElementById(fullview_canvas); canvas.width = 440;// window.innerWidth; canvas.height = 691;//window.innerHeight; width = canvas.width; height = canvas.height; var bar = document .getElementById('loadProgressBar'); for(var i=1; i<24; i++) { bar.value = i; if(i<10) { images[i] = new Image(); images[i].src = 0 + i + .jpg; } else { images[i] = new Image(); images[i] .src = i + .jpg; } } ctx = canvas.getContext(2d); // mouse event canvas.addEventListener(mousedown, doMouseDown, false); canvas.addEventListener('mousemove', doMouseMove, false); canvas.addEventListener('mouseup', doMouseUp, false); // loaded(); // frame = 1 frame = 1; images[frame].onload = function( ) { redraw(); bar.style.display = 'none'; } } function doMouseDown(event) { var x = event.pageX; var y = event.pageY; var canvas = event.target; var loc = getPointOnCanvas(canvas, x, y); console.log(mouse down at point( x: + loc.x + , y: + loc.y + )); startedX = loc.x; started = true; } function doMouseMove(event) { var x = event.pageX; var y = event.pageY; var canvas = event.target; var loc = getPointOnCanvas(canvas, x, y); if (started) { var count = Math.floor(Math.abs((startedX - loc.x)/30)); var frameIndex = Math.floor((startedX - loc.x)/30); while(count > 0) { console.log(frameIndex = + frameIndex); count--; if(frameIndex > 0) { frameIndex--; frame++; } else if(frameIndex < 0) { frameIndex++; frame--; } else if(frameIndex == 0) { break; } if(frame >= 24) { frame = 1; } if(frame <= 0) { frame = 23; } redraw(); } } } function doMouseUp(event) { console.log(mouse up now); if (started) { doMouseMove(event); startedX = -1; started = false; } } function getPointOnCanvas(canvas, x, y) { var bbox = canvas.getBoundingClientRect(); return { x: x - bbox.left * ( canvas.width / bbox.width), y: y - bbox.top * (canvas.height / bbox.height) }; } function loaded() { setTimeout( update, 1000/8); } function redraw() { // var imageObj = document.createElement(img); // var imageObj = new Image(); var imageObj = images[frame] ; ctx.clearRect(0, 0, width, height) ctx.drawImage(imageObj, 0, 0, width, height); } function update() { redraw(); frame++; 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()>Auto Play</button> </body> </html>Demo file download address-> fullview.rar
The above is the entire content of this article. I hope it will be helpful to everyone’s study. I also hope everyone will support VeVb Wulin Network.