Line related square

Questions
1

Hello.
Need to implement this:

12313
123131104×739 6.14 KB

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

212
2121117×643 54.1 KB

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

Give ideas :slightly_smiling_face:

2

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?

qeeq
qeeq881×713 12.7 KB

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;
    }
3

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.)

4

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.

Example: https://jsfiddle.net/prisoner849/owpz94ay/

изображение
изображение800×800 5.69 KB

2 Likes
5

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. :thinking:

Edit-to-not-highjack-the-thread: poor wording, I meant Evil_Google’s screenshot :see_no_evil: your demo is 10/10 @prisoner849

1 Like
6

Maybe it’ll get better alignment if I used an orthographic camera :thinking:
That rectangle has the same kind of misalignment at bottom rigth as at top left. That seems symmetrical. Thus, correct.:sweat_smile:

7

Oh, thanks for the example prisoner849 :smile:

I don’t understand how it works - normalize (); What is it for? I read Unit vector - Wikipedia but didn’t understand it :dizzy_face:

8

prisoner849 how to determine the thickness of a square?

11232

9

By using .setLength() on the normal vN.

10

Thank you :blush:

1 Like