ThreeJS Example misc_boxselection 框选https://threejs.org/exam

声明

const selectionBox = new SelectionBox( camera, scene );
const helper = new SelectionHelper( selectionBox, renderer, 'selectBox' );

鼠标点击

document.addEventListener( 'pointerdown', function ( event ) {
        for ( const item of selectionBox.collection ) {
                item.material.emissive.set( 0x000000 );
        }
        selectionBox.startPoint.set(
                ( event.clientX / window.innerWidth ) * 2 - 1,
                - ( event.clientY / window.innerHeight ) * 2 + 1,
                0.5 );
} );

鼠标移动

document.addEventListener( 'pointermove', function ( event ) {
        if ( helper.isDown ) {
                for ( let i = 0; i < selectionBox.collection.length; i ++ ) {
                        selectionBox.collection[ i ].material.emissive.set( 0x000000 );
                }

                selectionBox.endPoint.set(
                        ( event.clientX / window.innerWidth ) * 2 - 1,
                        - ( event.clientY / window.innerHeight ) * 2 + 1,
                        0.5 );

                const allSelected = selectionBox.select();
                for ( let i = 0; i < allSelected.length; i ++ ) {
                        allSelected[ i ].material.emissive.set( 0xffffff );
                }
        }

} );

鼠标抬起

document.addEventListener( 'pointerup', function ( event ) {
        selectionBox.endPoint.set(
                ( event.clientX / window.innerWidth ) * 2 - 1,
                - ( event.clientY / window.innerHeight ) * 2 + 1,
                0.5 );
        const allSelected = selectionBox.select();
        for ( let i = 0; i < allSelected.length; i ++ ) {
                allSelected[ i ].material.emissive.set( 0xffffff );
        }
} );