270 Degrees Viewer¶

Overview¶

The 270 Degrees Viewer is a flexible 3D asset loader designed to seamlessly integrate into any web environment. With minimal technical impact, it empowers you to easily add and configure a 3D model to your web page.

The plugin connects to our AssetAPI and, after succesfully authenticating your API key and hostname, seamlessly serves the 3D asset.

Features¶

Seamless Integration: The Viewer seamlessly integrates into any web environment, providing a smooth experience for adding and configuring 3D models.
SaaS Solution: The Viewer operates as a Software-as-a-Service (SaaS) solution, connecting your web environment to the 270 Degrees servers through a two-tiered authentication system. This authentication involves a unique API key and an authorized hostname, ensuring secure access.
Efficient Asset Hosting: Hosting of the assets and the plugin is handled by our servers, reducing the load on your own infrastructure.
Real-time Rendering: The Viewer enables real-time rendering on the client's machine, allowing for interactive and immersive experiences.
Robust JavaScript API: Take full control of the Viewer with its comprehensive JavaScript API. Customize and manipulate the displayed content to suit your specific needs.

Requirements:¶

A unique API key from 270 Degrees.
An authorized hostname.
Assetcodes referring to your 3D content.

Quick start¶

Add the plugin at the bottom of the body element of your page, along with your unique API key:
(the key rest-of-the-owl can be used as a free demo key)

<script>window.TSDAPIKEY = 'rest-of-the-owl';</script>
<script src="https://api.270degrees.nl/api/script/latest/viewer.js"></script>

Add the following markup where you want the Viewer to appear:

<div class="js-270viewer" data-270-model="270logo" data-270-width="500px" data-270-height="500px"></div>

The Viewer will load the 270 Degrees logo in 3D!
Change data-270-model to your preferred Assetcode to load your own content.

?> Tip: The demo key also allows for assetcodes generic-polo, lunchbox and generic-shoe

ES6 Module¶

The plugin is also available as an ECMA Script Module.
This can be loaded via

<script type="module">
    import * as TSDViewer from 'https://api.270degrees.nl/api/script/latest/viewer.esm.js';
</script>

Configuration¶

The AssetAPI sends a specific Viewer configuration (lighting type, camera position, and more) that best fits the loaded Asset.
However you are free to override any of these options to suit your needs.

After the Viewer is loaded it opens itself up for several methods where you can control the Viewer realtime.

Implicit vs Explicit loading¶

When using the .js-270viewer hook the Viewer will initialise implicitly on page load. However, you might want to have more granular control over when the Viewer initialises and with what options. In that case it is recommended to not use the .js-270viewer hook and create your own:

<div class="myOwnDiv"></div>
<script>
    TSDViewer.create(document.querySelector('.myOwnDiv'), {
        model: '270logo',
        width: '500px',
        height: '500px',
        onCreate: () => {
            // viewer was created
        },
        onLoadComplete: () => {
            // loaded model
        },
        onLoadFailure: () => {
            // something's wrong, load fallback
        }
    })
</script>

Destroying (unloading) the Viewer¶

You can unload and destroy the Viewer completely by calling TSDViewer.destroy(el).
This will remove the Viewer and associated listeners from the current page.