Detect mouse click on .obj model and draw a line until next click

Hi ,

I am new to Three.js. So far I have been successful in loading a 3D model .obj file to my canvas. I want to detect the where the user clicks on the model and draw a line until the next click. I was trying to implement ray casting to detect the click and draw a point/marker on the model but for some reason, my marker is placed at some random position outside the model.

Here is the code:

$('#c').on('click', function(evt){
  evt.preventDefault()
  mousePosition.x = ((evt.clientX - canvasPosition.left)) * 2 - 1;
  mousePosition.y = -((evt.clientY - canvasPosition.top)) * 2 + 1;
  var temp = new THREE.Vector3(mousePosition.x , mousePosition.y, 1).unproject(camera);
  //rayCaster.set(camera.position, temp.sub(camera.position).normalize());
  rayCaster.setFromCamera(temp, camera)
  var intersects = rayCaster.intersectObjects(scene.children, true)
  //console.log("iiii   " + intersects[0].point.x)
  if(intersects.length > 0)
  {
    var found = intersects[0]
    drawPoint(found.point)
  }
});

function drawPoint(point){
  var dotGeometry = new THREE.Geometry();
  dotGeometry.vertices.push(point);
  var dotMaterial = new THREE.PointsMaterial( { size: 1, sizeAttenuation: false } );
  var dot = new THREE.Points( dotGeometry, dotMaterial );
  dot.scale.set(5,5,5)
  scene.add( dot );
}


This is the code for loading the .obj file:

function main() {
    const renderer = new THREE.WebGLRenderer({canvas});
    canvasPosition = $(canvas).position();
    const controls = new OrbitControls(camera, canvas);
    controls.target.set(0, 5, 0);
    controls.update();
  
    scene.background = new THREE.Color('black');

    {
      const skyColor = 0x000000;  // light blue
      const groundColor = 0xB97A20;  // brownish orange
      const intensity = 1;
      const light = new THREE.HemisphereLight(skyColor, groundColor, intensity);
      scene.add(light);
    }
  
    {
      const color = 0xFFFFFF;
      const intensity = 1;
      const light = new THREE.DirectionalLight(color, intensity);
      light.position.set(0, 5, 0);
      light.target.position.set(-5, 0, 0);
      scene.add(light);
      scene.add(light.target);
    }
  
    {
      const objLoader = new OBJLoader2();
      objLoader.load('/scan/3Dscan 9.obj', (root) => {
        root.name = '3dmodel'
        console.log(root.position)
        root.scale.set(5,5,5)
        scene.add(root);
      });
      // var loader = new THREE.OBJMTLLoader();
      // loader.load( "/scan/myRoom.obj", '/scan/myRoom.mtl',  this.loadObject);
    }

    function resizeRendererToDisplaySize(renderer) {
        const canvas = renderer.domElement;
        const width = canvas.clientWidth;
        const height = canvas.clientHeight;
        //1990x810
        const needResize = canvas.width !== width || canvas.height !== height;
        if (needResize) {
          renderer.setSize(width, height, false);
        }
        return needResize;
      }
    
      function render() {
    
        if (resizeRendererToDisplaySize(renderer)) {
          const canvas = renderer.domElement;
          camera.aspect = canvas.clientWidth / canvas.clientHeight;
          camera.updateProjectionMatrix();
        }
    
        renderer.render(scene, camera);
    
        requestAnimationFrame(render);
      }

      requestAnimationFrame(render);
    }