How to set up API for touch screen kiosk?

Hi all,

I’m collaborating with a museum, the goal is to present a model I made in an exhibit using a touch screen kiosk.

Here is a small part of the model to be used as a test version / demo. (premium account)

I don’t know much about setting up APIs or how to add this code to an HTML page.
I was hoping you guys can help me out with the following:

1: The camera motion has to be restricted so the user won’t end up underneath the model. (also WITH annotations as I’ve seen in the regular 3D viewer annotations are not compatible with camera restrictions )

2: A stripped down interface. The user should not be able to “break out” of the full screen viewer and start opening all kinds of tabs. So also not a “close model” or “exit fullscreen” buttons.

(I found this car demo that does pretty much everything I need)
However, when I replace the car model id with the id of the model I’m using the camera restrains seem to be not working.

Anyone willing to help me out with this?

For camera restrictions, you can set that in the 3D settings under Camera, check limit vertical rotation. The settings below should get you what you want.

The other settings can be controlled from the Embed button if you basically just need to embed the whole viewer in its own page. Toggle the things you need/don’t need and you can get the generated url from the embed code or copy the whole embed code, depending on how you will display it.

1 Like

Hi there,

Thanks for your comment.

I can’t set up camera restrictions as I have annotations:

Apparently the only way to have both annotations and camera restrictions is by using the API.
Unfortunately, I have no idea where to copy paste this “annotation log”.

Ok gotcha. I took the code from the example and deleted the stuff you might not need and used one of my models with fake annotations. So you need to make your annotations, copy the log and save it somewhere to insert into the html. Then I deleted the annotations in my 3D model so I could set the camera constraints and saved the settings. See if this works for you if you sub in your model id and annotations.

<!DOCTYPE html>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="author" content="author">
        <!-- Insert this script -->
        <script type="text/javascript" src=""></script>
    body {
      padding: 0;
      margin: 0;
      width: 100vw;
      height: 100vh;
      -webkit-font-smoothing: antialiased;
      -moz-font-smoothing: grayscale;
      font-family: Open Sans, sans-serif;
    * {
      box-sizing: border-box;
    .container {
      display: flex;
      flex-direction: column;
      height: 100%;
    .iframe-container {
      position: relative;
      width: 100%;
      flex: 1;
      display: flex;
    .iframe-container > iframe {
      border: 0;
      width: 100%;
      flex: 1;



    <div class="container">
        <div class="iframe-container">
          <iframe src="" id="api-frame"></iframe>

<script type="text/javascript">
// Sketchfab Viewer API: Camera Limits + Annotations (Full Viewer API)
const version = '1.12.1';
const uid = '752c12be2ec24b4b8b8ab4a2d3f49b57';
const iframe = document.getElementById('api-frame');
const client = new window.Sketchfab(version, iframe);
let api;

// Camera logs from model 8aaa8a43ba05482aaf6214ec80fb412b
const cameraData = {
    "useCameraConstraints": true,
    "usePanConstraints": true,
    "useZoomConstraints": true,
    "usePitchConstraints": true,
    "useYawConstraints": false,

// Annotation logs from model
const annotationData = [
  "ScenePosition": [
  "WorldPosition": [
  "eye": {
    "0": 0.10874292966045929,
    "1": -4.044061174912253,
    "2": 1.46611608450739
  "target": {
    "0": 0.10874292966045979,
    "1": 0.026232822724570413,
    "2": 0.14359739521661158
  "title": "Capitate",
  "text": "blah blah"
  "ScenePosition": [
  "WorldPosition": [
  "eye": {
    "0": 0.12983429019830417,
    "1": -2.638717024685488,
    "2": 0.6851971976494096
  "target": {
    "0": 0.10310628542361333,
    "1": 0.02469462117531713,
    "2": 0.1364066602495324
  "title": "Hamate",
  "text": "blah blah"

const error = () => window.console.error('Sketchfab API error');

const success = apiClient => {
    api = apiClient;
    api.addEventListener('viewerready', () => {
        window.console.log('viewer ready');

        api.setCameraConstraints(cameraData, () => {
            window.console.log('Camera constraints enabled');
        for (const annotation of annotationData) {
                (err, index) => {
                    if (!err) {
                        window.console.log(`Created annotation #${index + 1}`);


client.init(uid, {
    annotation: 0, // Usage: Setting to [1 – 100] will automatically load that annotation when the viewer starts.
    annotations_visible: 1, // Usage: Setting to 0 will hide annotations by default.
    autospin: 0, // Usage: Setting to any other number will cause the model to automatically spin around the z-axis after loading.
    autostart: 1, // Usage: Setting to 1 will make the model load immediately once the page is ready, rather than waiting for a user to click the Play button.
    camera: 0, // Usage: Setting to 0 will skip the initial animation that occurs when a model is loaded, and immediately show the model in its default position.
    ui_stop: 0, // Usage: Setting to 0 will hide the "Disable Viewer" button in the top right so that users cannot stop the 3D render once it is started.
    transparent: 0, // Usage: Setting to 1 will make the model's background transparent
    ui_animations: 0, // Usage: Setting to 0 will hide the animation menu and timeline.
    ui_annotations: 1, // Usage: Setting to 0 will hide the Annotation menu.
    ui_controls: 1, // Usage: Setting to 0 will hide all the viewer controls at the bottom of the viewer (Help, Settings, Inspector, VR, Fullscreen, Annotations, and Animations).
    ui_fullscreen: 0, // Usage: Setting to 0 will hide the Fullscreen button.
    ui_general_controls: 1, // Usage: Setting to 0 will hide main control buttons in the bottom right of the viewer (Help, Settings, Inspector, VR, Fullscreen).
    ui_help: 1, // Usage: Setting to 0 will hide the Help button.
    ui_hint: 1, // Usage: Setting to 0 will always hide the viewer hint animation ("click & hold to rotate"). Setting to 1 will show the hint the first time per browser session (using a cookie). Setting to 2 will always show the hint.
    ui_infos: 0, // Usage: Setting to 0 will hide the model info bar at the top of the viewer.
    ui_inspector: 0, // Usage: Setting to 0 will hide the inspector button.
    ui_settings: 0, // Usage: Setting to 0 will hide the Settings button.
    ui_vr: 0, // Usage: Setting to 0 will hide the View in VR button.
    ui_watermark_link: 0, // Usage: Setting to 0 remove the link from the Sketchfab logo watermark.
    ui_color: '00a8c0', // Usage: Setting to a hexidecimal color code (without the #) or a HTML color name will change the color of the viewer loading bar.
    ui_watermark: 0, // Usage: Setting to 0 remove the Sketchfab logo watermark.

    success: success,
    error: error

1 Like

Hey @terrielsimmons,

Thanks a lot for the code, it really helped me set up the site
I got the camera restrictions working (mostly) along with the annotations.
@klaasnienhuis was a big help developing a button to reset the camera.

I have a demo running here.

Perhaps you can help me out with the following?
Is there a way to disable the “Hide annotations” and “Start autopilot”?

That looks great! Down near the end of the code under client.init, you can set ui_annotations to 0 and that hides the whole annotation menu at the bottom, but I don’t know if you want to do that unless you want to create custom annotation buttons at the bottom. I don’t know how to remove just those 2 lines!