Mapping Information to a 3D Model

The BioDigital Human allows users to map arbitrary data (images, multimedia, text, data, etc.) to a specific position on an anatomical object in the 3D scene. These mapping are referred to as annotations in the Human, and this tutorial will describe how to annotate anatomy objects manually or programmatically, and then gather information about the annotations that have been created.

Setting up the page

As usual, we’ll need our boilerplate Human Viewer code including the iframe and HumanAPI source:

    <!DOCTYPE html>
    <html style="height: 100%; overflow: hidden;">
        <body style="height: 100%; margin: 0">
            <iframe id="myWidget"
                    src="https://human.biodigital.com/widget?s=male&o=Bones_of_the_Head&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>

Once you have the above page saved and loaded into your browser, open up the JavaScript console.

Now, we just need to create an instance of the HumanAPI so we can interact with the scene:

    var human = new HumanAPI.Human("myWidget");

Interacting with Annotations

Annotations are handled by the API’s annotation property. We can do a quick check now to verify that there are no annotations in the scene:

    human.annotations.getAnnotations(function(annots) {
        console.log(annots);   // => {}
    });

So there’s nothing there yet. The primary way that users will create annotations is by clicking with the mouse to select the annotation’s position. But if you click now, you’ll notice that no annotations are being created. This is because annotations must first be enabled for the scene:

    human.annotations.setEnabled(true);

Now you can click on objects in the scene to create annotations, adding a title and a description to them. If we now do the same query we did before, we’ll see a list of the currently active annotations:

    human.annotations.getAnnotations(function(annots) {
        console.log(annots);   // => { __a0: ..., __a1: ... }
    });

Now let’s try pulling out some specific information about the annotations:

    human.annotations.getAnnotations(function(annots) {
        for (var name in annots) {
            var a = annots[name];
            console.log("Title:", a.title);
            console.log("Description:", a.description);
            console.log("Position: (", a.pos.join(", "), ")");
        }
    });

As a final task for this tutorial, let’s create an annotation programmatically, without waiting for the user’s click. This can be useful if you want to create annotations based on UI interactions, or to load annotations from external data.

    human.annotations.create({
        objectId: "maleAdult-Frontal_bone_52734",
        title: "Created Programmatically",
        description: "No hands!"
    });

That's all for this tutorial. Happy annotating!