[Beginner] Raycaster Arrow Helper

Questions
1

Hey all,

I’m looking to add some model movement based on the mouse position, so I’m learning Raycaster.
Only thing is, I don’t have a great way to visualize what my mouse is pointing at.
Sounds dumb, but I’m learning that Raycaster can be offset via CSS then all hell breaks loose.
I’d like to have a red beam indicator to verify that ThreeJS sees my mouse position as I do.

My Efforts: Best I’ve been able to do is make mousedown event paint the red indicator (see code):
Reference: i.imgur.com/0mDAVQ9.png

The Problem: It doesn’t auto-update and doesn’t delete previous indicators, so lots of red lines.
Reference: i.imgur.com/X2VqC06.png

Could you help a noob out? I’m slowly learning. :slight_smile:

//  Raycaster
    var Raycaster = new THREE.Raycaster();
    var Mouse = new THREE.Vector2();

    document.addEventListener( 'mousedown', function( event ) {
        Mouse.x = ( ( event.clientX - renderer.domElement.offsetLeft ) / renderer.domElement.clientWidth ) * 2 - 1;
        Mouse.y = - ( ( event.clientY - renderer.domElement.offsetTop ) / renderer.domElement.clientHeight ) * 2 + 1;
        
        Raycaster.setFromCamera( Mouse, camera );
    
        var intersects = Raycaster.intersectObjects( scene.children );
        if ( intersects.length > 0 ) {
            var arrow = new THREE.ArrowHelper( Raycaster.ray.direction, Raycaster.ray.origin, 8, 0xff0000 );
            scene.add( arrow );
        }
    }, false );

//  Animation Loop
    function animate() 
        {
            // Essentials
                requestAnimationFrame(animate)
                controls.update()
                render()

            // HEAD Rotation    
                if (modelReady) mixer.update(clock.getDelta())

            // OTHER Rotation
                LEFT_Rotate.rotation.y += 0.01;
                RIGHT_Rotate.rotation.y += 0.01;
        }
2

Hi! An ArrowHelper is just another object for THREE so if you want to get rid of one, you need to remove it manually with scene.remove(object). Since this is just for debugging you could simply loop through your whole scene every time you mousedown with scene.children.forEach..., delete the objects that are ArrowHelpers and add a new one.

You could also define your arrowHelper outside of your mousedown function and then update the arrowHelper every time you call your mousedown function as explained here.

Final method I’ve used a lot: just randomize the arrowHelper color (Math.random() * 0xffffff) and get a bunch of different looking arrowHelpers :smiley:

3

Hey Jacopocolo,

Apologies for taking so long to get back.
I tried your scene.remove(object) method & scene.children.forEach…
Couldn’t quite get it to work.

The good news is that I ultimately figured out how to get RayCaster to work within a div element (when CSS throws it off!)… hence, I troopered on in the project and didn’t post here until I finished (today :slight_smile: )

    // Create Bounding Box
    var rect = renderer.domElement.getBoundingClientRect();
    Mouse.x = ((event.clientX - rect.left) / (rect.right - rect.left)) * 2 - 1;
    Mouse.y = -((event.clientY - rect.top) / (rect.bottom - rect.top)) * 2 + 1;

Citation: javascript - Three.js Raycaster is offset when scollt the page - Stack Overflow

Thank you for your help,
I’ll give your method another go in the future if Raycaster goes haywire :slight_smile:

1 Like