Paint a specific coordinate with RayCaster

Questions
,
1

Hello friends, good time
I am using the RayCaster class to color the coordinates of the mouse click point.
I use this code to paint:

const raycaster = new THREE.Raycaster();
const pointer = new THREE.Vector2();

    function onPointerMove(event) {

        pointer.x = (event.clientX / window.innerWidth) * 2 - 1;
        pointer.y = - (event.clientY / window.innerHeight) * 2 + 1;

        raycaster.setFromCamera(pointer, camera);

        const intersects = raycaster.intersectObjects(scene.children);

        try {
            for ( let i = 0; i < intersects.length; i ++ ) {
                intersects[i].object.material.color.set(0x3d2d3d);
            }
        
            renderer.render( scene, camera );
        }
        catch (e) {
            console.log(e.message);
        }
    }

Now my question is how to color the clicked coordinates?

thanks for your view

2

You can’t just color the selected point on a mesh’s surface so you normally add a small sphere mesh or sprite to the selected position.

1 Like
3

I think @Mugen87 meant “can’t” here…

1 Like
4

And on the off chance that you are interested in actually painting on the models texture… I made this a while ago… but it’s a more heavyweight solution… and shouldn’t be used if you’re just trying to indicate something was clicked…

1 Like
5

What you mean, friends, is to get the coordinates of the clicked point with the Raycaster class and then draw a circle at that point.

it’s true?