Mouse event in three js

hello every body
I am really beginner in threejs so any advice could be a great help.
I want to write a mouse event in order to:
1- add the new points on the screen with left click
2-remove the last point with right click
3- each new point will be connected to the last point and form a segment
4-if a point moves, the attached segment will move
thanks for your help

Maybe something like this:

https://jsfiddle.net/f2Lommf5/951/ (click on the black canvas to create connected lines)

In order to understand each part of the demo, you should read the docs for BufferGeometry and BufferAttribute.

2 Likes

thank you so much it was a great help.
can I ask you some questions about the codes if I dont understand it well?

Of course! :blush:

BTW: I’ve simplified the fiddle a little bit.

thanks a lot till now you helped me a lot but I have tow more question:

  1. I have to mark each point with a small circle so I put this code in addPoint(coord)

var geometry = new THREE.CircleGeometry( 0.1, 20 );
var material = new THREE.MeshBasicMaterial( { color: 0xf24ff0 } );
var circle = new THREE.Mesh( geometry, material );
scene.add( circle );
circle.position.x = mouse.x;
circle.position.y = mouse.y;

but doesn’t work. how can I modify that?

  1. is ther any way to add “drag and drop” to my points? I want to have the ability to drag the points and drop them in order to change the shape

thanks

Try circle.position.copy( coord ). Besides, it is no good approach to create a geometry and material for identical circles. Instead, create this stuff once and reuse it when you create meshes. Also consider to use sprites/billboards if you need something like markers in your scene.

You maybe want to use DragControls for this. Checkout this example: https://threejs.org/examples/#webgl_interactive_draggablecubes

2 Likes