Question

这是我的情况：

我想像这样展示Twitter推文：http://threejs.org/examples/css3d_periodictable.html

这就是我现在所拥有的：http://nielsvroman.be/twitter/root/index.php
这些方框是来自用户的推文：@BachelorGDM。

我现在想要的是总有一个被选中，您可以使用键盘上的箭头键浏览它们。

这是我的javascript代码：

// THE TWEETS 
var data = loadTweets()

// FUNCTION SHOW THE TWEETS
function ShowTweets(){

// VARS TABLE WITH TWEETS / PLACE IN COLUMN / PLACE IN ROW
var 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 JS
var camera, scene, renderer;
var controls;

var objects = [];
var targets = { table: [], sphere: [], helix: [], grid: [] };

init(); // CALL INIT FUNCTION
animate(); // CALL ANIMATE FUNCTION

function 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/CAMERA
function render() {
    renderer.render( scene, camera );
}
}

我的推文最初是在可变数据中。我现在已将此添加到我的代码中：

controls.keys = [ 37 /*LEFT*/, 38 /*UP*/, 39 /*RIGHT*/, 40 /*DOWN*/ ];
window.addEventListener( 'keydown', keydown, false );
function keydown( event ) {};

但是现在如何用键盘上的箭头浏览推文（方框）？
我想更改所选框的css并打开相关推文的叠加层。（当您点击链接上的框时，您可以看到这一点）

我不知道如何开始这个。有人可以帮帮我吗？

Answer 1

您可以创建一个带有“selected”类的样式表，当您单击其中一个元素时，它会删除“selected”类的所有其他实例，并将“.selected”添加到单击的特定元素中。然后使用键盘输入，您执行相同的操作，但移动到下一个元素。它可以用jQuery简化一下，虽然没有做得好。

.element .selected {
background-color: #cccccc;
}

的javascript：

document.addEventListener("click", function(e) {
if (e.target === *element you want*)
// remove other selected classes code here.
document.addClass += " " + ".selected"

浏览推文（框）+三个js

1 个答案: