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): Progress So Far

The Problem: It doesn’t auto-update and doesn’t delete previous indicators, so lots of red lines. Problem

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() 
    {
        requestAnimationFrame(animate)
        controls.update()
        render()

        if (modelReady) mixer.update(clock.getDelta())
        LEFT_Rotate.rotation.y += 0.01;
        RIGHT_Rotate.rotation.y += 0.01;
    }