Mouse event in three js

Questions
1

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

2

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
3

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

4

Of course! :blush:

5

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

6

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

7

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: three.js examples

2 Likes