Question

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

    } 

}

不幸的是我的逻辑不起作用。我怎样才能使它发挥作用？

Answer 1

解决了它。实际上我无法将网格循环到场景中。没有了解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 loop for every mesh in scene?

Three.js中的交互式网格

1 个答案: