Maintaining Fixed Start Point While Drawing with Three.js Camera Rotation

Questions
, , , ,
1

Hey everyone,

I’m currently working on a project where I’m using Three.js buffer geometry to draw rectangles and circles. I’ve implemented a feature where I use a ray caster to get the start and end points for drawing rectangles. The start point is captured on mouse down and saved, and then I update the rectangle’s size based on mouse movement.

However, I’m encountering an issue where the start point deviates from its original position when I rotate the camera, even though I’m not changing the start point it remains same as i saved on mouse down. I want only the end point to change based on mouse movement, while the start point should remain fixed.

Does anyone have suggestions on how to ensure that only the end point changes position while drawing, and the start point stays in its original position regardless of camera rotation?

In this picture the 1 point represents my startpoint and 2 the current mouse movement point.

Screenshot 2024-04-23 144320
Screenshot 2024-04-23 144320855×538 57.6 KB

now as i rotate my camera the start point also moves, although when i log the point its same as it was from where i started.

Screenshot 2024-04-23 144340
Screenshot 2024-04-23 144340938×504 60.4 KB

here’s the code:

export  function getObsPoints(startPoint,endPoint, facetPlane, camera){

    if (startPoint.x === endPoint.x) {
        endPoint.x += Number.EPSILON;
    }

    if (startPoint.y === endPoint.y) {
        endPoint.y += Number.EPSILON;
    }

    const left = Math.min(startPoint.x, endPoint.x);
    const right = Math.max(startPoint.x, endPoint.x);
    const top = Math.min(startPoint.y, endPoint.y);
    const bottom = Math.max(startPoint.y, endPoint.y);
    const width = right - left;
    const height = bottom - top;

    let dx = startPoint.x - endPoint.x < 0 ? -1 : 1;
    let dy = startPoint.y - endPoint.y < 0 ? -1 : 1;

    // case 1 -x,+y, +x,-y
    let _vecTopLeft = new THREE.Vector3(startPoint.x, startPoint.y, 0);
    let _vecDownRight = new THREE.Vector3(endPoint.x, endPoint.y, 0);
    let _vecTopRight = new THREE.Vector3(
        startPoint.x - dx * width,
        startPoint.y,
        0
    );
    let _vecDownLeft = new THREE.Vector3(
        startPoint.x,
        startPoint.y - dy * height,
        0
    );

    if (dy === dx) {
        _vecTopLeft.set(startPoint.x, startPoint.y - dy * height, 0);
        _vecDownRight.set(startPoint.x - dx * width, startPoint.y, 0);
        _vecTopRight.set(endPoint.x, endPoint.y, 0);
        _vecDownLeft.set(startPoint.x, startPoint.y, 0);
    }

    let topleft = new THREE.Vector3();
    let topright = new THREE.Vector3();
    let bottomleft = new THREE.Vector3();
    let bottomright = new THREE.Vector3();

    GLOBAL_VARS.rayCaster.setFromCamera(_vecTopLeft, camera);
    GLOBAL_VARS.rayCaster.ray.intersectPlane(facetPlane, topleft);
    GLOBAL_VARS.rayCaster.setFromCamera(_vecTopRight, camera);
    GLOBAL_VARS.rayCaster.ray.intersectPlane(facetPlane, topright);
    GLOBAL_VARS.rayCaster.setFromCamera(_vecDownLeft, camera);
    GLOBAL_VARS.rayCaster.ray.intersectPlane(facetPlane, bottomleft);
    GLOBAL_VARS.rayCaster.setFromCamera(_vecDownRight, camera);
    GLOBAL_VARS.rayCaster.ray.intersectPlane(facetPlane, bottomright);

    let g = new THREE.BufferGeometry().setFromPoints([
        topleft,
        topright,
        bottomright,
        bottomleft,
        topleft,
    ]);

    let center = new THREE.Vector3();
    g.computeBoundingBox();
    g.boundingBox.getCenter(center);
    obstructionBox.geometry.dispose();
    obstructionBox.geometry = g;
    center.normalize();
    obstructionBox.geometry.attributes.position.needsUpdate = true;

i get the start and end point by getting current mouse positions, even when i used the plan for intersection the problem remained.

Thanks in advance for your help!