finalize ThreeJS JSON model 4 update, update Client to three.js r73, jquery 1.11.3

Author: hlg

Client/Three.js

@@ -1,8 +1,7 @@
 function ThreeJsViewer(){
 
-    this.SELECTED_COLOR = 0xffff00;
-    this.UNSELECTED_COLOR = 0xFF0000;
-    this.meshes = {};
+    this.selectedMaterial = new THREE.MeshPhongMaterial({ color: 0xffff00 });
+    this.unselectedMaterial = new THREE.MeshPhongMaterial({color: 0xFF0000});
 
     this.init = function(container) {
 
@@ -11,23 +10,22 @@ function ThreeJsViewer(){
 
         this.renderer = new THREE.WebGLRenderer();
         this.renderer.sortObjects = false;
+        this.renderer.setClearColor(0xcceeee);
         this.renderer.setSize( this.size.width, this.size.height);
 
         this.scene = new THREE.Scene();
 
         this.camera = new THREE.PerspectiveCamera(50, this.size.width / this.size.height, 1, 100000); // fov, aspect, near, far
-        this.camera.up = new THREE.Vector3(0, 0, 1);
-        this.camera.position = new THREE.Vector3(1, 1, 1);
+        this.camera.up.set(0, 0, 1);
+        this.camera.position.set(1, 1, 1);
 
         this.controls = new THREE.TrackballControls(this.camera, this.renderer.domElement);
         this.controls.minDistance = 0.1;
         this.controls.maxDistance = 100000;
         this.controls.target.position = new THREE.Vector3(0, 0, 0);
         this.controls.screen.width =  this.size.width;
         this.controls.screen.height = this.size.height;
-
-        this.scene.add(this.camera);
-
+        
         this.root = new THREE.Object3D();
         this.scene.add(this.root);
 
@@ -48,72 +46,40 @@ function ThreeJsViewer(){
         container.click({viewer: this}, this.onMouseDown);
         container.append(this.renderer.domElement);
         this.container = container;
-        this.onclick = function(){};
-    };
-
-    this.registerGeometryFunc = function(){
-        var viewer = this;
-        return function(partId) {
-            var material = new THREE.MeshPhongMaterial({ color: viewer.UNSELECTED_COLOR });
-            return function(geometry) {
-                var mesh = new THREE.Mesh(geometry, material);
-                mesh.doubleSided = false;
-                viewer.root.add(mesh);
-                viewer.meshes[mesh.geometry.id] = partId;
-            };
-        };
+        this.onclick = function(){}; 
     };
 
-    this.finishScene = function(){
-        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
-        this.root.position.x = ext.x * -.5 - bb.x[0];
-        this.root.position.y = ext.y * -.5 - bb.y[0];
-        this.root.position.z = ext.z * -.5 - bb.z[0];
-
+    this.centerScene = function(){
+        var bb = new THREE.Box3()
+        var material = this.unselectedMaterial;
+        $.each(this.root.children, function(i,object){
+            bb.union(new THREE.Box3().setFromObject(object));
+            object.material = material;
+        });
+        var ext = {x: bb.max.x - bb.min.x, y: bb.max.y - bb.min.y, z: bb.max.z - bb.min.z};
+        this.root.position.set(ext.x * -.5 - bb.min.x, ext.y * -.5 - bb.min.y, ext.z * -.5 - bb.min.z);
         var maxExtent = Math.max(ext.x, ext.y, ext.z);
-        this.camera.position = new THREE.Vector3(maxExtent, maxExtent, maxExtent);
+        this.camera.position.set(maxExtent, maxExtent, maxExtent);
+        this.camera.lookAt(new THREE.Vector3(0,0,0));
         // TODO: adjust clipping
     };
 
     this.loadSerializedModel = function(serializedModel){
-        var geometryLoader = new JSONListLoader(true);
+        this.clearModel();
         var model = JSON.parse( serializedModel );
-        geometryLoader.onLoadStart();
-        geometryLoader.createModelFull(model, this.registerGeometryFunc(), 'localhost');    // jsonObject, modelPartCallback, texture_path
-        geometryLoader.onLoadComplete();
-        this.finishScene();
-    };
-
-    this.loadModel = function(modelUrl){
-        var geometryLoader = new JSONListLoader(true);
-        var texture_path = geometryLoader.extractUrlbase(modelUrl);
-        geometryLoader.onLoadStart();
-        geometryLoader.loadAjaxJSON(modelUrl, this.registerGeometryFunc(), texture_path);
-        this.finishScene();
+        var loader = new THREE.ObjectLoader();
+        var loadedScene = loader.parse(model, function(object){
+            // object.material=material;
+        });
+        this.root.add.apply(this.root, loadedScene.children);
+        this.centerScene();
+        this.renderer.render(this.scene,this.camera);
     };
 
     this.clearModel = function(){
         this.scene.remove(this.root);
         this.root = new THREE.Object3D();
         this.scene.add(this.root);
-        this.meshes = {};
-    };
-
-    this.computeBoundingBox = function(){
-        this.root.children[0].geometry.computeBoundingBox();
-        var initialBB = this.root.children[0].geometry.boundingBox;
-        var bb = {x: [initialBB.x[0], initialBB.x[1]], y: [initialBB.y[0], initialBB.y[1]], z: [initialBB.z[0], initialBB.z[1]]};
-        THREE.SceneUtils.traverseHierarchy(this.root, function(object){
-            object.geometry.computeBoundingBox();
-            $.each(['x', 'y', 'z'], function(index, dimension){
-                bb[dimension][0] = Math.min(bb[dimension][0], object.geometry.boundingBox[dimension][0]);
-                bb[dimension][1] = Math.max(bb[dimension][1], object.geometry.boundingBox[dimension][1]);
-            });
-
-        });
-        return bb;
     };
 
     this.onMouseDown = function(event) {
@@ -127,28 +93,27 @@ function ThreeJsViewer(){
 
         viewer.projector.unprojectVector(mouse, viewer.camera);
 
-        var ray = new THREE.Ray(viewer.camera.position, mouse.subSelf(viewer.camera.position).normalize());
+        var ray = new THREE.Raycaster(viewer.camera.position, mouse.sub(viewer.camera.position).normalize());
 
-        var intersects = ray.intersectScene(viewer.scene);
+        var intersects = ray.intersectObjects(viewer.root.children);
         if (intersects.length > 0) {
             if (viewer.selected != intersects[0].object) {
-                if (viewer.selected) viewer.selected.material.color.setHex(viewer.UNSELECTED_COLOR);
+                if (viewer.selected) viewer.selected.material = viewer.unselectedMaterial;
                 viewer.selected = intersects[0].object;
-                viewer.selected.material.color.setHex(viewer.SELECTED_COLOR);
+                viewer.selected.material = viewer.selectedMaterial;
             }
         } else {
-            if (viewer.selected) viewer.selected.material.color.setHex(viewer.UNSELECTED_COLOR);
+            if (viewer.selected) viewer.selected.material = viewer.unselectedMaterial;
             viewer.selected = null;
         }
-        viewer.onClick(viewer.selected ? viewer.meshes[viewer.selected.geometry.id] : null);
+        viewer.onClick(viewer.selected ? viewer.selected.uuid : null);
     };
 
     this.animate = function() {
         this._animate()();
     };
 
     this._animate = function(){
-        // Include examples/js/RequestAnimationFrame.js for cross-browser compatibility.
         var viewer = this;
         return function(){
             requestAnimationFrame(viewer._animate());
@@ -158,7 +123,6 @@ function ThreeJsViewer(){
 
     this.render = function() {
         this.controls.update();
-        this.renderer.clear();
         this.renderer.render(this.scene,this.camera);
     };
 }