three.interaction.js

three.interaction.js copied to clipboard

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

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

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;