Sketchfab set view

index.html

<div class="container">
  <div class="iframe-container">
    <iframe id="api-frame"></iframe>
  </div>
  <div class="explainer" id="explainer">
    Set camera position example. The "Print view" button outputs camera information to the console.
  </div>
  <div class="controls" id="controls">
    <button id="view1">View Poe</button>
    <button id="view2">View Rey</button>
    <button id="view3">View Finn</button>
    <button id="printview">Print view</button>
  </div>
</div>

script.js

var version = "1.11.0";
var urlid = "fa9033e3d7174cb08064e5f509a3d25e";

var views = {
  poe: {
    eye: [-138, 16, 191],
    lookat: [-147, 96, 187],
    duration: 0.2
  },
  rey: {
    eye: [24, 73, 109],
    lookat: [146, 103, 155],
    duration: 1
  },
  finn: {
    eye: [-44, 40, 190],
    lookat: [3, 81, 182],
    duration: 0.6
  }
};

function setView(api, view) {
  api.setCameraLookAt(view.eye, view.lookat, view.duration);
}

function printview(api) {
  api.getCameraLookAt(function (err, camera) {
    var view = {
      eye: [camera.position[0].toFixed(2),camera.position[1].toFixed(2),camera.position[2].toFixed(2)],
      lookat: [camera.target[0].toFixed(2),camera.target[1].toFixed(2),camera.target[2].toFixed(2)]
    }
    console.log(view)
  });
}

function actionSkfb() {
  // initialize
  var iframe = document.getElementById("api-frame");
  var client = new window.Sketchfab(version, iframe);

  var error = function () {
    console.error("Sketchfab API error");
  };

  var success = function (api) {
    api.start(function () {
      api.addEventListener("viewerready", function () {
        document.getElementById("view1").addEventListener("click", function () {
          setView(api, views.poe);
        });
        document.getElementById("view2").addEventListener("click", function () {
          setView(api, views.rey);
        });
        document.getElementById("view3").addEventListener("click", function () {
          setView(api, views.finn);
        });
        document.getElementById("printview").addEventListener("click", function () {
          printview(api);
        });
      });
    });
  };
  
  client.init(urlid, {
    success: success,
    error: error,
    ui_stop: 0,
    ui_inspector: 0, //disable the inspector and avoid downloading the wireframe
    ui_infos: 0, //need biz account
    ui_controls: 0, //need biz account
    scrollwheel: 1,
    ui_watermark: 0
  });
}

actionSkfb();

scripts

<script src="https://static.sketchfab.com/api/sketchfab-viewer-1.11.0.js"></script>

sketchfab-set-view.markdown

Sketchfab set view

A Pen by Klaas Nienhuis on CodePen.

License.

style.css

html,
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;
}

.explainer {
  height: 100px;
  padding: 15px 15px 0 15px;
  background-color: #e2e2e2;
  overflow: auto;
}

.controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  flex-shrink: 0;
  height: 80px;
  padding: 15px 0 0 15px;
  background-color: #f2f2f2;

  overflow: auto;
}

.controls > * {
  margin-right: 15px;
  margin-bottom: 15px;
}