Three.js 中的交互式网格

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 中的交互式网格

Interactive Meshes in Three.js

javascript

interactive

mesh

three.js