#3 - setup threejs for 3 layer network view

obrienlabs · Jul 10, 2017 · 5148616 · 5148616
1 parent e60fb4b
commit 5148616
Showing 1 changed file with 29 additions and 7 deletions.
diff --git a/onap-demo.web/src/main/resources/static/index.html b/onap-demo.web/src/main/resources/static/index.html
@@ -47,9 +47,11 @@
         <script>
             if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
             var group, camera, scene, renderer, frameStep, maxFrame;
-            var cube1material, cube1state, texture1, texture2, aspect;
+            var cube1material, cube1state, texture1, texture2, aspect, gridOffset, layerOffset;
             maxFrame = 20; frameStep = 10;
             aspect = 2;
+            gridOffset = 2.5;
+            layerOffset = gridOffset * 5;
             cube1state = 1;
             init();
             animate();
@@ -64,7 +66,7 @@
                 document.body.appendChild( renderer.domElement );
 
                 // https://threejs.org/docs/#api/cameras/PerspectiveCamera
-                camera = new THREE.PerspectiveCamera( 100, window.innerWidth / window.innerHeight * aspect, 1, 1000 );
+                camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight * aspect, 1, 1200 );
                 camera.position.set( 15, 20, 30 );
                 scene.add( camera );
 
@@ -91,18 +93,18 @@
                 // points
                 //https://threejs.org/docs/#api/geometries/BoxGeometry
                 //var pointsGeometry = new THREE.DodecahedronGeometry( 10 );
-                var pointsGeometry = new THREE.BoxGeometry( 10,10,10 );
+                var pointsGeometry = new THREE.BoxGeometry( 2*gridOffset,2*gridOffset,2*gridOffset);
                 texture1 = loader.load('textures/sprites/logo_onap_4x.png')
                 texture2 = loader.load('textures/sprites/logo_onap_4xtint.png')
                 //var material = new THREE.PointsMaterial( { color: 0x0080ff, map: texture, size: 1, alphaTest: 0.5} );
-                var material = new THREE.MeshBasicMaterial( {color: 0xffff00, map: texture} );
+                //var material = new THREE.MeshBasicMaterial( {color: 0xffff00, map: texture} );
                 //cube1material = material;
-                var points = new THREE.Points( pointsGeometry, material );
-                group.add( points );
+                //var points = new THREE.Points( pointsGeometry, material );
+                //group.add( points );
 
                 // convex hull
                 //var meshMaterial = new THREE.MeshLambertMaterial( { color: 0xffffff, opacity: 0.9, transparent: true} );
-                var meshMaterial = new THREE.MeshLambertMaterial( { color: 0xfffffff, opacity: 0.9, transparent: true} );
+                var meshMaterial = new THREE.MeshLambertMaterial( { color: 0xfffffff, opacity: 0.9, transparent: false} );
                 //var meshMaterial = material;
                 cube1material = meshMaterial;
                 var meshGeometry = new THREE.ConvexBufferGeometry( pointsGeometry.vertices );
@@ -114,7 +116,27 @@
                 var mesh = new THREE.Mesh( meshGeometry, meshMaterial);//.clone() );
                 mesh.material.side = THREE.FrontSide; // front faces
                 mesh.renderOrder = 1;
+                mesh.position.y = gridOffset;
                 group.add( mesh );
+
+                // layers
+                var layer0Geo = new THREE.BoxGeometry( 60,0.1,30 );
+                var layer0Material = new THREE.MeshLambertMaterial( { color: 0xccccff, opacity: 0.2, transparent: true} );
+                var layer0Mesh = new THREE.Mesh( layer0Geo, layer0Material);
+                layer0Mesh.position.y = layerOffset;
+                group.add(layer0Mesh);
+
+                var layer1Geo = new THREE.BoxGeometry( 60,0.1,30 );
+                var layer1Material = new THREE.MeshLambertMaterial( { color: 0xccccff, opacity: 0.2, transparent: true} );
+                var layer1Mesh = new THREE.Mesh( layer1Geo, layer1Material);
+                layer1Mesh.position.y = 0;                
+                group.add(layer1Mesh);
+
+                var layer2Geo = new THREE.BoxGeometry( 60,0.1,30 );
+                var layer2Material = new THREE.MeshLambertMaterial( { color: 0xccccff, opacity: 0.2, transparent: true} );
+                var layer2Mesh = new THREE.Mesh( layer2Geo, layer2Material);
+                layer2Mesh.position.y = -layerOffset;                
+                group.add(layer2Mesh);
 
                 window.addEventListener( 'resize', onWindowResize, false );
             }