The first thing you're going to need is a developer key, which you can get by creating an app. If you're doing local development, simply use 127.0.0.1 as your site's IP address.
Now open a text editor and copy-paste the following code into it.
<!DOCTYPE html>
<html style="height: 100%; overflow: hidden;">
<body style="height: 100%; margin: 0">
<iframe id="myWidget"
src="https://human.biodigital.com/widget/?m=cochlear_implant&dk=<YOUR-DEVELOPER-KEY>"
width="100%"
height="100%">
</iframe>
<script src="https://human-api.biodigital.com/build/1.2.1/human-api-1.2.1.min.js"></script>
</body>
</html>
Save the file, serve it over HTTP (see here for tips on how to do this), and open it in a browser. What we've done is load some BioDigital content into an iFrame on your page. We also loaded the Viewer API (see the script tag in the head), which we'll begin using shortly.
Now open up the JavaScript console in your browser (see instructions for Chrome, Firefox, Safari, IE).
The first thing we need to do is create an instance of the HumanAPI. Copy-paste the following code into your JavaScript console:
var human = new HumanAPI.Human("myWidget"); The string argument is the HTML iframe element’s id.
First, let's play around with the animation, which is controlled by the Human API's timeline property. First, let's pause the animation:
human.timeline.pause(); And start playing it again:
human.timeline.play(); Ok, let's try something a little more complicated: camera manipulations! First, let's rotate it horizontally by 90 degrees:
human.camera.orbitBy({ yaw: 90 }); Not bad, but let's try animating the camera movement with a simple animation loop:
(function rotateCamera() {
requestAnimationFrame(rotateCamera);
human.camera.orbitBy({ yaw: 0.4 });
})();Looking good! Now one final touch: let's move the camera a little further away, so we can get a better view of the action:
human.camera.flyTo({
eye: { z: -25 },
velocity: 20
});That's it! Congratulations on completing the BioDigital Human Getting Started guide!