Skip to content

Options¶

The 270 Degrees Viewer can be configured with a number of options.
These can be passed explicitly via the options object or implicitly via data-270- attributes.

The default settings are passed from the AssetAPI, based on the loaded asset. Passing any of these options overrides those settings.

ambientIntensity¶

  • Type: Float
  • Default: implicit

Sets the loaded lighting's minimal brightness. The default differs per lighting preset.

As proper model visualisation is dependant on correct lighting it is recommended to only configure this when needed.

TSDViewer.create(element, {
    ambientIntensity: 1.2
})
<div class="js-270viewer" data-270-ambient-intensity="1.2">

autoplayAnimation¶

  • Type: Boolean || comma separated string
  • Default: false

Automatically plays the passed animations on load. Passing a Boolean of true will autoplay all found animations.

Use el.getAnimationNames() to see all available animations. 

TSDViewer.create(element, {
    autoplayAnimtation: 'Walk'
})
<div class="js-270viewer" data-270-autoplay-animation="Walk">

autorotate¶

  • Type: Boolean
  • Default: false

When true the camera autorotates around the loaded model.

TSDViewer.create(element, {
    autorotate: false
})
<div class="js-270viewer" data-270-autorotate="false">

autorotateSpeed¶

  • Type: Float
  • Default: -2

Sets the speed of the autorotation. Use a negative value for counterclockwise rotation.

TSDViewer.create(element, {
    autorotateSpeed: 3
})
<div class="js-270viewer" data-270-autorotate-speed="3">

background¶

  • Type: string
  • Default: #ffffff

Sets the Viewer's background to a solid color (css vaue), a gradient to infer depth (comma separated css values), or an image (url).

Note: When using a gradient or image, the opacity option is ignored. 

TSDViewer.create(element, {
    background: '#eeeeee, #ffffff' // a soft gradient
})
<div class="js-270viewer" data-270-background="#eeeeee, #ffffff">

cameraPosition¶

  • Type: comma separated string | keyword string
  • Default: auto, auto

Set the initial position of the Camera. The first value is the Theta in degrees ranging from 0-360, the second is the Phi in degrees ranging from 0-180.
Passing auto as either value falls that axis back based on the model's initial settings.
Alternatively you can pass one of the cardinal directions: top, bottom, left, right, front, back.

The minimum and maximum values might be restricted by verticalRotation and horizontalRotation.

TSDViewer.create(element, {
    cameraPosition: '30,75'
})
<div class="js-270viewer" data-270-camera-position="30,75">

cameraZoomLevel¶

  • Type: Float
  • Default: 0.25

Set the initial relative zoom position of the Camera. 0 is furthest away, 1 is closest.

TSDViewer.create(element, {
    cameraZoomLevel: 0.25
})
<div class="js-270viewer" data-270-camera-zoom-level="0.25">

customLightingData¶

  • Type: Object
  • Default: {}

Override the passed lighting preset and store it in the custom slot. This can later be restored by calling el.setLightingType('custom').
This can not be passed implicitly.

As proper model visualisation is dependant on correct lighting it is recommended to only configure this when needed.

TSDViewer.create(element, {
    lighting: 'neutral',
    customLightingData: {
        "path": "path/to/file.hdr",         // path to the HDRI file. Can be either .hdr or .exr
        "tonemapping": true,                // when false, do not color correct HDR luminance values
        "exposure": 0.76,
        "rotation": 0,
        "ambientLight": {
            "color": "#ffffff",
            "intensity": 0
        },
        "sunLight": {
            "color": "#ffffff",
            "intensity": 1,
            "position": {
                "x": -100,
                "y": 0,
                "z": 10
            }
        },
        "extraLights": [
            {
                "color": "#ffffff",
                "intensity": 1.6,
                "position": {
                    "x": -40,
                    "y": -20,
                    "z": 100
                }
            }
        ],
    }
})

damping¶

  • Type: Boolean
  • Default: true

Allows for camera damping (weight movement)

TSDViewer.create(element, {
    damping: true
})
<div class="js-270viewer" data-270-damping="true">

forceLoad¶

  • Type: Boolean
  • Default: false

Force loading of the Viewer even if $container is not visible.
For performance reasons the Viewer does not initialise if the element is invisible. This is useful if the Viewer is inside a container that is not shown on the current breakpoint. Setting forceLoad to true will ignore this logic.

It is recommended to keep this to false. If you want to lazyload the Viewer, use lazyLoad.

TSDViewer.create(element, {
    forceLoad: true
})
<div class="js-270viewer" data-270-force-load="true">

