6 Jul 2017

Add Three.js Shape to Simulate Alertor

Default blog image

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. 


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 {
                        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(

         //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.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);

            unbind("click", onMouseClick);

//normalize the screenpoint
function normalizeCoords (screenPoint) {

    var viewport =

    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.



Related Article

Posted By

Xiaodong Liang

Xiaodong Liang has been with Autodesk since 2007, focusing on providing programming support, consulting, training and evangelism to external developers. He started his career China and now lives in Beijing, China. Xiaodong is currently a developer consultant in the team Developer Technical Services (DevTech), the worldwide team of API gurus providing technical services through the Autodesk Developer Network. He...