「翻译」透过 Three.js 构件在 Viewer 模拟警报器

这篇文章是翻译自 Autodesk Forge 博客的 Add Three.js Shape to Simulate Alertor，作者是 Autodesk ADN 梁老师，更多细节请参考博客原文。

有几个小友问了梁老师如何通过 Three.js 的构件来模拟设备告警或是设备故障的情境。而这在 Forge Viewer 里是非常容易的，小友们只要透过 Three.js 在 Viewer 里新增一个 Three.js 的自定形体，并且以时间为间隔来变更这个形体的材质即可达到。不过小友们必需注意在自定形体的状态变更时，调用 Viewer3DImpl.invalidate 函数来更新画面的小技巧，就像下方所示，而下面这个函数的参数表示的是我只要 Viewer 去更新形体的外观，而不是去更新整个场景。

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

知道这个小技巧之后，我们来看看如何实作警报器。下面的示例只是部份代码，并且假设了一个情境：浏览器画面上有一个按钮叫做 btnAlertorShape，以及所有的模型都已经被 _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;
}

上面代码的思路是在模型都被载入后，点击了 btnAlertorShape 按钮，并在画面上模型的任意位置点击鼠标左键。一个自订形体就这时候出现在画面上，它的颜色会根据时间在红色与绿色之间变动，他的效果就像这个样子：https://flint-prodcms-forge.s...