height¶

  • Type: String - css value
  • Default: 100%

Set the height of the Viewer in css units.

TSDViewer.create(element, {
    height: '400px'
})
<div class="js-270viewer" data-270-height="400px">

horizontalRotation¶

  • Type: comma separated string
  • Default: free

Limit the horizontal rotation of the camera. The first value is the minimum angle in degrees (minimum 0), the second value is the maximum angle in degrees (maximum of 360).
Passing free will remove any limits.

TSDViewer.create(element, {
    horizontalRotation: '20,170'
})
<div class="js-270viewer" data-270-horizontal-rotation="20-170">

lazyLoad¶

  • Type: Boolean
  • Default: true

Only load the viewer once it is in the viewport.
Set to false to always load the viewer, provided it is in a visible container. See forceLoad. 

TSDViewer.create(element, {
    lazyLoad: false
})
<div class="js-270viewer" data-270-lazy-load="false">

lighting¶

  • Type: string
  • Default: neutral

Loads a lighting preset into the Viewer.
Options are neutral, cannon, city, courtyard, forest, interior, night, studio, sunrise, sunset, traditional.
You can tweak the lighting by using ambientIntensity

TSDViewer.create(element, {
    lighting: 'sunset'
})
<div class="js-270viewer" data-270-lighting="sunset">

lightingExposure¶

  • Type: Float
  • Default: implicit

Sets the loaded lighting's exposure. The default differs per lighting preset, and is ignored when lighting is set to traditional.

As proper model visualisation is dependant on correct lighting it is recommended to only configure this when needed.

TSDViewer.create(element, {
    lightingExposure: 1.2
})
<div class="js-270viewer" data-270-lighting-exposure="1.2">

lightingRotation¶

  • Type: Float
  • Default: implicit

Sets the loaded lighting's rotation, in degrees. The default differs per lighting preset, and is ignored when lighting is set to traditional.

As proper model visualisation is dependant on correct lighting it is recommended to only configure this when needed.

TSDViewer.create(element, {
    lightingRotation: 45
})
<div class="js-270viewer" data-270-lighting-rotation="45">

loader¶

  • Type: Boolean
  • Default: true

Shows or hides the loader screen. As Assets are fetched over the API it is recommended to keep this to true.

TSDViewer.create(element, {
    loader: true
})
<div class="js-270viewer" data-270-loader="true">

loaderByline¶

  • Type: string
  • Default: Powered by 270 Degrees

Text shown under the loader progress bar

TSDViewer.create(element, {
    loaderByline: 'Loading, please wait'
})
<div class="js-270viewer" data-270-loader-byline="Loading, please wait">

loaderColor¶

  • Type: Comma separated hexstrings
  • Default: #1A4973, #3C8FC2

Max two css colors for the loader progress bar color gradient. Passing just one color results in solid color.

TSDViewer.create(element, {
    loaderColor: '#000000, #ffffff'
})
<div class="js-270viewer" data-270-loader-color="#000000, #ffffff">
  • Type: uri
  • Default: 270 logo

The loaderscreen image uri.

TSDViewer.create(element, {
    loaderLogo: '/path/to/logo.png'
})
<div class="js-270viewer" data-270-loader-logo="/path/to/logo.png">
  • Type: Boolean
  • Default: true

Shows or hides the 3D indicator logo. Forced to false when rotate is false.

TSDViewer.create(element, {
    logo: true
})
<div class="js-270viewer" data-270-logo="true">

loopAnimation¶

  • Type: Boolean || comma separated string
  • Default: false

Loop the passed animations when played. Passing a Boolean of true will loop all found animations.

Use el.getAnimationNames() to see all available animations. 

TSDViewer.create(element, {
    loopAnimation: 'Walk'
})
<div class="js-270viewer" data-270-loop-animation="Walk">

model¶

  • Type: string
  • Default: none

The Assetcode of the model that is requested from the API.
If no model is passed the Viewer will fall back to a randomly colored cube.

TSDViewer.create(element, {
    model: '270logo'
})
<div class="js-270viewer" data-270-model="270logo">

onCreate¶

  • Type: Function
  • Default: null

A callback function that fires when the Viewer is initialised, but before a model has loaded.
This can not be passed implicitly.

TSDViewer.create(element, {
    onCreate: () => {
        console.log('created the viewer');
    }
})

onLoadComplete¶

  • Type: Function
  • Default: null

A callback function that fires once the Viewer is done initialising.
This can not be passed implicitly.

