use CORS (prerequisite on server side: http://code.google.com/p/bimserver/issues/detail?id=380)

ajax app: show errors
viewer: also load Base64 encoded model data

Author: hlg

Client/ThreeJsViewer.js

@@ -51,23 +51,18 @@ function ThreeJsViewer(){
         this.onclick = function(){};
     };
 
-    this.loadModel = function(modelUrl){
-        var geometryLoader = new THREE.JSONLoader(true);
-
-        var callback = function(partId) { return function(geometry) {
-            var material = new THREE.MeshPhongMaterial({ color: this.UNSELECTED_COLOR });
-            var mesh = new THREE.Mesh(geometry, material);
-            mesh.doubleSided = false;
-            this.root.add(mesh);
-            this.meshes[mesh.geometry.id] = partId;
-        }.bind(this); }.bind(this);
-
-        var texture_path = geometryLoader.extractUrlbase(modelUrl);
-
-        var createModel = function(jsonObject, dummy, texturePath){ // callback will be ignored, curried on the fly
+    this.callback = function(partId) { return function(geometry) {
+        var material = new THREE.MeshPhongMaterial({ color: this.UNSELECTED_COLOR });
+        var mesh = new THREE.Mesh(geometry, material);
+        mesh.doubleSided = false;
+        this.root.add(mesh);
+        this.meshes[mesh.geometry.id] = partId;
+    }.bind(this); }.bind(this);
+
+    this.createModel = function(jsonObject, geometryModelCreator, texture_path){ // callback will be curried on the fly
             $.each(jsonObject, function(index, modelPart){
-                geometryLoader.createModel( modelPart.geometry, callback(modelPart.id), texture_path );
-            });
+                geometryModelCreator( modelPart.geometry, this.callback(modelPart.id), texture_path );
+            }.bind(this));
             var bb = this.computeBoundingBox();
             var ext = {x: bb.x[1] - bb.x[0], y: bb.y[1] - bb.y[0], z: bb.z[1] - bb.z[0]};
             // center mesh
@@ -80,12 +75,23 @@ function ThreeJsViewer(){
             // TODO: adjust clipping
         }.bind(this);
 
+    this.loadSerializedModel = function(serializedModel){
+        var geometryLoader = new THREE.JSONLoader(true);
+        var model = JSON.parse( serializedModel );
         geometryLoader.onLoadStart();
-        geometryLoader.loadAjaxJSON({createModel: createModel, onLoadComplete: geometryLoader.onLoadComplete}, modelUrl, {}, texture_path);
+        this.createModel(model, geometryLoader.createModel.bind(geometryLoader), 'localhost');
+        geometryLoader.onLoadComplete();
+    }
+
+    this.loadModel = function(modelUrl){
+        var geometryLoader = new THREE.JSONLoader(true);
+        var texture_path = geometryLoader.extractUrlbase(modelUrl);
+        geometryLoader.onLoadStart();
+        geometryLoader.loadAjaxJSON({createModel: this.createModel, onLoadComplete: geometryLoader.onLoadComplete}, modelUrl, geometryLoader.createModel.bind(geometryLoader), texture_path);
+    }.bind(this);
 
-    };
     this.clearModel = function(){
-        this.scene.removeChild(this.root);
+        this.scene.remove(this.root);
         this.root = new THREE.Object3D();
         this.scene.add(this.root);
         this.meshes = {};

Client/index_served.html

@@ -39,9 +39,11 @@
     <script src="Base64.js"></script>
     <script>
         var viewer;
+        var host = 'http://localhost';
         function revisionUpdate(poid) {
             $('#roids').empty();
-            $.ajax({url: '/rest/getAllRevisionsOfProject', data: 'poid='+poid, dataType: 'json', success: function(data){
+            $.ajax({url: host+'/rest/getAllRevisionsOfProject', data: 'poid='+poid, dataType: 'json',
+                xhrFields: { withCredentials: true}, success: function(data){
                 var select = $('#roids');
                 $(data.sRevision).sort(function(r1,r2){
                     return r1.id > r2.id;
@@ -53,19 +55,24 @@
         function projectUpdate() {
             $('#revision').show();
             $('#poids').empty();
-            $.ajax({url: '/rest/getAllReadableProjects', dataType: 'json', success: function(data) {
-                var select = $('#poids');
-                $(data.sProject).filter(function(i,project){
-                    return project.state == "ACTIVE" && project.name != "INT-Store";
-                }).sort(function(p1,p2){
-                    return p1.name > p2.name;
-                }).each(function(i, project) {
-                    $('<option />').val(project.oid).text(project.name).appendTo(select);
+                $.ajax({url: host+'/rest/getAllReadableProjects', dataType: 'json',
+                    xhrFields: { withCredentials: true}, success: function(data) {
+                        var select = $('#poids');
+                        $(data.sProject).filter(function(i,project){
+                            return project.state == "ACTIVE" && project.name != "INT-Store";
+                        }).sort(function(p1,p2){
+                            return p1.name > p2.name;
+                        }).each(function(i, project) {
+                            $('<option />').val(project.oid).text(project.name).appendTo(select);
+                        });
+                        revisionUpdate(select.val());
+                    }
                 });
-                revisionUpdate(select.val());
-            }});
         }
         $(document).ready(function() {
+            $('#errors').ajaxError(function(event, xhr, settings, thrown) {
+                $(this).text( 'Ajax error: ' +  thrown.message);
+            });
             viewer = new ThreeJsViewer();
             viewer.init($('#viewerContainer'));
             projectUpdate();
@@ -75,8 +82,9 @@
                     return;
                 }
                 $.ajax({
-                    url: '/rest/getDataObjectByGuid', dataType: 'json',
+                    url: host+'/rest/getDataObjectByGuid', dataType: 'json',
                     data: 'roid='+$('#roids').val()+'&guid='+id,
+                    xhrFields: { withCredentials: true},
                     success: function(data){
                         $('#selection').html(id + ' - ' + data.sDataObject.name + ' - ' + data.sDataObject.type);
                     }
@@ -88,14 +96,16 @@
             });
             $('#revision').submit(function(){
                 $.ajax({
-                    url: '/rest/download',
+                    url: host+'/rest/download',
                     data: 'roid='+$(this.roids).val()+'&serializerName=ThreeJs&sync=true&showOwn=true',
+                    xhrFields: { withCredentials: true},
                     success: function(data) {
                         viewer.clearModel();
                         $.ajax({
-                            url: '/rest/getDownloadData',
+                            url: host+'/rest/getDownloadData',
                             dataType: 'json',
                             data: 'actionId=' + data,
+                            xhrFields: { withCredentials: true},
                             success: function(model) {
                                 viewer.loadSerializedModel(Base64.decode(model.sCheckoutResult.file));
                             }
@@ -117,6 +127,7 @@
 </form>
 </div>
 <div id="viewerContainer"></div>
+<p id="errors"></p>
 <p class="boxed">
     selected: <span id="selection">nothing</span></p>
 </body>