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

Questions
1

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 ?

2

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)

3

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

* discourse.threejs.hofk.de

ConnectObjectsInWorldSpace
GetPositionOfObject
MesureDistance
Interaction with Points
connectMeshSprite

4

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

5

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)?

6

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) {
                        console.log(intersects)
                         const geometry = new THREE.SphereGeometry(0.5, 1, 32);
                        const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
                        const sphere = new THREE.Mesh(geometry, material);
                        scene.add(sphere);
                        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);