Muitos sites de compras agora suportam imagens panorâmicas de 360º de objetos reais, e você pode optar por visualizar amostras em qualquer 360º. Esta é uma boa experiência de consumo para os compradores. Existem muitos desses plug-ins na Internet baseados em jQuery, alguns são pagos. ou gratuito. Sim, existe um plug-in muito útil chamado 3deye.js. O plug-in suporta terminais desktop e móveis iOS e Android. Seu programa de demonstração: http://www.voidcanvas.com/demo/28823deye/.
Depois de jogar esta demonstração, segui suas ideias e implementei funções semelhantes usando HTML5 Canvas.
Então, primeiro vamos falar sobre o princípio do seu panorama de 360 graus1. Primeiro, você precisa tirar fotos do objeto real. O intervalo é girar cada foto 15 graus, então são necessárias 23 fotos.
2. Depois que a foto estiver pronta, tente escolher o formato JPG e recorte-a no tamanho adequado.
3. Todas as fotos são pré-carregadas em JavaScript e a precisão do carregamento pode ser exibida em conjunto com a barra de progresso.
4. Crie/obtenha o objeto Canvas, adicione eventos de escuta do mouse e desenhe quadros diferentes adequadamente quando o mouse se move para a esquerda e para a direita. O princípio geral é este, simples!
Código de implementação:
<!DOCTYPE html> <html> <head> <meta charset=utf-8> <title>Visualização completa de 360 graus</title> <script> var ctx = null; // variável global 2d context var frame = 1; / 23 var largura = 0 var altura = 0; var iniciado = falso; var canvas = document.getElementById(fullview_canvas); canvas.width = 440;// window.innerWidth; var bar = document; .getElementById('loadProgressBar'); for(var i=1; i<24; i++) { bar.value = i; if(i<10) { imagens[i] = new Image(); .src = i + .jpg; } } ctx = canvas.getContext(2d); // evento de mouse canvas.addEventListener(mousedown, doMouseDown, false); canvas.addEventListener('mousemove', doMouseMove, false); canvas.addEventListener('mouseup', doMouseUp, false); // carregado(); ) { redraw(); bar.style.display = 'none'; } function doMouseDown(event) { var x = event.pageX; event.pageY; var canvas = event.target; var loc = getPointOnCanvas(canvas, x, y + )); iniciadoX = loc.x; iniciado = true } function doMouseMove(event) { var x = event.pageX; var loc = getPointOnCanvas(canvas, x, y) { var count = Math.floor(Math.abs((startedX - loc.x)/30)); loc.x)/30); while(contagem > 0) { console.log(frameIndex = + frameIndex); frameIndex--; frameIndex == 0) { break; <= 0) { frame = 23; } redraw(); (iniciado) { doMouseMove(event); iniciadoX = -1; iniciado = false } } function getPointOnCanvas(canvas, x, y) { var bbox = canvas.getBoundingClientRect(); canvas.width / bbox.width), y: y - bbox.top * (canvas.height / bbox.height) }; } função carregada() { setTimeout( atualização, 1000/8); função redraw() { // var imageObj = document.createElement(img); // var imageObj = new Image(); ;ctx.clearRect(0, 0, largura, altura) ctx.drawImage(imageObj, 0, 0, largura, altura }); function update() { redraw(); frame++; if (frame >= 23) frame = 1; 0 max=23></progress> <canvas id=fullview_canvas></canvas> <button onclick=loaded()>Reprodução automática</button> </body> </html>Endereço de download do arquivo de demonstração-> fullview.rar
O texto acima é todo o conteúdo deste artigo. Espero que seja útil para o estudo de todos. Também espero que todos apoiem a Rede VeVb Wulin.