Raycaster intersectsObjects return empty array while dragging an image onto the Object

Hello everyone,

I am trying to drag an image from a div and change the material of the object on dragOver and drop. I am using Raycaster to find my mouse location while dragging the image over an FBX model.

The thing is, I am getting mouse positions perfectly but the raycaster.intersectsObjects(scene.children) returns an empty array and therefore I am unable to apply the image as a texture on specific positions of the model.

Currently, I have hardcoded the position on which the texture to be applied

This is how it looks:

I am confused if its possible or not in the first place. And if it’s possible, please help me :slight_smile:



I drew a line to see if the Raycaster is working or not. It seems the rays are intersecting but the array remains empty.


        mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
        mouse.y = (event.clientY / window.innerHeight) * 2 + 1;
        raycaster.set( mouse,camera.position);
        var material = new THREE.LineBasicMaterial( { color: 0x0000ff } );
        var geometry = new THREE.Geometry();
        var line = new THREE.Line( geometry, material );
        scene.add( line );

    var intersects = raycaster.intersectObject(objects[0][4], true);

    if (intersects.length > 0) {
        src.wrapS = src.wrapT = THREE.RepeatWrapping;
        src.repeat.set( 25, 25);
        scene.children[2].children[3].material = new THREE.MeshLambertMaterial( {  
            transparent: true,
            map: src,
        } );

I have the same question. I am able to detect mouse intersects with objects while not dragging, when just moving the mouse around. I’m able to drag and drop my objects with DragControls. But when a dragged object is released onto a target object (in dragend method), I am not detecting the intersection. I’m using essentially the same code as the thread poster.