Testing code for clipping planes and light

src/polyhedramatics/Polyhedra.js

@@ -2,10 +2,12 @@
     A dedicated way to create Polyhedra <3
 */
 
-var Polyhedra = function(center_pos, size, data, faceColors) {
+var Polyhedra = function(center_pos, size, data, faceColors, clippingPlanes) {
 
     THREE.Group.apply(this, arguments);
 
+    clippingPlanes = setdefault(clippingPlanes, []);
+    console.log(clippingPlanes);
 
     var vertices = [];
     for (var i = 0; i < data.vertex.length; i++)
@@ -19,7 +21,13 @@ var Polyhedra = function(center_pos, size, data, faceColors) {
     var faceMaterial = new THREE.MeshBasicMaterial(
     {
         color: 0xffffff,
-        vertexColors: THREE.FaceColors
+        vertexColors: THREE.FaceColors,
+        shininess: 100,
+        side: THREE.DoubleSide,
+        clippingPlanes: clippingPlanes,
+        clipShadows: false,
+        // opacity: .5,
+        // transparent: true,
     });
      //, side: THREE.DoubleSide  transparent:true, opacity:0.8 } );
 

src/polyhedramatics/Scheduler7.js

@@ -23,30 +23,82 @@ var Scheduler7 = function(startTime) {
     // SCENE fog degree 0.1
     this.initCamera = function(){
         SCENE.background = new THREE.Color(0xefd1b5);
+
         CAMERA.position.set(0, 0, 200);
         CAMERA.lookAt(0, 0, 0);
         CAMERA.rotation.set(0, 0, 0);
     }
 
     this.singPolyhedra = function(){
+
         var center_pos = [0, 0, 0],
-            size = 100,
+            size = 50,
             polyType = 'flute';
 
         var polyData = POLYHEDRA[instruMap[polyType]['solidName']];
+
+        var localPlane = new THREE.Plane(
+            pos2v([0, .8, .2]), 0.8
+        )
+
         var poly = new Polyhedra(center_pos,
                                  size,
                                  polyData,
-                                 instruMap[polyType]['faceColors']
+                                 instruMap[polyType]['faceColors'],
+                                 [localPlane]
                                 )
 
         poly.name = 'poly';
+        poly.castShadow = true;
+        poly.receiveShadow = true;
+
         SCENE.add(poly);
 
-        poly.polyRotateDuration([0.001, 0.001, 0.001], 10)
-        // var mesh = polyhedronDataToMesh(POLYHEDRA.TruncatedIcosidodecahedron);
-        // mesh.name = 'sing';
-        // SCENE.add(mesh);
+        poly.polyRotateDuration([0.01, 0.01, 0.01], 10)
+
+
+        var ground = new THREE.Mesh(
+                new THREE.PlaneBufferGeometry( 500, 500, 1, 1 ),
+                new THREE.MeshStandardMaterial( {
+                    color: new THREE.Color(0xefd1b5),
+                    shininess: 150
+                } )
+            );
+        ground.rotation.x = - Math.PI / 2; // rotates X/Y to X/Z
+        ground.receiveShadow = true;
+        ground.position.set(0, -100, 0);
+        SCENE.add( ground );
+
+
+        var spotLight = new THREE.SpotLight( 0x55505a, 2 );
+        spotLight.castShadow = true;
+        spotLight.shadow.camera.near = 10;
+        spotLight.shadow.camera.far = 500;
+        spotLight.shadow.camera.fov = 50;
+
+        spotLight.shadowDarkness = 1.0;
+        spotLight.shadowCameraVisible = true;
+
+        SCENE.add(spotLight);
+
+        spotLight.position.set(0, 500, 0);
+        lightHelper1 = new THREE.SpotLightHelper( spotLight );
+
+        SCENE.add(lightHelper1);
+
+                // var dirLight = new THREE.DirectionalLight( 0x55505a, 1 );
+                // dirLight.position.set( 0, 1000, 0 );
+                // dirLight.castShadow = true;
+                // dirLight.shadow.camera.near = 1;
+                // dirLight.shadow.camera.far = 10;
+                // dirLight.shadow.camera.right = 1;
+                // dirLight.shadow.camera.left = - 1;
+                // dirLight.shadow.camera.top  = 1;
+                // dirLight.shadow.camera.bottom = - 1;
+                // dirLight.shadow.mapSize.width = 1024;
+                // dirLight.shadow.mapSize.height = 1024;
+                // SCENE.add( dirLight );
+
 
     }
 }

src/polyhedramatics/main.html

@@ -49,7 +49,7 @@
              
             <button onclick="javascript:pause(); "> Pause </button>
             &nbsp;
-            <input id="inputStart" value=0.0 placeholder="0.0"
+            <input id="inputStart" value=281.0 placeholder="281.0"
                    onchange="javascript:changeInputStart(this);">
             <button onclick="javascript:playAudio();"> Play </button> &nbsp;
             <span style="color:white">  Time Lapse: <span id="timestamp"> </span>  &nbsp; &nbsp;

src/polyhedramatics/main.js

@@ -191,8 +191,10 @@ function init() {
 
     ///////////////
     // set RENDERER
-    RENDERER = new THREE.WebGLRenderer({ antialias: true});
+    RENDERER = new THREE.WebGLRenderer({ antialias: true, alpha: true});
     RENDERER.setSize(WIDTH, HEIGHT);
+    RENDERER.localClippingEnabled = true;
+    RENDERER.shadowMap.enabled = true;
 
     ///////////////
     CONTAINER = $('#main');
@@ -217,9 +219,10 @@ function initScene() {
     // var pointLight = new THREE.PointLight(
     //     ColorMap['grey'][0], 0.8
     // );
-
+    // pointLight.castShadow = true;
     // SCENE.add(pointLight);
 
+
     // var ambientLight = new THREE.PointLight(
     //     ColorMap['grey'][0], 0.3
     // );