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.
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)functioninit() {// initialize any data here that should be available when the view is shownview.scale =0.1;// Troubleshooting controls defaultsview.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
functiontoggleBool(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)functioninit() {// initialize any data here that should be available when the view is shownview.scale =0.1;// Troubleshooting controls defaultsview.bounding_box =false;view.debug_normals =false;view.double_sided =false;view.material_vertex =false;view.stats =false;view.wireframe =false;}functiontoggleBool(varName) {// Set the view variable to its inverse view[varName] =!view[varName];}
