Draw rectangle by mouseclicks

Questions
1

Hello,

I want to draw multiple rectangles by mouse clicks with live preview.
I made this fiddle for a line :

How could I adapt that for a rectangle?

I just could not get my head around this post:

The Code

THREE.Object3D.DefaultUp.set(0, 0, 1);

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000000);
camera.position.set(0, 0, 30);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0x999999);
document.body.appendChild(renderer.domElement);

var controls = new THREE.OrbitControls(camera, renderer.domElement);
var grid = new THREE.GridHelper(20, 40);
grid.geometry.rotateX( Math.PI / 2 );
grid.position.set(0, .05, 0);
scene.add(grid);


var raycaster = new THREE.Raycaster();
mouse = new THREE.Vector2();

var newRect;
var buildStarted = false;
var onPlanePoint;
var startPoint = new THREE.Vector3();
var intersect;

const MAX_POINTS = 3;

// geometry
const geometry = new THREE.BufferGeometry();
// attributes
const positions = new Float32Array( MAX_POINTS * 3 ); // 3 vertices per point
geometry.setAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
// draw range
var drawCount = 3; // draw the first 2 points, only
geometry.setDrawRange( 0, drawCount );
// material
const material = new THREE.LineBasicMaterial( { color: 0xff0000 } );
// line
const line = new THREE.Line( geometry,  material );
scene.add( line );

const corePositions = line.geometry.attributes.position.array;

var started = false;

function drawRect() {
	console.log("Clicked")
  document.addEventListener("mousedown", onMouseDown, false);
	document.addEventListener("mousemove", onMouseMove, false);
}


render();


//Functions
function onMouseDown (event) {

  mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
  mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
  mouse.z = 0;

  const raycaster = new THREE.Raycaster();
  var plane = new THREE.Plane( new THREE.Vector3( 0, 0, 1), 0 );

  raycaster.setFromCamera( mouse, camera );
  var intersects = new THREE.Vector3();
  let planeIntersect = raycaster.ray.intersectPlane( plane, intersects );

  corePositions[ 0 ] = planeIntersect.x;
  corePositions[ 1 ] = planeIntersect.y;
  corePositions[ 2 ] = planeIntersect.z;

  line.geometry.setDrawRange( 1, drawCount++ );
  line.geometry.attributes.position.needsUpdate = true;

  started = true;
}

function onMouseMove (event) {
  if(started) {
    mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
    mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
    mouse.z = 0;

    const raycaster = new THREE.Raycaster()
    var plane = new THREE.Plane( new THREE.Vector3( 0, 0, 1), 0 )

    raycaster.setFromCamera( mouse, camera );
    var intersects = new THREE.Vector3();
    let planeIntersect = raycaster.ray.intersectPlane( plane, intersects );

    corePositions[ 3 ] = planeIntersect.x;
    corePositions[ 4 ] = planeIntersect.y;
    corePositions[ 5 ] = planeIntersect.z;

    line.geometry.setDrawRange( 0, 2 );
    line.geometry.attributes.position.needsUpdate = true;
  }
}


function render() {
  requestAnimationFrame(render);
  renderer.render(scene, camera);
}
2

I tried to fix it with the “position.needsUpdate” property and now it does the job.