@mediaman/three-sixty
TypeScript icon, indicating that this package has built-in type declarations

1.0.1 • Public • Published

360° library

A library that makes creating a 360° viewer extremely easy.

Build Status npm version

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-sixty

Importing 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'
    ]
});

Readme

Keywords

none

Package Sidebar

Install

npm i @mediaman/three-sixty

Weekly Downloads

62

Version

1.0.1

License

MIT

Unpacked Size

2.55 MB

Total Files

45

Last publish

Collaborators

  • mediaman