Happy Easter, setThemingColor on model material.

Creating an extension is the recommended approach to add custom code to Viewer. And in most cases we want some UI for it: buttons & panels. This skeleton code shows how to create an extension with that. 

We are going to use a method that is part of Viewer3D library called setThemingColor 

We need a THREE JS Vector4 with the RGB and the Transparency values to be in a range from 0-1

A good point of reference in order to add an extension to your project will be this post done by my colleague Augusto Goncalves a few weeks back, I based the structure of my extension in the same way he does. Here is his post for reference extension-skeleton-toolbar-docking-panel 

Here is how my Color Extension looks. 

// *******************************************
// My Color Extension
// *******************************************

function MyColorExtension(viewer, options) {
    Autodesk.Viewing.Extension.call(this, viewer, options);
  }
  
  MyColorExtension.prototype = Object.create(Autodesk.Viewing.Extension.prototype);
  MyColorExtension.prototype.constructor = MyColorExtension;

  MyColorExtension.prototype.load = function() {

    if (this.viewer.toolbar) {
      // Toolbar is already available, create the UI
      this.createUI();
    } else {
      // Toolbar hasn't been created yet, wait until we get notification of its creation
      this.onToolbarCreatedBinded = this.onToolbarCreated.bind(this);
      this.viewer.addEventListener(av.TOOLBAR_CREATED_EVENT, this.onToolbarCreatedBinded);
    }
  
    return true;
  };
  
  MyColorExtension.prototype.onToolbarCreated = function() {
    this.viewer.removeEventListener(av.TOOLBAR_CREATED_EVENT, this.onToolbarCreatedBinded);
    this.onToolbarCreatedBinded = null;
    this.createUI();
  };
  
  MyColorExtension.prototype.createUI = function() {
    // alert('TODO: Create Toolbar!');
  
    var viewer = this.viewer;
  
    // Button 1
    var button1 = new Autodesk.Viewing.UI.Button('red-bunny');
    button1.onClick = function(e) {
        var red = new THREE.Vector4(1, 0, 0, 0.5);
        viewer.setThemingColor(3,red);
    };
    button1.addClass('red-bunny');
    button1.setToolTip('Red Bunny');
  
    // Button 2
    var button2 = new Autodesk.Viewing.UI.Button('green-bunny');
    button2.onClick = function(e) {
        var green = new THREE.Vector4(0, 0.5, 0, 0.5);
        viewer.setThemingColor(3,green);
    };
    button2.addClass('green-bunny');
    button2.setToolTip('Green Bunny');

     // Button 3
     var button3 = new Autodesk.Viewing.UI.Button('blue-bunny');
     button3.onClick = function(e) {
        var blue = new THREE.Vector4(0, 0, 0.5, 0.5);
        viewer.setThemingColor(3,blue);
     };
     button3.addClass('blue-bunny');
     button3.setToolTip('Blue Bunny');
  
    // SubToolbar
    this.subToolbar = new Autodesk.Viewing.UI.ControlGroup('my-custom-view-toolbar');
    this.subToolbar.addControl(button1);
    this.subToolbar.addControl(button2);
    this.subToolbar.addControl(button3);
  
    viewer.toolbar.addControl(this.subToolbar);
  };

  MyColorExtension.prototype.unload = function() {
    this.viewer.toolbar.removeControl(this.subToolbar);
    return true;
  };
  
    
  Autodesk.Viewing.theExtensionManager.registerExtension('MyColorExtension', MyColorExtension);

Now let's add style in the HTML for the toolbar buttons to look good.

<style>
  .red-bunny {
    background: red;
  }
  .green-bunny {
    background: green;
  }
  .blue-bunny {
    background: blue;
  }
</style>

and also let's reference the extension file in both our HTML and JS.

Reference in HTML 

<script src="js/MyColorExtension.js"></script>

Reference in JS file

 viewerApp.registerViewer(viewerApp.k3D, Autodesk.Viewing.Private.GuiViewer3D, { extensions: ['MyColorExtension'] });

And here are the final looks of our colored bunny. Happy Easter!