360 Degree Product Viewer in HTML5 Canvas

Developer
Angel Komander
Size
3,218 Kb
Views
60,720
  1. 360 Degree Product Viewer in HTML5 Canvas Previews
  2. 360 Degree Product Viewer in HTML5 Canvas HTML Codes
  3. 360 Degree Product Viewer in HTML5 Canvas CSS Codes
  4. 360 Degree Product Viewer in HTML5 Canvas JS Codes

How do I make an 360 degree product viewer in html5 canvas?

What is a 360 degree product viewer in html5 canvas? How do you make a 360 degree product viewer in html5 canvas? This script and codes were developed by Angel Komander on 17 October 2022, Monday.

360 Degree Product Viewer in HTML5 Canvas Previews
IQ Test

360 Degree Product Viewer in HTML5 Canvas - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>360 Degree Product Viewer in HTML5 Canvas</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <link href='https://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="https://code.createjs.com/easeljs-0.6.0.min.js"></script>
<canvas id='canvas' width="465" height="465"></canvas> <script src="js/index.js"></script>
</body>
</html>

360 Degree Product Viewer in HTML5 Canvas - Script Codes CSS Codes

body { background-color: #CCCCCC; margin: 0; padding: 0; overflow: hidden;
}
canvas { position: absolute;
}

360 Degree Product Viewer in HTML5 Canvas - Script Codes JS Codes

var stage;
function init() {	var canvas = document.getElementById("canvas"); if (!canvas || !canvas.getContext) return;	stage = new createjs.Stage(canvas); stage.enableMouseOver(true); stage.mouseMoveOutside = true; createjs.Touch.enable(stage); var imgList = ["http://jsrun.it/assets/N/b/D/X/NbDXj.jpg", "http://jsrun.it/assets/f/K/7/y/fK7yE.jpg", "http://jsrun.it/assets/j/U/q/d/jUqdG.jpg", "http://jsrun.it/assets/q/o/4/j/qo4jP.jpg", "http://jsrun.it/assets/i/Q/e/1/iQe1f.jpg", "http://jsrun.it/assets/5/k/y/R/5kyRi.jpg", "http://jsrun.it/assets/x/T/I/h/xTIhA.jpg", "http://jsrun.it/assets/4/X/G/F/4XGFt.jpg", "http://jsrun.it/assets/6/7/n/r/67nrO.jpg", "http://jsrun.it/assets/k/i/r/8/kir8T.jpg", "http://jsrun.it/assets/2/3/F/q/23Fqt.jpg", "http://jsrun.it/assets/c/l/d/5/cld59.jpg", "http://jsrun.it/assets/e/J/O/f/eJOf1.jpg", "http://jsrun.it/assets/o/j/Z/x/ojZx4.jpg", "http://jsrun.it/assets/w/K/2/m/wK2m3.jpg", "http://jsrun.it/assets/w/K/2/m/wK2m3.jpg", "http://jsrun.it/assets/4/b/g/V/4bgVf.jpg", "http://jsrun.it/assets/4/m/1/8/4m18z.jpg", "http://jsrun.it/assets/4/w/b/F/4wbFX.jpg", "http://jsrun.it/assets/4/k/T/G/4kTGQ.jpg", "http://jsrun.it/assets/s/n/C/r/snCrr.jpg", "http://jsrun.it/assets/7/f/H/u/7fHuI.jpg", "http://jsrun.it/assets/v/S/d/F/vSdFm.jpg", "http://jsrun.it/assets/m/g/c/S/mgcSp.jpg", "http://jsrun.it/assets/t/L/t/P/tLtPF.jpg", "http://jsrun.it/assets/j/7/e/H/j7eHx.jpg", "http://jsrun.it/assets/m/o/8/I/mo8Ij.jpg", "http://jsrun.it/assets/n/P/7/h/nP7ht.jpg", "http://jsrun.it/assets/z/f/K/S/zfKSP.jpg", "http://jsrun.it/assets/2/3/4/U/234U6.jpg", "http://jsrun.it/assets/d/Z/y/m/dZymk.jpg"]; var images = [], loaded = 0, currentFrame = 0, totalFrames = imgList.length; var rotate360Interval, start_x; var bg = new createjs.Shape(); stage.addChild(bg); var bmp = new createjs.Bitmap(); stage.addChild(bmp); var myTxt = new createjs.Text("HTC One", '24px Ubuntu', "#ffffff"); myTxt.x = myTxt.y =20; myTxt.alpha = 0.08; stage.addChild(myTxt); function load360Image() { var img = new Image(); img.src = imgList[loaded]; img.onload = img360Loaded; images[loaded] = img; } function img360Loaded(event) { loaded++; bg.graphics.clear() bg.graphics.beginFill("#222").drawRect(0,0,stage.canvas.width * loaded/totalFrames, stage.canvas.height); bg.graphics.endFill(); if(loaded==totalFrames) start360(); else load360Image(); } function start360() { document.body.style.cursor='none'; // 360 icon var iconImage = new Image(); iconImage.src = "http://jsrun.it/assets/y/n/D/c/ynDcT.png"; iconImage.onload = iconLoaded; // update-draw update360(0); // first rotation rotate360Interval = setInterval(function(){ if(currentFrame===totalFrames-1) { clearInterval(rotate360Interval); addNavigation(); } update360(1); }, 25); } function iconLoaded(event) { var iconBmp = new createjs.Bitmap(); iconBmp.image = event.target; iconBmp.x = 20; iconBmp.y = canvas.height - iconBmp.image.height - 20; stage.addChild(iconBmp); } function update360(dir) { currentFrame+=dir; if(currentFrame<0) currentFrame = totalFrames-1; else if(currentFrame>totalFrames-1) currentFrame = 0; bmp.image = images[currentFrame]; } //------------------------------- function addNavigation() { stage.onMouseOver = mouseOver; stage.onMouseDown = mousePressed; document.body.style.cursor='auto'; } function mouseOver(event) { document.body.style.cursor='pointer'; } function mousePressed(event) { start_x = event.rawX; stage.onMouseMove = mouseMoved; stage.onMouseUp = mouseUp; document.body.style.cursor='w-resize'; }	function mouseMoved(event) { var dx = event.rawX - start_x; var abs_dx = Math.abs(dx); if(abs_dx>5) { update360(dx/abs_dx); start_x = event.rawX; }	} function mouseUp(event) { stage.onMouseMove = null; stage.onMouseUp = null; document.body.style.cursor='pointer';	} function handleTick() { stage.update(); } document.body.style.cursor='progress'; load360Image(); // TICKER createjs.Ticker.addEventListener("tick", handleTick); createjs.Ticker.setFPS(60); createjs.Ticker.useRAF = true;
}
// Init
window.addEventListener('load', init, false);
360 Degree Product Viewer in HTML5 Canvas - Script Codes
360 Degree Product Viewer in HTML5 Canvas - Script Codes
Home Page Home
Developer Angel Komander
Username AngelKrak
Uploaded October 17, 2022
Rating 3.5
Size 3,218 Kb
Views 60,720
Do you need developer help for 360 Degree Product Viewer in HTML5 Canvas?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Angel Komander (AngelKrak) Script Codes
Name
Awesome Menu Bar
Page plugin of Minicajas y estuches
3D cube with reflection
Slider - CSS3 image slider with stylized thumbnails
Carousel Slider
Fondo de Video HTML5
Vertical Scrollbars CSS DIV
Sheet Slider, slider responsive usando solo CSS3
Spoiler JS Dynamic Spoiler Button
Optimizing jQuery Spoiler Button
Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!