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

By Xiaodong Liang

 

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

    _viewer.impl.matman().addMaterial(

    'ADN-Material' + 'red',

    material_red,

    true);

 

    //create material green

    var material_green =

        new THREE.MeshPhongMaterial(

                 { color: 0x00FF00 });

    //add material green to collection

    _viewer.impl.matman().addMaterial(

    'ADN-Material' + 'green',

    material_green,

    true);

 

    //get bounding box of the model

    var boundingBox =

        _viewer.model.getBoundingBox();

    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),           

                material_red);

    sphere_maxpt.position.set(maxpt.x,

                              maxpt.y,

                              maxpt.z);

 

    //create  sphere2 and place it at

    //min point of boundingBox

    var sphere_minpt =

        new THREE.Mesh(

            new THREE.SphereGeometry(

                       niceRadius, 20),               

            material_green)

    sphere_minpt.position.set(minpt.x,

                              minpt.y,

                              minpt.z);

 

 

    //add two spheres to scene

    _viewer.impl.scene.add(sphere_maxpt);

    _viewer.impl.scene.add(sphere_minpt);

 

    //update the viewer       

    _viewer.impl.invalidate(true);

       

}

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.

Comments

[Александр Усов]

How I can Axes?
I write
var axes = new THREE.AxisHelper(20);
viewer.impl.scene.add(axes);
And recieve the message:
"Only THREE.Mesh can be rendered by the Firefly renderer. Use THREE.Mesh to draw lines."
It work in three.js but not work with autodesk viewer, why?

[Xiaodong Liang]

Hi Александр,

Viewer API might have not wrapped this object, while it looks like THREE.AxisHelper is just 3 lines…

You can take a look at our BoundingBox extension, it’s drawing lines, works in the viewer:
http://viewer.autodesk.io/node/gallery/uploads/extensions/Autodesk.ADN.Viewing.Extension.BoundingBox.js

some code snippets:

var material = new THREE.LineBasicMaterial({
color: 0xffff00,
//opacity: 1.0,
linewidth: 5
});

_viewer.impl.matman().addMaterial(
'ADN-Material-Line',
material,
true);

function drawLines(coordsArray, material) {

for (var i = 0; i < coordsArray.length; i+=2) {

var start = coordsArray[i];
var end = coordsArray[i+1];

var geometry = new THREE.Geometry();

geometry.vertices.push(new THREE.Vector3(
start.x, start.y, start.z));

geometry.vertices.push(new THREE.Vector3(
end.x, end.y, end.z));

geometry.computeLineDistances();

var line = new THREE.Line(geometry, material);

_viewer.impl.scene.add(line);
}
}