Add Material to built-in object in Viewer by Autodesk View & Data API

By Xiaodong Liang

As mentioned in this blog, Fragment contains some basic attributes of the object, one of which is material. Similar to transformation, viewer.impl.getRenderProxy(model, fragId) returns the fragment object of Three.js. Through fragment.material, we can change the material of the object.

Generally, we could set the material in a color, or a texture. The code is very straightforward. The follow snippet is a reference. It assumes your code delegate the selection change event and there is an image named brick.jpg in the relative path of your main page.

//delegate selection change event

_viewer.addEventListener(Autodesk.Viewing.SELECTION_CHANGED_EVENT,

  onSelectedCallback);

 

function onSelectedCallback(event) {

 

    //prepare color material

    var color_diffuse = 0xAB00EE;

    var color_specular = 0xEEABEE;

    var colorM = new THREE.MeshPhongMaterial({

        color: color_diffuse,

        specular: color_specular

    });

    //add material to materials collection of viewer

    _viewer.impl.matman().addMaterial(

        'ADN-Material-' +

        "common color material",  // or a GUID

        colorM,

        true);

 

    // prepare texture material

    var tex = THREE.ImageUtils.loadTexture('images/brick.jpg');

    tex.wrapS = tex.wrapT = THREE.RepeatWrapping;

    tex.repeat.set(2, 2);

 

    var textureM = new THREE.MeshPhongMaterial({

        map: tex

    });

    tex.needsUpdate = true;

 

 

    //add material to materials collection of viewer

    _viewer.impl.matman().addMaterial(

    'ADN-Material-' +

    "texture material",  // or a GUID

      textureM,

      true);

 

    //get the first fragment of the selection           

    var fragId = event.fragIdsArray[0];

 

    //if nothing is selected

    if (typeof fragId == 'undefined') {

        return;

    }

 

    //Note: a fragment might contain sub fragments. 

    var fragIdsArray = (Array.isArray(fragId) ?

        fragId :

       [fragId]);

 

    //change material of every fragment of the mesh

    fragIdsArray.forEach(function (subFragId) {

 

        //get Mesh of this fragment

        var frag = _viewer.impl.getRenderProxy(

                    _viewer,

                    subFragId);

 

        // or 2 // method we want to test

        // 1. Color 2. Texture

        var typeofMaterial = 2;

 

        //Method 1: color material

        if (typeofMaterial == 1) {

            frag.material = colorM;

        }

 

         //Method 2: texture material

        else if (typeofMaterial == 2) {

            frag.material = textureM;

        }

 

    });

    _viewer.impl.invalidate(true);

 

}