TSDViewer.create(element, {
    onLoadComplete: () => {
        console.log('loaded');
    }
})

onLoadFailure¶

  • Type: Function
  • Default: null

A callback function that fires when the Viewer encountered an error during loading.
This can not be passed implicitly.

TSDViewer.create(element, {
    onLoadFailure: () => {
        console.log('failed to load');
    }
})

opacity¶

  • Type: Float
  • Default: 1

The opacity of the Viewer's background. Range between 0 and 1, where 1 is fully opaque.

TSDViewer.create(element, {
    opacity: '0.5'
})
<div class="js-270viewer" data-270-opacity="0.5">

pan¶

  • Type: Boolean
  • Default: false

Allows the user to pan the camera.

Camera panning can be disorienting for users and is therefore not recommended to enable unless you really need it.

TSDViewer.create(element, {
    pan: false
})
<div class="js-270viewer" data-270-pan="false">

plugins¶

  • Type: Comma separated string
  • Default: null

Comma separated list of available plugins to load. See Plugins for more details.

TSDViewer.create(element, {
    plugins: 'customiser'
})
<div class="js-270viewer" data-270-plugins="customiser">

reverseAnimation¶

  • Type: Boolean || comma separated string
  • Default: false

Reverses the passed animations when played. Passing a Boolean of true will reverse all found animations.

Use el.getAnimationNames() to see all available animations. 

TSDViewer.create(element, {
    reverseAnimation: 'Walk'
})
<div class="js-270viewer" data-270-reverse-animation="Walk">

rotate¶

  • Type: Boolean
  • Default: true

Allows the user to rotate around the object.

TSDViewer.create(element, {
    rotate: true
})
<div class="js-270viewer" data-270-rotate="true">

rotateSpeed¶

  • Type: Float
  • Default: 1

The sensitivity of the camera rotation. A higher value results in a faster rotating camera.

TSDViewer.create(element, {
    rotateSpeed: 1.5
})
<div class="js-270viewer" data-270-rotate-speed="1.5">

shadow¶

  • Type: Boolean
  • Default: true

Adds a shadow below the loaded asset.

TSDViewer.create(element, {
    shadow: true
})
<div class="js-270viewer" data-270-shadow="true">

shadowBlur¶

  • Type: Float
  • Default: 6

The amount of blur added to the shadow

TSDViewer.create(element, {
    shadowBlur: 6
})
<div class="js-270viewer" data-270-shadow-blur="6">

shadowDarkness¶

  • Type: Float
  • Default: 1

The darkness of the darkest parts (usually the contact shadow) of the shadow. 

TSDViewer.create(element, {
    shadowDarkness: 1
})
<div class="js-270viewer" data-270-shadow-darkness="1">

shadowOpacity¶

  • Type: Float
  • Default: 0.4

The opacity of the shadow, ranging from 0 to 1. 

TSDViewer.create(element, {
    shadowOpacity: 0.4
})
<div class="js-270viewer" data-270-shadow-opacity="0.4">

shadowSpace¶

  • Type: Boolean
  • Default: false

The shadow will be placed with space between shadow and asset, making the asset appear to float.
Ignored when shadow is set to false.

TSDViewer.create(element, {
    shadowSpace: true
})
<div class="js-270viewer" data-270-shadow-space="true">

sunIntensity¶

  • Type: Float
  • Default: implicit

Sets the loaded lighting's directional light brightness. The default differs per lighting preset.

As proper model visualisation is dependant on correct lighting it is recommended to only configure this when needed.

TSDViewer.create(element, {
    sunIntensity: 1.2
})
<div class="js-270viewer" data-270-sun-intensity="1.2">

verticalRotation¶

  • Type: comma separated string
  • Default: 45,135

Limit the vertical rotation of the camera. The first value is the minimum angle in degrees (minimum 0), the second value is the maximum angle in degrees (maximum of 180).
Passing free as either of the values will remove any limits.

TSDViewer.create(element, {
    verticalRotation: "45,135"
})
<div class="js-270viewer" data-270-vertical-rotation="45,145">

width¶

  • Type: String - css value
  • Default: 100%

Set the width of the Viewer in css units.

TSDViewer.create(element, {
    width: '400px'
})
<div class="js-270viewer" data-270-width="400px">

zoom¶

  • Type: Boolean
  • Default: true

Allows the user to zoom from and towards the asset.

TSDViewer.create(element, {
    zoom: true
})
<div class="js-270viewer" data-270-zoom="true">
💬 Ask AI