Three.js Raycaster not working properly
<p>I have trouble with proper detection mouse click events using raycaster. I've made a model of a furniture with animated drawers. I'd like to change thier position from closed to opened on mouse click. After loading model with default amount of drawers everything is ok but when I'm reloading model with different amount, the click events starts to behave in undefined way. Sometimes instead of 1 click, it interacts twice or even more, so the effect is invisible (open and close at once)
These are parts of my code responsible for raycasting and handling events</p>

<pre><code>var raycaster = new THREE.Raycaster();
$camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );
$camera.position.set(model.camera.position.x, model.camera.position.y, model.camera.position.z);

$container.addEventListener ("mousedown", function(event) {
    event.preventDefault();
    var rect = document.getElementById('canvas-handler').getBoundingClientRect();
    var canv = document.getElementById('canvas-handler');
    mouse.x = ( (event.clientX - rect.left) / canv.clientWidth) * 2 - 1;
    mouse.y = - ( (event.clientY - rect.top) / canv.clientHeight ) * 2 + 1;
    raycaster.setFromCamera( mouse, $camera );

    var arr = $doors.concat($drawers);;
    var intersects = raycaster.intersectObjects( arr, true );
    if ( intersects.length &gt; 0 ) {
        intersects[0].object.parent.onclickCallback();
    }
    return false;
}, false);
</code></pre>

<p>The arrays $doors and $drawers contains 3Dobjects which I want to animate. Objects have onclickCallback() function which changes position.</p>

<p>The second argument of raycaster.intersectObjects is true because array of drawers contains parent points for every drawer. The recursion should give access to children cubes (drawer parts)</p>