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

Questions
1

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);
    }
2

Did you find the solution for this. I am also new to THREE.Js and I also want the same functionality. Want to draw a line until next click but i could not figure it out.

3

A line generated by clicks on the model.
You mean something like this?

I used the events of the three.ez library, which is very convenient in this case, but it is also possible to do this without external libraries using the already mentioned Raycaster.

const points: Vector3[] = [];

model.on('click', (e) => {
  points.push(e.intersection.point);
  line.geometry.setFromPoints(points);
  line.geometry.computeBoundingSphere();
});