Интерактивные сетки в Three.js

Я новичок в javascript и three.js, так что это, вероятно, нубский вопрос. Кстати, я работаю над примером interactive/cubes/tween и пытаюсь изменить это проверить что-то еще. На данный момент событие MouseDown дает эффект анимации для пересекаемой геометрии, вот функция:

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 );

                }
                */
            }

Но что, если я хочу придать такой же эффект пересекающейся геометрии и другой эффект непересекающимся? Я пробовал так:

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 );
}

Вот моя функция MouseDown:

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);
            }
        }

    } 

}

К сожалению, моя логика не сработала. Как я могу заставить его работать?


javascript three.js interactive mesh
person leota    schedule 17.06.2015    source источник
comment
Я вижу код, который вы скопировали. Где код, который вы написали?   -  person WestLangley    schedule 17.06.2015
comment
Я пробовал много кодов безрезультатно. но я могу опубликовать то, что пробовал, как только вернусь домой, примерно через час.   -  person leota    schedule 17.06.2015
comment
Я отредактировал сообщение, теперь вы можете проверить мой код, чтобы увидеть, что не так :)   -  person leota    schedule 17.06.2015

Ответы (1)


arrow_upward
1
arrow_downward

Решил это. На самом деле я не мог зациклить меши в сцене. Не знал о scene.traverse(). Вот новый код:

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();

                }
            }

        } );


    } 

}

Решение найдено здесь: Three.js: цикл for для каждой сетки в сцена?

person leota    schedule 18.06.2015