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 , , , , and or of the model.
The view we'll build will look as follows:
Developer notes:
Load and display the 3D model in your view
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:
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:
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:
// 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];
}
Please refer to the . The same notes apply to this guide.
Please refer to . We'll use the same foundations from the first guide in the below guide.
