search

opensourceBIM / BIMsurfer-before2019

This is the repository of the v1 and v2 version of BIM Surfer. It is not maintained anymore. Find the most recent version on https://github.com/opensourceBIM/BIMsurfer
MIT License
432 stars 195 forks source link

Example, which follows Bimsurfer implementation in bimview, can only show black canvas? #115

Closed ivanyuT closed 9 years ago

ivanyuT commented 9 years ago

I have read the example in BIMvie.ws and try to follow its pattern to construct my own example in the BIMsurfer folder. I can extract the ifc data from the bimserver. However, it can only show the black canvas without anything.

I suspect that I may miss something when I try to run "_this.viewer.loadGeometry(geometryLoader);" so when I render the model out, it cannot show anything.

Could you tell me what the problem is? Here are the codes.

myExample0.html

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Example 0</title>
<script type="text/javascript">
var debug = {};
</script>

<script type="text/javascript"
src="./lib/jquery-1.10.2/jquery-1.10.2.min.js"></script>
<script type="text/javascript"
src="./lib/jquery-1.10.2/jquery.cookie.js"></script>
<script type="text/javascript" src="./api/BIMSURFER.js"></script>
<script type="text/javascript" src="./lib/scenejs-4.0/scenejs.js"></script>
<script type="text/javascript" src="./api/SceneJS.js"></script>
<script type="text/javascript" src="./api/Constants.js"></script>
<script type="text/javascript" src="./api/ProgressLoader.js"></script>
<script type="text/javascript" src="./api/Types/Light.js"></script>
<script type="text/javascript" src="./api/Types/Light/Ambient.js"></script>
<script type="text/javascript" src="./api/Types/Light/Sun.js"></script>
<script type="text/javascript" src="./api/Control.js"></script>
<script type="text/javascript" src="./api/Control.js"></script>
<script type="text/javascript" src="./api/Control/ClickSelect.js"></script>
<script type="text/javascript" src="./api/Control/LayerList.js"></script>
<script type="text/javascript" src="./api/Control/ProgressBar.js"></script>
<script type="text/javascript" src="./api/Control/PickFlyOrbit.js"></script>
<script type="text/javascript" src="./api/Control/ObjectTreeView.js"></script>
<script type="text/javascript" src="./api/Events.js"></script>
<script type="text/javascript" src="./api/StringView.js"></script>
<script type="text/javascript" src="./api/GeometryLoader.js"></script>
<script type="text/javascript" src="./api/AsyncStream.js"></script>
<script type="text/javascript" src="./api/DataInputStream.js"></script>
<script type="text/javascript" src="./api/Viewer.js"></script>
<script type="text/javascript" src="./api/Util.js"></script>
<script type="text/javascript" src="js/bimserverapibootstrap.js"></script>
<script type="text/javascript" src="js/String.js"></script>
<script type="text/javascript" src="js/utils.js"></script>

<link rel="stylesheet" href="./css/basic.css" type="text/css" />
<link rel="stylesheet" href="./css/example1.css" type="text/css" />
<link rel="stylesheet"
href="./lib/jquery-ui-1.10.3.custom/css/custom-theme/jquery-ui-1.10.3.custom.css">

<script type="text/javascript"
src="./lib/jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.js"></script>

<script type="text/javascript" src="./js/myExample0.js"></script>

</head>
<body>
<button id="btnTest" onClick="show(); return false;">Test</button>
<p id="consoleP"></p>

<div id="divBim3DView"></div>
</body>
</html>

Here is the javascript file: myExample0.js

    /**
 * 
 */
"user strict"

