How to create a line/curve that connects points that I clicked on the model?

I loaded an stl model, and used a raycaster to detect the position of my click and create a sphere as if it is a point in the model. Now I want to connect these spherer/points to form a line ?

Something like this?:
var geometry = new THREE.Geometry();
geometry.vertices.push( vector1, vector2);
var parameters = {
color: color,
opacity: opacity,
linewidth: width
var material = THREE.LineBasicMaterial(parameters);
var line= new THREE.Line(geometry, material)

Take a look at these examples from the Collection of examples from They may help you.


Interaction with Points

Check out these pictures please, That is similar to what I want to do. It is more of a CAD web based software.

Can you be more clear about what is missing in the examples given by Hofk? Do you want the line to be curved where suitable? Should it be more string-like, have a mesh?
Or only more segments (then just add more vectors to the code above that represents the location of the spheres)?

I want to put points on my 3D model, then these points create a new mesh that adheres to the original model. I can edit the points, move them , delete them. right now I have this code which creates a sphere where I click. Not sure if this is the right approach and also can’t create the lines that adapts to the model.

             function onClick(event){
                    //  event.clinetX and event.clinetY are the x and y coordinates
                    // Three JS needs to normalize the coordinates meaning 0 - 0 is in the center not top left
                    mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
                    mouse.y = - (event.clientY / window.innerHeight) * 2 + 1;

                     // Set the ray from mouse to camera
                    raycaster.setFromCamera(mouse, camera);
                    // Check what the ray intersects
                    const intersects = raycaster.intersectObjects(scene.children);
                    // If we intersect something do the following
                    if (intersects.length > 0) {
                         const geometry = new THREE.SphereGeometry(0.5, 1, 32);
                        const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
                        const sphere = new THREE.Mesh(geometry, material);
                        sphere.position.x = intersects[0].point.x;
                        sphere.position.y = intersects[0].point.y;
                        sphere.position.z = intersects[0].point.z;
                        sphere.scale.set(0.05, 0.05, 0.05);