Merge pull request #9 from benjaminluck/dev/combined

Dev/combined
bennyvdhoogen · May 13, 2017 · 22ff6c0 · 22ff6c0
2 parents 58cc3f9 + 96570a1
commit 22ff6c0
Show file tree

Hide file tree

Showing 4 changed files with 88 additions and 18 deletions.
diff --git a/index.php b/index.php
@@ -13,6 +13,8 @@
       <meta property="og:image" content="<?= $meta['image']; ?>">
       <meta property="og:url" content="<?= $meta['url']; ?>">
       <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
+      <script src="https://connect.soundcloud.com/sdk/sdk-3.1.2.js"></script>
+      <script src="https://w.soundcloud.com/player/api.js"></script>
       <script src="js/three.min.js"></script>
       <script src="js/controls/PointerLockControls.js"></script>
       <script src="js/loaders/collada/Animation.js"></script>
@@ -44,6 +46,10 @@
               ?>
           </ul>
         </div>
+        <iframe width="100%" height="450" style="display:none;" scrolling="no" frameborder="no" id="soundcloud-player"
+                src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/playlists/304658516&amp;color=ff5500&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false">
+        </iframe>
+        </div>
         <div class="float-left m-6 hidden-xs">
           <div id="mute-btn" class="mute-btn mute-btn-unmuted"></div>
           <div id="mute-btn-muted" class="mute-btn mute-btn-muted hidden"></div>

