I am currently working with ThreeJS and I have a requirement to create a rectangle as the user clicks and drags their mouse.
Using ThreeJS library for this purpose.
function onDrag(event) {
if (!isDrawing) { return; }
// The rectangle should follow the users mouse
var clientX = (event.pageX - startPosition.x) / 50;
var clientY = (event.pageY - startPosition.y) / 50;
var vertices = geometry.vertices;
vertices[1].x = -clientX * -1;
vertices[2].x = -clientX * -1;
vertices[2].z = -clientY * -1;
vertices[3].z = -clientY * -1;
geometry.verticesNeedUpdate = true;
}
// To view the complete code, please visit: https://jsfiddle.net/shawnswebsites/tcpakwgL/1/
Even though the rectangle should seamlessly follow the user's mouse after clicking down, it seems that there is an issue where the rectangle is smaller than intended. Could someone kindly spot what may be going wrong in my implementation?