28 Jan 2015

Add Geometry with Autodesk View & Data API by Three.js


As this blog introduces: The viewer is built using the THREE.js library, so as well as the high level control provided by the Autodesk View & Data API, you also have access and control over the underlying THREE.js objects that define the model scene (meshes, textures, camera, etc).

My colleagues have produced the nice codes on how to add meshes, add textures, manipulate camera etc in the extensions of Gallery Sample. While I’d just want to sort out the basic workflow to access the relevant abilities of THREE. These two days, I did some tests, and found Viewer itself has initialized the renderer and scene of THREE. viewer.impl.scene is the entry point if you are going to manipulate something of THREE scene. e.g. if you want to add geometries, the workflow is similar to what you did in native THREE, i.e. create the geometry, set its parameters, and finally add it by scene.add. While you would need to firstly add the material used by the geometry to the materials collection of Viewer by viewer.impl.matman().addMaterial();

The following is the demo code I practiced. It will add two spheres at the max point and min point of the model bounding box respectively. For more complex sample such as adding mesh, please refer to Autodesk.ADN.Viewing.Extension.MeshImporter

function addSphere() {        

    //create material red

    var material_red =

        new THREE.MeshPhongMaterial(

                  { color: 0xff0000 });

    //add material red to collection


    'ADN-Material' + 'red',




    //create material green

    var material_green =

        new THREE.MeshPhongMaterial(

                 { color: 0x00FF00 });

    //add material green to collection


    'ADN-Material' + 'green',




    //get bounding box of the model

    var boundingBox =


    var maxpt = boundingBox.max;

    var minpt = boundingBox.min;


    var xdiff =    maxpt.x - minpt.x;

    var ydiff =    maxpt.y - minpt.y;

    var zdiff =    maxpt.z - minpt.z;


    //set a nice radius in the model size

    var niceRadius =

               Math.pow((xdiff * xdiff +

                         ydiff * ydiff +

                         zdiff * zdiff), 0.5) / 10;


    //createsphere1 and place it at max point of boundingBox

    var sphere_maxpt =

         new THREE.Mesh(

                new THREE.SphereGeometry(

                          niceRadius, 20),           






    //create  sphere2 and place it at

    //min point of boundingBox

    var sphere_minpt =

        new THREE.Mesh(

            new THREE.SphereGeometry(

                       niceRadius, 20),               







    //add two spheres to scene




    //update the viewer       




Below is a snapshot of the demo, open the post in its own tab to see it running ...

Note: I have made an extension with  Gallery Sample. When the viewer loads the sample model, the extension will be loaded and executed.



Related Article