nielsv Posted June 17, 2013 Share Posted June 17, 2013 this is my situation: I want to show twitter tweets like this: http://threejs.org/examples/css3d_periodictable.htmlThis is what I have now: http://nielsvroman.be/twitter/root/index.phpThe boxes are tweets from the user: @BachelorGDM. What I would like now is that there is always one selected and that you can navigate through them with the arrow keys on the keyboard.This is my javascript code: // THE TWEETS var data = loadTweets()// FUNCTION SHOW THE TWEETSfunction ShowTweets(){// VARS TABLE WITH TWEETS / PLACE IN COLUMN / PLACE IN ROWvar table = [];var column = 1;var row = 1;// LOOP THROUGH DATA AND CREATE TABLE WITH TWEET DETAILS + PLACE $.each(data, function(i) { // DETAILS TWEET var idstring = data[i].id_str; var screenname = data[i].user.screen_name; var imageurl = data[i].user.profile_image_url; // 9 TWEETS NEXT TO EACH OTHER if(column % 9 == 0) { row++ column = 1; } var array = [imageurl, idstring, screenname, column, row ] column++; table.push(array);});// VARIABLES THREE JSvar camera, scene, renderer;var controls;var objects = [];var targets = { table: [], sphere: [], helix: [], grid: [] };init(); // CALL INIT FUNCTIONanimate(); // CALL ANIMATE FUNCTIONfunction init() { // INITIALIZE CAMERA camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 5000 ); camera.position.z = 1800; // INITIALIZE SCENE scene = new THREE.Scene(); // LOOP THROUGH TABLE ARRAY (ARRAY WITH ARRAYS IN IT) for ( var i = 0; i < table.length; i ++ ) { var item = table[i]; // ITEM IS ARRAY WITH [imageurl, idstring, screenname, column, row] var element = document.createElement( 'div' ); element.className = 'element'; element.id = item[1]; // ITEM IDSTRING element.style.backgroundColor = 'rgba(0,127,127,' + ( Math.random() * 0.5 + 0.25 ) + ')'; // BG COLOR + OPACITY FROM FRAME var number = document.createElement( 'div' ); number.className = 'number'; number.textContent = i + 1; // NUMBER IN THE RIGHT TOP element.appendChild( number ); var symbol = document.createElement( 'div' ); symbol.className = 'symbol'; var img = document.createElement('img'); img.src = item[0]; // IMAGE SOURCE IS LINK TO IMAGE symbol.appendChild(img); element.appendChild( symbol ); var details = document.createElement( 'div' ); details.className = 'details'; details.innerHTML = "" + '<br>' + item[2]; // SCREENNAME element.appendChild( details ); var object = new THREE.CSS3DObject( element ); // POSITION OBJECTS AGAINST EACH OTHER object.position.x = Math.random() * 4000 - 2000; object.position.y = Math.random() * 4000 - 2000; object.position.z = Math.random() * 4000 - 2000; // ADD OBJECTS TO SCENE scene.add(object); // ADD OBJECT TO OBJECTS ARRAY objects.push(object); } // TABLE VIEW for ( var i = 0; i < objects.length; i ++ ) { var item = table[i]; // ITEM IS ARRAY WITH [imageurl, idstring, screenname, column, row] var object = new THREE.Object3D(); object.position.x = ( item[3] * 160 ) - 1540; // X-POSITION (COLUMN) object.position.y = - ( item[4] * 200 ) + 1100; // Y-POSITION (ROW) // targets = { table: [], sphere: [], helix: [], grid: [] }; targets.table.push(object); // PUSH OBJECT IN TABLE ARRAY (IN TARGETS ARRAY) } // SPHERE VIEW var vector = new THREE.Vector3(); for ( var i = 0, l = objects.length; i < l; i ++ ) { var phi = Math.acos( -1 + ( 2 * i ) / l ); var theta = Math.sqrt( l * Math.PI ) * phi; var object = new THREE.Object3D(); object.position.x = 1000 * Math.cos( theta ) * Math.sin( phi ); object.position.y = 1000 * Math.sin( theta ) * Math.sin( phi ); object.position.z = 1000 * Math.cos( phi ); vector.copy( object.position ).multiplyScalar( 2 ); object.lookAt( vector ); // targets = { table: [], sphere: [], helix: [], grid: [] }; targets.sphere.push( object ); // PUSH OBJECT IN SPHERES ARRAY (IN TARGETS ARRAY) } // HELIX VIEW var vector = new THREE.Vector3(); for ( var i = 0, l = objects.length; i < l; i ++ ) { var phi = i * 0.175 + Math.PI; var object = new THREE.Object3D(); object.position.x = 1100 * Math.sin( phi ); object.position.y = - ( i * 8 ) + 450; object.position.z = 1100 * Math.cos( phi ); vector.copy( object.position ); vector.x *= 2; vector.z *= 2; object.lookAt( vector ); // targets = { table: [], sphere: [], helix: [], grid: [] }; targets.helix.push( object ); // PUSH OBJECT IN HELIX ARRAY (IN TARGETS ARRAY) } // GRID VIEW for ( var i = 0; i < objects.length; i ++ ) { var object = new THREE.Object3D(); object.position.x = ( ( i % 5 ) * 400 ) - 800; object.position.y = ( - ( Math.floor( i / 5 ) % 5 ) * 400 ) + 800; object.position.z = ( Math.floor( i / 25 ) ) * 1000 - 2000; // targets = { table: [], sphere: [], helix: [], grid: [] }; targets.grid.push( object ); // PUSH OBJECT IN GRID ARRAY (IN TARGETS ARRAY) } renderer = new THREE.CSS3DRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); renderer.domElement.style.position = 'absolute'; // ADD RENDERER TO CONTAINER document.getElementById( 'container' ).appendChild( renderer.domElement ); // TRACKBALLCONTROLS => WHEN YOU HOLD DOWN MOUSECLICK controls = new THREE.TrackballControls( camera, renderer.domElement ); controls.rotateSpeed = 0.5; //controls.minDistance = 500; // MAX ZOOM IN => MIN DISTANCE controls.maxDistance = 2500; // MAX ZOOM OUT => MAX DISTANCE controls.zoomSpeed = 1; // STANDARD IS 1.2 controls.keys = [ 37 /*LEFT*/, 38 /*UP*/, 39 /*RIGHT*/, 40 /*DOWN*/ ]; controls.addEventListener( 'change', render ); // RENDER ON CHANGE var button = document.getElementById( 'table' ); button.addEventListener( 'click', function ( event ) { transform( targets.table, 2000 ); }, false ); var button = document.getElementById( 'sphere' ); button.addEventListener( 'click', function ( event ) { transform( targets.sphere, 2000 ); }, false ); var button = document.getElementById( 'helix' ); button.addEventListener( 'click', function ( event ) { transform( targets.helix, 2000 ); }, false ); var button = document.getElementById( 'grid' ); button.addEventListener( 'click', function ( event ) { transform( targets.grid, 2000 ); }, false ); transform( targets.table, 5000 ); // window.addEventListener( 'resize', onWindowResize, false ); // WHEN PRESSED ON KEY window.addEventListener( 'keydown', keydown, false ); function keydown( event ) { };}function transform( targets, duration ) { TWEEN.removeAll(); for ( var i = 0; i < objects.length; i ++ ) { var object = objects[ i ]; var target = targets[ i ]; new TWEEN.Tween( object.position ) .to( { x: target.position.x, y: target.position.y, z: target.position.z }, Math.random() * duration + duration ) .easing( TWEEN.Easing.Exponential.InOut ) .start(); new TWEEN.Tween( object.rotation ) .to( { x: target.rotation.x, y: target.rotation.y, z: target.rotation.z }, Math.random() * duration + duration ) .easing( TWEEN.Easing.Exponential.InOut ) .start(); } new TWEEN.Tween( this ) .to( {}, duration * 2 ) .onUpdate( render ) .start();}function onWindowResize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize( window.innerWidth, window.innerHeight );}function animate() { requestAnimationFrame( animate ); TWEEN.update(); controls.update();}// RENDER SCENE/CAMERAfunction render() { renderer.render( scene, camera );}}My tweets are initially in the variable data. I now have added this to my code: controls.keys = [ 37 /*LEFT*/, 38 /*UP*/, 39 /*RIGHT*/, 40 /*DOWN*/ ];window.addEventListener( 'keydown', keydown, false );function keydown( event ) {};But now how can I navigate through the tweets (boxes) with my arrows on the keyboard?I want to change the css of the selected box and open an overlay of the associated tweet. (You can see this when you click on a box on the link) I have no clue on how to start with this. Can somebody help me? Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.