jasonChen1982 / three.interaction.js

three.js interaction toolkit, help you built an interaction event-system for three.js, binding interaction event like browser-dom
411 stars 73 forks source link

How to judge a click on a blank scene ? #40

Open pxim opened 3 years ago

pxim commented 3 years ago

With this tool, I can normally listen for mouse events for the model. But i don't know how to judge a click on a blank scene .

    const pointer = new THREE.Vector2();
    document.addEventListener( 'pointermove', onPointerMove );
    function onPointerMove( event:any ) {

        pointer.x = ( event.clientX / window.innerWidth ) * 2 - 1;
        pointer.y = - ( event.clientY / window.innerHeight ) * 2 + 1;

    }
    const nDiv:any = contain3DEl.current;
    nDiv.addEventListener('click', ()=>{
        const raycaster = new THREE.Raycaster();
        raycaster.setFromCamera( pointer, camera );
        const intersects = raycaster.intersectObjects( modelNodeList );
        if ( intersects.length <= 0 ) {
            setSelectedModelObject(null);
            props.onModelNodeSelected('');
            PubSub.publish('menu_item_cancel_selected', '');
        }
    })

like intersects<=0 effect

@jasonChen1982

VeinKowal commented 3 years ago

maybe create a boundingBox around the whole surrounding, and login mouse event as 'blank scene clicked event' to this box;

VeinKowal commented 3 years ago

maybe create a boundingBox around the whole surrounding, and login mouse event as 'blank scene clicked event' to this box;

box is transparent and rendered doubleSide, i tryed and it work;