diff --git a/js/audioplayer.js b/js/audioplayer.js
@@ -1,3 +1,35 @@
+SC.initialize({
+  client_id: 'B4dzsr4tDHKQqDMMMREfUnwrwJzvGaD2'
+});
+
+var id = 293
+
+var scPlayer;
+SC.stream('/tracks/' + id).then(function(player){
+  console.log(player);
+
+  // making sure that 'http' is the first item in .protocols seems to fix issues with the flash obj being blocked
+  player.options.protocols = [
+    "http",
+    "rtmp"
+  ];
+
+//  player.play()
+  scPlayer = player;
+});
+
+function playTrack(trackNumber){
+  alert('playTrack');
+  if(trackNumber){
+    window.SC.Widget('soundcloud-player').skip(trackNumber);
+  }
+  window.SC.Widget('soundcloud-player').play();
+}
+
+//sound2 = new newSound(313537641);
+//newSound(313331549);
+
+
 songs = [{"name": "money", "src":"assets/snd/one.mp3"},
          {"name": "arab", "src":"assets/snd/two.mp3"},
          {"name": "sphlash", "src":"assets/snd/three.mp3"},
@@ -28,7 +60,18 @@ window['songHandler'] = {
   songVars : {},
   playSong : function(songName){
     songName = songName.replace('invis_', '');
-    alert('Play: ' + songName); 
+    var songIndex;
+    window['songs'].forEach(function(item, key){
+        if(item.name == songName){
+          songIndex = key;
+        }
+    });
+    window.playTrack(songIndex);
+    return true;
+
+    //
+    //
+    alert('Play: ' + songName);
     for(key in this.songVars){
       window[this.songVars[key]].stop();
       if(key == songName){

diff --git a/js/controls/OrbitControls.js b/js/controls/OrbitControls.js
@@ -277,6 +277,11 @@ THREE.OrbitControls = function ( object, domElement ) {
 
 	}
 
+	this.rotate = function(ang){
+		rotateLeft(ang);
+		scope.update();
+	}
+
 	function rotateLeft( angle ) {
 
 		sphericalDelta.theta -= angle;
@@ -499,7 +504,9 @@ THREE.OrbitControls = function ( object, domElement ) {
 
 	function handleMouseWheel( event ) {
 
-		//console.log( 'handleMouseWheel' );
+		console.log( 'handleMouseWheel' );
+
+		this.rotL(0.0001);
 
 		var delta = 0;
 
@@ -892,7 +899,7 @@ THREE.OrbitControls = function ( object, domElement ) {
 
 	scope.domElement.addEventListener( 'contextmenu', onContextMenu, false );
 
-	scope.domElement.addEventListener( 'mousedown', onMouseDown, false );
+	//scope.domElement.addEventListener( 'mousedown', onMouseDown, false );
 	scope.domElement.addEventListener( 'mousewheel', onMouseWheel, false );
 	scope.domElement.addEventListener( 'MozMousePixelScroll', onMouseWheel, false ); // firefox
 

diff --git a/page.js b/page.js
@@ -1,20 +1,20 @@
 window.addEventListener('load',function(){
 	// var obj = {
 	//     number : 0,
-  //     range: [0,Math.PI],
-	//     string : 'minPolarAngle'
+  //     range: [Math.PI * -1,Math.PI],
+	//     string : 'X'
 	// };
   // var obj2 = {
 	//     number : 0,
-  //     range: [0,Math.PI],
-	//     string : 'maxPolarAngle'
+  //     range: [Math.PI * -1,Math.PI],
+	//     string : 'Y'
 	// };
 	// var controlKit = new ControlKit();
 	//     controlKit.addPanel()
 	//         .addGroup()
 	//             .addSubGroup()
-	//                 .addSlider(obj,'number', 'range', { label: obj.string, onChange: function(evt){ console.log(window.controls.minPolarAngle = obj.number); }})
-  //                 .addSlider(obj2,'number', 'range', { label: obj2.string, onChange: function(evt){ console.log(window.controls.maxPolarAngle = obj.number); }})
+	//                 .addSlider(obj,'number', 'range', { label: obj.string, onChange: function(evt){ console.log(window.camera.position.x = obj.number); }})
+  //                 .addSlider(obj2,'number', 'range', { label: obj2.string, onChange: function(evt){ console.log(window.camera.position.y = obj.number); }})
 	//                 .addStringInput(obj,'string');
 });
 
@@ -41,9 +41,11 @@ loader.load( 'assets/scene100-red.dae', function ( collada ) {
     loadTextFile('shaders/fragmentShader.glsl', function(fragShader){
       fragmentShader = fragShader;
       dae = collada.scene;
-			var symbolMeshMaterial = new THREE.MeshNormalMaterial( ) ; //3
-			var symbolMeshMaterial = new THREE.MeshPhongMaterial( { color: 0xdddddd, shininess: 10, shading: THREE.SmoothShading, opacity: 0.5, transparent: true } );
 			var invisMaterial = new THREE.MeshNormalMaterial( ) ; //3
+			var invisMaterial = new THREE.MeshPhongMaterial( { color: 0xdddddd, shininess: 10, shading: THREE.SmoothShading, opacity: 0.5, transparent: true } );
+	//		var symbolMeshMaterial = new THREE.MeshPhongMaterial( { color: 0xdddddd, shininess: 10, shading: THREE.SmoothShading, opacity: 0.5, transparent: true } );
+
+			var symbolMeshMaterial = new THREE.MeshNormalMaterial( )
 			dae.children.forEach(function(item){
 				if(item.name.indexOf('invis_') != -1){
 						item.children.forEach(function(mesh){
@@ -52,7 +54,7 @@ loader.load( 'assets/scene100-red.dae', function ( collada ) {
 						});
 				}else{
 					item.children.forEach(function(mesh){
-							mesh.material = symbolMeshMaterial;
+							mesh.children[0].children[0].material = symbolMeshMaterial;
 					});
 				}
 
@@ -125,7 +127,7 @@ function init() {
         tShine: { type: "t", value: THREE.ImageUtils.loadTexture( 'assets/dev004_sphere_bg.jpg' ) },
         time: { type: "f", value: 1 },
         weight: { type: "f", value: 0.001 },
-				pitchMod: { type: "f", value: 5 }
+				pitchMod: { type: "f", value: 1 }
       },
       vertexShader: vertexShader,
       fragmentShader: fragmentShader
@@ -167,13 +169,15 @@ function init() {
     controls.enableZoom = false;
     controls.minPolarAngle = 1.55;
     controls.maxPolarAngle = 2.10;
+		controls.reset();
   }
 
   window.addEventListener( 'resize', onWindowResize, false );
   window.addEventListener( 'mousedown', onDocumentMouseDown, false );
   window.addEventListener( 'touchstart', onTouchStart, false );
   window.addEventListener( 'touchend', onTouchEnd, false );
   window.addEventListener( 'mousemove', onMouseMove, false );
+	window.addEventListener( 'mousewheel', onMouseWheel, false );
 
 }
 function onWindowResize() {
@@ -182,6 +186,11 @@ function onWindowResize() {
   renderer.setSize( window.innerWidth, window.innerHeight );
 }
 
+function onMouseWheel(event){
+	console.log(event);
+	controls.rotate(0.001 * event.deltaY);
+}
+
 function onMouseMove( event ) {
 	// calculate mouse position in normalized device coordinates
 	// (-1 to +1) for both components
@@ -202,8 +211,12 @@ function onTouchStart(event){
   console.log(event);
   console.log(raycaster);
 
-  unlockIOSAudioPlayback();
 
+  if(event.targetTouches){
+
+	}else{
+		return false;
+	}
   mouse.x = +(event.targetTouches[0].pageX / window.innerWidth) * 2 +-1;
   mouse.y = -(event.targetTouches[0].pageY / window.innerHeight) * 2 + 1;
 
@@ -214,7 +227,7 @@ function onTouchStart(event){
   if ( intersects.length > 0 ) {
   //  alert(mesh.name);
 
-    var mesh  = intersects[0].object.parent;
+    var mesh  = intersects[0].object.parent; 
     if(mesh.name == 'Cylinder'){
       moveToDownloadPage();
     }
@@ -270,9 +283,10 @@ var clock = new THREE.Clock();
 var start = Date.now();
 
 function render() {
-  perlinMaterial.uniforms[ 'time' ].value = .00025 * ( Date.now() - start );
-	perlinMaterial.uniforms[ 'weight' ].value = 10.0 * ( .5 + .5 * Math.sin( .00025 * ( Date.now() - start ) ) );
-	perlinMaterial.uniforms[ 'weight' ].value = 10.0;
+  perlinMaterial.uniforms[ 'time' ].value = .0005 * ( Date.now() - start );
+	perlinMaterial.uniforms[ 'pitchMod' ].value = .0005 * ( Date.now() - start );
+	perlinMaterial.uniforms[ 'weight' ].value = 1.0 * ( .5 + .5 * Math.sin( .00025 * ( Date.now() - start ) ) );
+	//perlinMaterial.uniforms[ 'weight' ].value = 10.0;
   var timer = Date.now() * 0.0005;
   radious = 1;
   camera.updateMatrix();