Skip to content

270 Degrees Quick Start Tutorial

Welcome! 👋
This tutorial will walk you through the basics of using 270 Degrees. In just a few steps, you'll go from a blank page to a working instance with some basic configuration. No deep knowledge required — just follow along and tweak as you go.

Let’s get started.

1. Start with the Basics

Here’s a simple HTML boilerplate to get us going. This will give us a container for the library and load the script:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My First 270 Viewer</title>
  <style>
    body {
      font-family: sans-serif;
    }
    #viewer-container {
      width: 500px;
      height: 500px;
    }
  </style>
</head>
<body>
  <main>
    <h1>My 270 Viewer!</h1>
    <div id="viewer-container">
        <!-- viewer will go here -->
    </div>
  </main>

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

</body>
</html>

Nothing too elaborate. Just a container and some basic styling.
Note how we added the window.TSDAPIKEY and the library script at the bottom of the body.

You can also use a module-based version if you're working with a build system like Vite or Webpack — read more.

2. Initialize the Library

Let’s create our first instance. Add the following markup to the div#viewer-container, replacing the comment: 

<div class="js-270viewer" data-270-model="270logo"></div>

You should now see the viewer loaded inside the <div id="viewer-container">.

If nothing happens, open the browser console to check for errors.
Read more in the troubleshooting section

3. Add Some Basic Configuration

The real power comes when you start configuring. Let’s add a few options to customize the instance:

<div class="js-270viewer" data-270-model="270logo" data-270-background="#eeeeee" data-270-autorotate="true"></div>

This example:

  • Loads a 3D model of the 270 Logo (270logo)
  • Sets a custom background color
  • Enables auto rotation of the model

You don’t need all the options right away — start small, then build up.

4. End result

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My First 270 Viewer</title>
  <style>
    body {
        font-family: sans-serif;
    }
    #viewer-container {
      width: 500px;
      height: 500px;
    }
  </style>
</head>
<body>
  <main>
    <h1>My 270 Viewer!</h1>
    <div id="viewer-container">
      <div class="js-270viewer" data-270-model="270logo" data-270-background="#eeeeee" data-270-autorotate="true"></div>
    </div>
  </main>

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

What’s Next?

That’s the foundation! In just a few lines, you’ve got a working instance with your content.
Let's add some interactivity next!

Or, delve deeper into the docs: