Guide 3: Troubleshooting controls

Overview

In this simple guide, we'll show a few common controls that let users toggle various attributes of a 3D model in the display-3d-model component. A common use case for this is troubleshooting: there may be certain parts of a model animation or a particular scene in a model where it is useful to have e.g. a bounding box or show the wireframe, and in other parts a user would want to hide them. This includes the ability to toggle the bounding-box, debug-normals, double-sided-materials, material-vertex-groups, stats and or wireframe of the model.

The view we'll build will look as follows:

Developer notes:

Please refer to the developer notes in the first guide. The same notes apply to this guide.

Load and display the 3D model in your view

Please refer to this section in the first guide. We'll use the same foundations from the first guide in the below guide.

Add and initialize attributes

We'll start by adding boolean variables for all the troubleshooting attributes we want the user to be able to toggle. We'll also add these attributes to the display-3d-model:

main.view.xml
<view title="3D Model Viewer">
    <var name="animation_file" type="attachment" media="any" />   
    <var name="scale" type="number" />

    <var name="bounding_box" type="boolean" />
    <var name="debug_normals" type="boolean" />
    <var name="double_sided" type="boolean" />
    <var name="material_vertex" type="boolean" />
    <var name="stats" type="boolean" />
    <var name="wireframe" type="boolean" />
    
    <grid column-count="4">
        <cell column-span="3">
            <display-3d-model
                bind="animation_file"
                scale="scale"

                bounding-box="bounding_box"
                debug-normals="debug_normals"
                double-sided-materials="double_sided"
                material-vertex-groups="material_vertex"
                stats="stats"
                wireframe="wireframe"
                
            />
        </cell>
        <cell>
            <heading>Update 3D model:</heading>
            <capture-file bind="animation_file" label=".fbx.zip file" downloadable="true" />
        </cell>
    </grid>

</view>

We'll initialize each of the attributes in the init() function - here we're initializing all to false but that can of course be updated to true where it makes sense:

main.js
// This function is called when the app navigates to this view (using a link)
function init() {
    // initialize any data here that should be available when the view is shown
    view.scale = 0.1;

    // Troubleshooting controls defaults
    view.bounding_box = false;
    view.debug_normals = false;
    view.double_sided = false;
    view.material_vertex = false;
    view.stats = false;
    view.wireframe = false;

}

Adding controls (buttons)

Now we need to give the user the ability to toggle these attributes. We'll do this by adding a button for each, and adding a function that toggles the boolean:

main.view.xml
<view title="3D Model Viewer">
    <var name="animation_file" type="attachment" media="any" />   
    ...
    
    <grid column-count="4">
        <cell column-span="3">
            ...
        </cell>
        <cell>
            <heading>Troubleshooting Controls</heading>
            <button label="Toggle bounding box" on-press="$:toggleBool('bounding_box')" subtext="Current: {$:view.bounding_box}" validate="false" />
            <button label="Toggle debug normals" on-press="$:toggleBool('debug_normals')" subtext="Current: {$:view.debug_normals}" validate="false" />
            <button label="Toggle double-sided materials" on-press="$:toggleBool('double_sided')" subtext="Current: {$:view.double_sided}" validate="false" />
            <button label="Toggle material vertex groups" on-press="$:toggleBool('material_vertex')" subtext="Current: {$:view.material_vertex}" validate="false" />
            <button label="Toggle stats" on-press="$:toggleBool('stats')" subtext="Current: {$:view.stats}" validate="false" />
            <button label="Toggle wireframe" on-press="$:toggleBool('wireframe')" subtext="Current: {$:view.wireframe}" validate="false" />
            
            <heading>Update 3D model:</heading>
            <capture-file bind="animation_file" label=".fbx.zip file" downloadable="true" />
        </cell>
    </grid>

</view>

Each button calls a toggleBool() function, which takes a string as a parameter. We'll add a very simple function to our view's JS, which sets the dynamically specified view variable to its inverse value:

main.js
function toggleBool(varName) {
    // Set the view variable to its inverse
    view[varName] = !view[varName];
}

Complete view code

Below is the complete View XML and JS code used in this guide:

main.view.xml
<view title="3D Model Viewer">
    <var name="animation_file" type="attachment" media="any" />   
    <var name="scale" type="number" />

    <var name="bounding_box" type="boolean" />
    <var name="debug_normals" type="boolean" />
    <var name="double_sided" type="boolean" />
    <var name="material_vertex" type="boolean" />
    <var name="stats" type="boolean" />
    <var name="wireframe" type="boolean" />
    
    <grid column-count="4">
        <cell column-span="3">
            <display-3d-model
                bind="animation_file"
                scale="scale"

                bounding-box="bounding_box"
                debug-normals="debug_normals"
                double-sided-materials="double_sided"
                material-vertex-groups="material_vertex"
                stats="stats"
                wireframe="wireframe"
                
            />
        </cell>
        <cell>
            <heading>Troubleshooting Controls</heading>
            <button label="Toggle bounding box" on-press="$:toggleBool('bounding_box')" subtext="Current: {$:view.bounding_box}" validate="false" />
            <button label="Toggle debug normals" on-press="$:toggleBool('debug_normals')" subtext="Current: {$:view.debug_normals}" validate="false" />
            <button label="Toggle double-sided materials" on-press="$:toggleBool('double_sided')" subtext="Current: {$:view.double_sided}" validate="false" />
            <button label="Toggle material vertex groups" on-press="$:toggleBool('material_vertex')" subtext="Current: {$:view.material_vertex}" validate="false" />
            <button label="Toggle stats" on-press="$:toggleBool('stats')" subtext="Current: {$:view.stats}" validate="false" />
            <button label="Toggle wireframe" on-press="$:toggleBool('wireframe')" subtext="Current: {$:view.wireframe}" validate="false" />
            
            <heading>Update 3D model:</heading>
            <capture-file bind="animation_file" label=".fbx.zip file" downloadable="true" />
        </cell>
    </grid>

</view>
main.js
// This function is called when the app navigates to this view (using a link)
function init() {
    // initialize any data here that should be available when the view is shown
    view.scale = 0.1;

    // Troubleshooting controls defaults
    view.bounding_box = false;
    view.debug_normals = false;
    view.double_sided = false;
    view.material_vertex = false;
    view.stats = false;
    view.wireframe = false;

}

function toggleBool(varName) {
    // Set the view variable to its inverse
    view[varName] = !view[varName];
}

Last updated