{"id":119941165409,"date":"2015-05-26T08:02:38","date_gmt":"2015-05-26T15:02:38","guid":{"rendered":"http:\/\/blog.sketchfab.com\/post\/119941165409"},"modified":"2018-12-12T21:17:00","modified_gmt":"2018-12-12T20:17:00","slug":"viewer-api-part-1-introduction","status":"publish","type":"post","link":"https:\/\/sketchfab.com\/blogs\/community\/viewer-api-part-1-introduction\/","title":{"rendered":"Viewer API Part 1: Introduction"},"content":{"rendered":"

There\u2019s a lot you can do with the Viewer API<\/a>, but it can be a bit overwhelming at first glance, especially if you have no experience in JavaScript. I\u2019m certainly no expert, but I\u2019ll go through an introduction and a simple example to help get your feet wet.<\/p>\n

Introduction<\/h3>\n

The Viewer API is a tool to programmatically load and manipulate an embedded Sketchfab model. Uses can be as simple as loading a model \u2018on the fly\u2019, or as complex as custom camera animations<\/a>, manipulating objects in the scene<\/a>, and syncing a viewer over the Internet<\/a>.<\/p>\n

Prepare your site<\/h3>\n

To use the API, you\u2019ll need to insert it somewhere on your page. It should be downloaded or hotlinked<\/a>. For example:<\/p>\n

<script src=\"sketchfab-viewer-1.0.0.js\"><\/script><\/code><\/pre>\n
Then, you need an empty iframe. It has an id<\/strong> attribute, but no src<\/strong> attribute. You can add other attributes like height, width, and allowfullscreen.<\/p>\n
<iframe src=\"\" id=\"api-frame\"><\/iframe><\/code><\/pre>\n
 <\/p>\n
Add your script<\/h3>\n
Add your empty iframe and the API link, as above.<\/p>\n
\r\n<body>\r\n  <p>This iframe was loaded by the Viewer API!<\/p>\r\n  <!-- Your emptry iframe with some extra attributes -->\r\n  <iframe src=\"\" id=\"api-frame\" allowfullscreen mozallowfullscreen=\"true\" webkitallowfullscreen=\"true\" width=\"400px\" height=\"300px\"><\/iframe>\r\n  <!-- The API -->\r\n  <script src=\"https:\/\/static.sketchfab.com\/api\/sketchfab-viewer-1.0.0.js\"><\/script><\/code><\/pre>\n
Declare some variables:<\/p>\n
    \n
  • the iframe itself (document.getElementById()<\/strong><\/a>)<\/li>\n
  • API version number<\/li>\n
  • ID of the model you want to load<\/li>\n
  • Sketchfab API client<\/strong> object.<\/li>\n<\/ul>\n
    \r\n  <!-- Your new script -->\r\n  <script type=\"text\/javascript\">\r\n    \/\/ The iframe\r\n    var iframe = document.getElementById( 'api-frame' );\r\n    \/\/ API version\r\n    var version = '1.0.0';\r\n    \/\/ Model to load\r\n    var urlid = 'e9e66978d4a248e2b0c4fdbb9912a573';\r\n    \/\/ Sketchfab API client object\r\n    var client = new Sketchfab( version, iframe );<\/code><\/pre>\n
    Then, we\u2019re ready to use the API. So, we initialize the API client, give it the model ID, and tell it to start immediately.<\/p>\n
    \r\n    \/\/ Initialize the API\r\n    client.init( urlid, {\r\n      \/\/ API is ready to use. You can interact with the viewer using the api object passed to the success function\r\n      success: function onSuccess( api ){\r\n        \/\/ Start the viewer immediately\r\n        api.start();\r\n      },\r\n      \/\/ If initialization fails, throw an error\r\n      error: function onError() {\r\n        console.log( 'Viewer error' );\r\n      }\r\n    } );\r\n  <\/script>\r\n<\/body><\/code><\/pre>\n
    This is as simple as it gets. When the page loads, the API initializes and the model defined by urlid<\/strong> will be loaded in the iframe #api-frame<\/strong>. Obviously, this is pretty worthless because you can just embed a model<\/a> as you normally would. Things get more interesting when you need to handle multiple models at once.<\/p>\n
    And here\u2019s the result:<\/p>\n