Add Three.js Shape to Simulate Alertor

Follow @coldwood

A couple of customers asked me how to add THREE.js shapes to simulate the scenario with an shining alertor to indicate the emergent issue or something malfunction.

It is simple to add THREE.js shape to Forge Viewer and set an interval to change the material or other attributes of THREE.js shape. The only trick is when the shape is updated, call invalidate with the arguments below, i.e. update the appearance of the objects only, instead of update whole scene, otherwise, the whole scene will also being refreshed, which is annoying. 

             _viewer3D.impl.invalidate(false,true,true); 

The code snippet assumes a button named 'btnAlertorShape' is available and the model has been loaded with a valid _viewer3D.

var _viewer3D  = null;
var _currentShape= null;

//for clear interval
var _interval_ID = null;

$(document).ready (function () {
   
        $('#btnAlertorShape').click (function (evt) {

            if(_viewer3D == null){
                alert('Viewer 3D not initialized!');
                }
                else {
                    $(_viewer3D.container).
                        bind("click", onMouseClick);
                }
                
        });
});

//when the mouse clicks
function onMouseClick (event) {

     var screenPoint = {
        x: event.clientX,
        y: event.clientY
    };

    var n = normalizeCoords(screenPoint);

    //get hit point
    var hitTest = _viewer3D.utilities.getHitPoint(
        n.x,
        n.y);

    if(hitTest)
    {
         //add a sphere.
         var sprad = 10;
         var material= new THREE.MeshBasicMaterial( {color: 0xff0000} );

         var geometry_sphere = new THREE.SphereGeometry( sprad, 60, 40 );
         geometry_sphere.applyMatrix( new THREE.Matrix4().makeTranslation( hitTest.x, hitTest.y, hitTest.z ) );
         _currentShape = new THREE.Mesh( geometry_sphere, material );
  
         _viewer3D.impl.scene.add(_currentShape);
        _viewer3D.impl.invalidate(true) ;

        //start an interval to change the color of the shape
         _interval_ID = setInterval(function(){

             var curColor = _currentShape.material.color;
             curColor = (curColor.getHex()==0xff0000?0x00ff00:0xff0000);
             _currentShape.material.color.setHex (curColor);
              _viewer3D.impl.invalidate(false,true,true); 

         },100);
         
        $(_viewer3D.container).
            unbind("click", onMouseClick);
    }
}

//normalize the screenpoint
function normalizeCoords (screenPoint) {

    var viewport =
        _viewer3D.navigation.getScreenViewport();

    var n = {
        x: (screenPoint.x - viewport.left) / viewport.width,
        y: (screenPoint.y - viewport.top) / viewport.height
    };

    return n;
}
 

To play with the code, after the model is loaded, click the button, then click any position of the model, a sphere will show up on the position and its color will change in red and green in an interval.