CODEWITHSUNDEEP
javascriptthreejs-editor
Derek Hettinger
Derek Hettinger

Reputation: 33

ThreeJS - Raycaster Arrow Helper

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;
    }

Upvotes: 0

Views: 806

Answers (1)

Tamil Prakash
Tamil Prakash

Reputation: 106

Store the arrow in global variable and delete it once you adding new arrow with the object.

//  Raycaster
        var Raycaster = new THREE.Raycaster();
        var Mouse = new THREE.Vector2();
        let arrow;
        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 ) {
        if(arrow) scene.remove( arrow );
            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;
        }

Upvotes: 2

Related Questions