function show()
{
    var _this = this;

    var bimServerUrl = "http://127.0.0.1:8080/";
    var email = "admin@bimserver.org";
    var password = "admin";

    var simpleSmallProject = null;
    var defaultModel = null;

    var ifcObjectArray = [];
    var loadedOids = {};

    // Connect to the bim Server

    // load BimServer Api 
    loadBimServerApi(bimServerUrl, null, function(bimServerApi){

        _this.bimServerApi = bimServerApi;

        loginBimServer();

    });

    function loginBimServer()
    {
        _this.bimServerApi.login(
                email, 
                password, 
                false, 
                function(){

                    Global.notifier = new Notifier();

                    _this.viewer = new BIMSURFER.Viewer(_this.bimServerApi, 'divBim3DView');

                    setUpBimsurferViewer();

                    showProjects();
                }
        );
    }

    function setUpBimsurferViewer()
    {
        resize();

        _this.viewer.loadScene(function(){

            var clickSelect = _this.viewer.getControl("BIMSURFER.Control.ClickSelect");
            clickSelect.activate();
            clickSelect.events.register('select', _this.nodeSelected);
            clickSelect.events.register('unselect', _this.nodeUnselected);

            var orbit = _this.viewer.getControl("BIMSURFER.Control.PickFlyOrbit");
        });
    }

    function showProjects()
    {
        _this.bimServerApi.call("Bimsie1ServiceInterface", 
                "getProjectSmallByPoid", 
                {poid: '655361'}, // Simple Project
                function(project){

                    simpleSmallProject = project;

                    getModelByProject(simpleSmallProject );

                });

    }

    function getModelByProject(project)
    {
        var models = {};

        _this.bimServerApi.getModel(
                project.oid, 
                project.lastRevisionId, 
                project.schema,
                false,
                function(model)
                {
                    defaultModel = model;

                    preloadModel(simpleSmallProject, model, project.lastRevisionId)
                        .done(function(){

                                loadRevision();

                                model.getAllOfType("IfcProject", true, function(project){

                                    console.log("myExample0.html, getModelByProject(), project");
                                    console.log(project);

                                    getIfcObjectRecursive(project);

                                    console.log("myExample0.html, getModelByProject(), ifcObjectArray");
                                    console.log(ifcObjectArray);

                                    displayInWebGL(model);
    //                          othis.buildDecomposedTree(project, node, types);
                                });
                        });
//                      .done(function(){

//                          promise.fire();
//                          node.li.append(node.ul);
//                          node.doneLoading();
//                      });;

//                  console.log(simpleSmallProject);
                });
    }

    function displayInWebGL(model)
    {
        var ifcOidsArray = [];

        ifcObjectArray.forEach
        (
            function(ifcObject)
            {
                ifcOidsArray.push(ifcObject.oid);
            }
        );

        console.log(ifcOidsArray);

        var objectArray = [];
        var oldModeArray = [];

        ifcOidsArray.forEach(function(id){
            model.get(id, 
                    function(object)
                    {
                        if (object != null) 
                        {
                            var oldMode = object.trans.mode;
//                          object.trans.mode = mode;
                            objectArray.push(object);
                            oldModeArray.push(oldMode);
                        }
                    }
            );
        });

        console.log(objectArray);
        console.log(oldModeArray);

        render3D(objectArray, model);
    }

    /*
     * Logic
     * */

    function render3D(ifcObjectArray, model)
    {
        var uniqueRoids = [];

        if (!Array.isArray(ifcObjectArray)) {
            ifcObjectArray = [ifcObjectArray];
        }

        var oidsNotLoaded = [];

        for (var i=0; i 0) {

            console.warn("geometry loader");

            var models = {};
            models[model.roid] = model;

            var geometryLoader = new GeometryLoader(Global.bimServerApi, models, _this.viewer);

            console.warn("uniqueRoids = " + JSON.stringify(uniqueRoids) );
            console.warn("oidsNotLoaded = " + JSON.stringify(oidsNotLoaded) );

            geometryLoader.setLoadOids(uniqueRoids, oidsNotLoaded);

            _this.viewer.loadGeometry(geometryLoader);
        }

    }

    this.updateVisibility = function(object) {

        var threeDObject = _this.viewer.scene.findNode(object.oid);
        var mode = object.trans.mode;

        if (threeDObject != null) 
        {
            var matrix = threeDObject.nodes[0];
            var geometryNode = matrix.nodes[0];
            if (mode == 0) 
            {
                threeDObject.findParentByType("enable").setEnabled(true);
                if (geometryNode._core.arrays.colors != null) 
                {
                    if (object.trans.colorOverride != null) 
                    {
                        changeColorOfObject(object, object.trans.colorOverride);
                    } 
                    else {

                        if (geometryNode.coreId != null && ("" + geometryNode.coreId).endsWith("_Visualization")) {

                            // This is a complex-material object which had been modified, return it to the old state
                            if (geometryNode._core.arrays.colors != null) {
                                matrix.removeNode(geometryNode);

                                var newGeometry = {
                                    type: "geometry",
                                    coreId: geometryNode.getCoreId().replace("_Visualization", "")
                                }

                                matrix.addNode(newGeometry);
                            }
                        }
                    }
                } else {
                    if (object.trans.colorOverride != null) 
                    {
                        _this.changeColorOfObject(object, object.trans.colorOverride);
                    } 
                    else 
                    {
                        var material = BIMSURFER.Constants.materials[object.getType()];
                        // Hack to get the roof to be red.....
                        if (object.getType() == "IfcSlab") {
                            if (object.getPredefinedType() == "ROOF") {
                                material = BIMSURFER.Constants.materials["IfcRoof"];
                            }
                        }
                        if (material == null) {
                            material = BIMSURFER.Constants.materials.DEFAULT;
                        }

                        var color = {r: material.r, g: material.g, b: material.b, a: material.a};
                        _this.changeColorOfObject(object, color);
                    }
                }
            } 
            else if (mode == 1) 
            {
                threeDObject.findParentByType("enable").setEnabled(true);
                var color = {};
                color.a = 0.5;
                color.r = 0.5;
                color.g = 0.5;
                color.b = 0.5;
                if (_this.selectedId == object.oid) {
                    threeDObject.getNode("highlight").set("alpha", 0.5);
                }
                _this.changeColorOfObject(object, color);
            }
            else if (mode == 2) 
            {
                threeDObject.findParentByType("enable").setEnabled(false);
            }
        }
    };

    this.changeColorOfObject = function(object, color){

        var threeDObject = _this.viewer.scene.findNode(object.oid);
        if (threeDObject != null) {
            var matrix = threeDObject.nodes[0];
            var geometryNode = matrix.nodes[0];
            if (geometryNode._core.arrays.colors != null) {
                var groupId = threeDObject.findParentByType("translate").data.groupId;

                var geometry = {
                    type: "geometry",
                    primitive: "triangles"
                };

                geometry.coreId = geometryNode.getCoreId() + "_Visualization";
                geometry.indices = geometryNode._core.arrays.indices;
                geometry.positions = geometryNode._core.arrays.positions;
                geometry.normals = geometryNode._core.arrays.normals;

                geometry.colors = [];
                for (var i=0; i");
                                        var label = $("");
                                        div.append(label);
                                        var checkbox = $("");
                                        checkbox.change(function(){
                                            var checked = $(this).is(":checked");
                                            var guids = [];
                                            var map = {};
                                            vis.changes.forEach(function(change){
                                                guids = guids.concat(change.selector.guids);
                                                change.selector.guids.forEach(function(guid){
                                                    map[guid] = change;
                                                });
                                            });
                                            var model = projectPage.models[roid];
                                            var objects = [];
                                            model.getByGuids(guids, function(object){
                                                var change = map[object.getGlobalId()];
                                                objects.push(object);
                                                object.trans.mode = 0;
                                                if (checked) {
                                                    object.trans.colorOverride = change.effect.color;
                                                } else {
                                                    object.trans.colorOverride = null;
                                                }
                                            }).done(function(){
                                                o.objectVisibilityChanged(objects);
                                            });
                                        });
                                        label.append(checkbox);
                                        label.append(vis.name);
                                        containerDiv.find(".visualization").show();
                                        containerDiv.find(".visualization .panel-body").append(div);
                                    });
                                }
                            });
                    });             
            }
        });
    };

    function getIfcObjectRecursive(ifcObject)
    {
        ifcObjectArray.push(ifcObject);

        if (ifcObject.getType() == "IfcBuildingStorey") 
        {
            ifcObject.getContainsElements(
                    function(relReferencedInSpatialStructure)
                    {
                        relReferencedInSpatialStructure.getRelatedElements(
                                function(relatedElement)
                                {
                                    processRelatedElement(relatedElement);
                                }
                        ).done(
                                function()
                                {
                                    ifcObject.getIsDecomposedBy(
                                            function(isDecomposedBy)
                                            {
                                                if (isDecomposedBy != null) 
                                                {
                                                    isDecomposedBy.getRelatedObjects(
                                                            function(relatedObject)
                                                            {
                                                                processRelatedElement(relatedObject);
                                                            }
                                                    );
                                                }
                                            }
                                    );
                                }
                        );
                }
            );
        } 
        else
        {
            ifcObject.getIsDecomposedBy(function(isDecomposedBy)
            {
                if (isDecomposedBy != null) 
                {
                    isDecomposedBy.getRelatedObjects(function(relatedObject){

                        getIfcObjectRecursive(relatedObject);
                    });
                }
            });
        }
    }

    function processRelatedElement( relatedElement )
    {
        getIfcObjectRecursive(relatedElement);
    }
    /*
     * UI
     * */

    // Adjust the window size
    function resize(){
        $("#divBim3DView").width($(window).width() + "px");
        $("#divBim3DView").height(($(window).height() - 98) + "px");
        $("#divBim3DView").css("width", ($(window).width() - 98) + "px");
        $("#divBim3DView").css("height", ($(window).height() - 98) + "px");
        _this.viewer.resize($('div#divBim3DView').width(), $('div#divBim3DView').height());
    };

    function Notifier()
    {
        var lineBreak = "
";

        this.setInfo = function ( message )
        {
            $("#consoleP").append(message + lineBreak);
        }

        this.setSuccess = function(message)
        {
            $("#consoleP").append(message + lineBreak);
        }
    }
}
rubendel commented 9 years ago

Do the original examples work?

A few comments on your code:

ivanyuT commented 9 years ago

The example in bimview works very well and I can see the model.

However, the example1.html in Bimsurfer does not work and when I run it, it has a few errors.

I suspect it that it may be because of this few lines of missing some parameters:

  1. The missing definition of the variable "Global" and assign the property "bimServerApi" to the "Global".

  2. The code: 

       o.model = o.bimServerApi.getModel(project.oid, project.lastRevisionId, false, function(model){
//          model.getAllOfType("IfcProject", true, function(project){
//              buildDecomposedTree(project, $(".tree"), 0);
//          });
   });

    the method call, getModel, has been missed the project schema's parameter.

  3. The code:

                               var geometryLoader = new GeometryLoader(o.bimServerApi, o.viewer);

    It may miss the models array in the parameters.

Thank you for your comment.

I comment the "user strict" and change the encoding to UTF-8 but it has only the black canvas.

rubendel commented 9 years ago

Fixed the example1 in BIMsurfer.