@mediaman/three-sixty
v1.0.1
Published
360° library
Downloads
188
Readme
360° library
A library that makes creating a 360° viewer extremely easy.
Features
- Works on desktop and on touch devices
- As many angles as you want
- Single image per angle or multiple angles in multiple sprites possible
- Adjustable speed
- Hotspots for a specified angle range
Installation
npm install --save @mediaman/three-sixtyImporting library
You can import the bundle to use the whole library:
import ThreeSixty from '@mediaman/three-sixty';Inside the browser
You can also use the bundled version directly inside the browser:
<script src="node_modules/@mediaman/three-sixty/dist/three-sixty.bundle.js"></script>Usage
Basic usage
You can specify different sets of images for different media queries. The object key is the breakpoint in px from which the image set should be shown from.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>360°</title>
<link rel="stylesheet" href="node_modules/@mediaman/three-sixty/dist/three-sixty.css">
</head>
<body>
<canvas width="1280" height="720"></canvas>
</body>
</html>const threeSixty = new ThreeSixty(document.getElementsByTagName('canvas')[0], {
angles: 36,
anglesPerImage: 6
});
threeSixty.initialize({
0: [ // The breakpoint from which the image set should be shown
'http://example.com/images/360/image-0.jpg',
'http://example.com/images/360/image-1.jpg',
'http://example.com/images/360/image-2.jpg',
'http://example.com/images/360/image-3.jpg',
'http://example.com/images/360/image-4.jpg',
'http://example.com/images/360/image-5.jpg'
]
});Preloading
You can preload all angle images so that the animation is even smoother when using it the first time.
const threeSixty = new ThreeSixty(document.getElementsByTagName('canvas')[0], {
angles: 36,
anglesPerImage: 6
});
threeSixty.initialize({
0: [
'http://example.com/images/360/image-0.jpg',
'http://example.com/images/360/image-1.jpg',
'http://example.com/images/360/image-2.jpg',
'http://example.com/images/360/image-3.jpg',
'http://example.com/images/360/image-4.jpg',
'http://example.com/images/360/image-5.jpg'
]
});
threeSixty.preload().then(() => console.log('ready to go'));One angle per image
If you have only one angle per image, instead of multiple image sprites, you can just set the anglesPerImage setting to 1.
const threeSixty = new ThreeSixty(document.getElementsByTagName('canvas')[0], {
angles: 10,
anglesPerImage: 1
});
threeSixty.initialize({
0: [
'http://example.com/images/360/image-0.jpg',
'http://example.com/images/360/image-1.jpg',
'http://example.com/images/360/image-2.jpg',
'http://example.com/images/360/image-3.jpg',
'http://example.com/images/360/image-4.jpg',
'http://example.com/images/360/image-5.jpg',
'http://example.com/images/360/image-6.jpg',
'http://example.com/images/360/image-7.jpg',
'http://example.com/images/360/image-8.jpg',
'http://example.com/images/360/image-9.jpg'
]
});Alter the speed
The default speed factor is set to 5. You can change it with the speedFactor setting.
const threeSixty = new ThreeSixty(document.getElementsByTagName('canvas')[0], {
angles: 36,
anglesPerImage: 6,
speedFactor: 1
});
threeSixty.initialize({
0: [
'http://example.com/images/360/image-0.jpg',
'http://example.com/images/360/image-1.jpg',
'http://example.com/images/360/image-2.jpg',
'http://example.com/images/360/image-3.jpg',
'http://example.com/images/360/image-4.jpg',
'http://example.com/images/360/image-5.jpg'
]
});Hotspots
You can show hotspots at defined angles to advertise the viewed product better.
const threeSixty = new ThreeSixty(document.getElementsByTagName('canvas')[0], {
angles: 36,
anglesPerImage: 6,
hotspots: [
{
text: 'Lorem ipsum 1',
angle: 0,
endAngle: 90,
top: '25%',
left: '27.5%'
},
{
text: 'Lorem ipsum 2',
angle: 180,
endAngle: 240,
top: '65%',
left: '60%'
}
]
});
threeSixty.initialize({
0: [
'http://example.com/images/360/image-0.jpg',
'http://example.com/images/360/image-1.jpg',
'http://example.com/images/360/image-2.jpg',
'http://example.com/images/360/image-3.jpg',
'http://example.com/images/360/image-4.jpg',
'http://example.com/images/360/image-5.jpg'
]
});