Installation

You can integrate the viewer with webpack and use the declaration file
install by Go to NPM js to get the 360 viewer @3dweb/360javascriptviewer
Or include the latest version of the script directly on your page.
Copy
current version of the 360 javascript viewer current usage of the 360 javascript viewer current usage of the 360 javascript viewer

Quick start

Configure the viewer and copy paste the code on your site

Starting with 360 images

First you need images, a lot of images.
More images means smoother rotations but also more CPU and RAM usage for your clients.
Consider a number which can split 360 to a whole number. 36 Images means 10 degrees rotation and 72 means 5 degrees. You can speed up the image loading by putting your images on a CDN. For image hosting we use Cloud Image, it has a great free tier.

screenshot of explorer with named images

API

Constructor

property type description default
mainImageId string ID of the image which is the base for all the frames jsv-image
mainHolderId string ID of the div where the presentation runs in jsv-holder
totalFrames number Amount of frames in the presentation, more images means smoother rotations 72
firstImageNumber number After loading the presentation this is the first frame visible 1
reverse boolean Invert the rotation direction when dragging false
speed number Speed of rotating 80
inertia number Delay when stop dragging 20
defaultProgressBar boolean Disable the build in progress bar,
use this when you have implemented your own loader or don't like this one
true
imageUrlFormat string Format for determining the filenames of the frames
{filename}_xx.{extension} is the default ipod_x.jpg => ipod_1.jpg ipod_xx.jpg => ipod_01.jpg https://other.cdn/images/ipod_xx.jpg => https://other.cdn/images/ipod_01.jpg
{filename}_xx.{extension}
startFrameNo number Use this setting in combination with imageUrlFormat startFrameNo: 4 => first file is ipod_04.jpg 1

Methods

  • start():Promise
    Start the presentation, loading all images and replace the main image with a 360 presentation.
  • destroy():Promise
    Destroys the presentation and returns to previous state
  • rotateDegrees(degree: number):Promise
    Set the desired rotation and the 360 model is rotating to it.
  • rotateToDegree(targetDegree: number, shortestWay?: boolean, useEasing?: boolean)):Promise
    Rotate to a certain degree. Frame nr 1 is 0 degrees.
  • setSpeed(speed:number):void
    Set the current speed of rotating for the viewer instance
  • setInertia(inertia:number):void
    Set the current inertia of the viewer
  • events():IEvents
    Use this to register events.

Events

  • loadImage:IProgress
    Use this event to create your own progress bar
    viewer.events().loadImage.on((progress) => { // use the progress object for your own loader })

  • started:boolean
    Use this event to trigger other actions when the viewer is ready
    viewer.events().started.on((boolean) => { // start intro animations or other creative ideas })

  • startDragging:IHandle
    Use this event to capture the user drag movement.
    viewer.events().startDragging.
    on((handle) => { // show or hide information on the viewer or send statistics })