ExtrudeBufferGeometry - position and rotation issues

Hello,

I have a function that creates something similar to the wall: when I click on the scene, first click and second click are determinig the begning and the end of the wall (wall height is fixed).

This is the way it looks like:

Screenshot 2022-01-25 at 11.39.22

For achieving this I am using the ExtrudeBufferGeometry, like this:

if (StartPoint.x == 0 && StartPoint.y == 0) StartPoint = intersects[0].point.clone();
        controlPoints.push(intersects[0].point.clone());

        if (controlPoints.length == 2) {

          shape = new THREE.Shape();
          shape.moveTo(controlPoints[0].x, -controlPoints[0].z);
          shape.lineTo(controlPoints[1].x, -controlPoints[1].z);

          var extrudeSettings = {
            steps: 1,
            depth: WallHeight,
            bevelEnabled: false
          };

          console.log(controlPoints);

          var extrudeGeom = new THREE.ExtrudeBufferGeometry(shape, extrudeSettings);
   
          var wall = new THREE.Mesh( extrudeGeom, [
            new THREE.MeshLambertMaterial({color: ColorWall1, transparent: true, opacity: 0.63}),
            new THREE.MeshLambertMaterial({color: ColorWall2, transparent: true, opacity: 0.63})
          ] ) ;

          wall.name = "Wall";
          wall.rotation.x = Math.PI * - 0.5;

          scene.add(wall);

          clickCount = 0;
          controlPoints[0] = controlPoints[1];
          controlPoints.pop();
}

After this object is created I have two issues:

  1. position of object is 0,0,0 which is not the correct one
  2. when I try to rotate the object it rotates around the center of the scene and not around its own center.

Could you help me with the additional functions that I need to apply in order to fix the above issues?

Many thanks,

Mirko