# Line related square

Hello.
Need to implement this:

The red square should move with the black line. By clicking, I create a line and move it up, down, lengthen and shorten, and at this moment the red square should move and lengthen and shorten along with the line.

Line example http://kibbler.full-stack.kz/ You need to attach a red square to it

At the moment, the lines are formed according to this code
https://jsfiddle.net/blackstrings/nh81deqw/

Give ideas I created a square that is drawn along with the line, BUT now it needs to be rotated to the side.
I don’t know how to do it?

Code. This function works in conjunction with the Raycaster.

``````_updateSquare(elements, start_point, end_point) {
let position = new Float32Array([
start_point.x, 0.0, start_point.z,
(1.0 + end_point.x), 0.0, end_point.z,
(1.0 + end_point.x), 0.0, (1.0 + end_point.z),

start_point.x, 0.0, start_point.z,
(1.0 + end_point.x), 0.0, (1.0 + end_point.z),
start_point.x, 0.0, (1.0 + start_point.z),
]);
elements.square.object.geometry.setAttribute('position', new THREE.BufferAttribute(position, 3));

elements.square.object.geometry.attributes.position.needsUpdate = true;
}``````

If you are drawing the rectangle based on (at least) 2 points from the line, it should be automatically aligned with the line.

Could you describe how you calculate this rectangle (without code, just explanation how you get start and end points and how you convert them to rectangle vertices.)

A rectangle contains four points. You already have two.
Just find a vector between those two, normalize it. Thus you’ll get a direction (say `vD`) .
The normal to this direction (say `vN`) is [-vD.y, vD.x].
To get the rest two points, you need to add that normal to each of those two first points.
And that’s all.

2 Likes

What I was curious about is why the middle rectangle on the screenshot isn’t aligned with the line on at least 2 points. Maybe the 2 current points aren’t calculated correctly. Edit-to-not-highjack-the-thread: poor wording, I meant Evil_Google’s screenshot your demo is 10/10 @prisoner849

1 Like

Maybe it’ll get better alignment if I used an orthographic camera That rectangle has the same kind of misalignment at bottom rigth as at top left. That seems symmetrical. Thus, correct. Oh, thanks for the example prisoner849 I don’t understand how it works - normalize (); What is it for? I read Unit vector - Wikipedia but didn’t understand it prisoner849 how to determine the thickness of a square? By using `.setLength()` on the normal `vN`.

Thank you 1 Like