Jump to content

Navigate through tweets (boxes) + three js


nielsv
 Share

Recommended Posts

this is my situation:

 

I want to show twitter tweets like this: http://threejs.org/examples/css3d_periodictable.html

This is what I have now: http://nielsvroman.be/twitter/root/index.php
The 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?

Link to comment
Share on other sites

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.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...