Interactive Meshes in Three.js

Question

I new to javascript and three.js so this is probably a noob question. BTW, I'm working on the example interactive/cubes/tween and I'm trying to modify it to test something else. At the moment the MouseDown event gives the tween effect to the intersected geometry, here's the function:

function onDocumentMouseDown( event ) {

                event.preventDefault();

                mouse.x = ( event.clientX / renderer.domElement.width ) * 2 - 1;
                mouse.y = - ( event.clientY / renderer.domElement.height ) * 2 + 1;

                raycaster.setFromCamera( mouse, camera );

                var intersects = raycaster.intersectObjects( scene.children );

                if ( intersects.length > 0 ) {

                    new TWEEN.Tween( intersects[ 0 ].object.position ).to( {
                        x: Math.random() * 800 - 400,
                        y: Math.random() * 800 - 400,
                        z: Math.random() * 800 - 400 }, 2000 )
                    .easing( TWEEN.Easing.Elastic.Out).start();

                    new TWEEN.Tween( intersects[ 0 ].object.rotation ).to( {
                        x: Math.random() * 2 * Math.PI,
                        y: Math.random() * 2 * Math.PI,
                        z: Math.random() * 2 * Math.PI }, 2000 )
                    .easing( TWEEN.Easing.Elastic.Out).start();

                }

                /*
                // Parse all the faces
                for ( var i in intersects ) {

                    intersects[ i ].face.material[ 0 ].color.setHex( Math.random() * 0xffffff | 0x80000000 );

                }
                */
            }

But what if I want to give that effect to the intersected geometry and a different effect to the non-intersected ones? I've tried this way:

function init() 
{

//JUST SOME CODE OF THE INIT()//
 //TRIANGLE//
        var triangle = new THREE.Mesh( new THREE.CircleGeometry( 50, 3, 0, Math.PI * 2 ), triangleMat );
        triangle.position.set( 70, 0, 0 );
        scene.add( triangle );
        sceneArr.push(circle);

        //SQUARE//
        var square = new THREE.Mesh( new THREE.CircleGeometry( 50, 4, 0, Math.PI * 2 ), squareMat );
        square.position.set( -35, 60.6218, 0 );
        scene.add( square );
        sceneArr.push( square );

        //CIRCLE//
        circle = new THREE.Mesh( new THREE.CircleGeometry( 50, 27, 0, Math.PI * 2 ), circleMat );
        circle.position.set( -35, -60.6218, 0 );
        scene.add( circle );
        sceneArr.push( circle );
}

Here's my MouseDown function:

function onDocumentMouseDown( event ) {

    event.preventDefault();

    mouse.x = ( event.clientX / renderer.domElement.width ) * 2 - 1;
    mouse.y = - ( event.clientY / renderer.domElement.height ) * 2 + 1;

    raycaster.setFromCamera( mouse, camera );

    var intersects = raycaster.intersectObjects( scene.children );


    if ( intersects.length > 0 ) {

        console.log( intersects[0] );

        new TWEEN.Tween( intersects[ 0 ].object.position ).to( {
            x: 0,
            y: 0,
            z: 0 }, 4000 )
        .easing( TWEEN.Easing.Elastic.Out).start();

        new TWEEN.Tween( intersects[ 0 ].object.rotation ).to( {
            x: 0,
            y: 0,
            z: Math.random() * 2 * Math.PI }, 2000 )
        .easing( TWEEN.Easing.Elastic.Out).start();

        for( var geo in sceneArr){

            if( geo != intersects[ 0 ]){

                geo.position.set( 50, 50, 0);
            }
        }

    } 

}

Unfortunately my logic didn't work. How can I make it work?

I tried many codes with no results. but I can post what I've tried as soon as I get home, in about an hour. — leota
– leota, Commented Jun 17, 2015 at 15:52
I've edited the post, you can now check my code to see what's wrong :) — leota
– leota, Commented Jun 17, 2015 at 16:35

Community · Accepted Answer · 2017-05-23 10:28:57Z

Solved it. Actually I wasn't able to loop trough meshes into scene. Didn't know about scene.traverse(). Here's the new code:

function onDocumentMouseDown( event ) {

    event.preventDefault();

    mouse.x = ( event.clientX / renderer.domElement.width ) * 2 - 1;
    mouse.y = - ( event.clientY / renderer.domElement.height ) * 2 + 1;

    raycaster.setFromCamera( mouse, camera );

    var intersects = raycaster.intersectObjects( scene.children );


    if ( intersects.length > 0 ) {

        new TWEEN.Tween( intersects[ 0 ].object.position ).to( {
            x: 0,
            y: 0,
            z: 0 }, 4000 )
        .easing( TWEEN.Easing.Elastic.Out).start();

        new TWEEN.Tween( intersects[ 0 ].object.rotation ).to( {
            x: 0,
            y: 0,
            z: Math.random() * 2 * Math.PI }, 2000 )
        .easing( TWEEN.Easing.Elastic.Out).start();

        scene.traverse( function( node ) {

            if ( node instanceof THREE.Mesh ) {

                if ( node != intersects[ 0 ].object){

                 new TWEEN.Tween( node.position ).to( {
                    x: 50,
                    y: 50,
                    z: 0 }, 4000 )
                 .easing( TWEEN.Easing.Elastic.Out).start();

                }
            }

        } );


    } 

}

Solution found here: Three.js: for loop for every mesh in scene?

Collectives™ on Stack Overflow

Interactive Meshes in Three.js

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related