How to draw rect to start point(x,y,z) end point(x,y,z)

Questions
1

질문0
질문01924×1474 129 KB

질문
질문1977×1485 99 KB

2

Have two vectors Start and End, and want to find two points, then do something like this:

  1. let subVec = new THREE.Vector3().subVectors(End, Start);
  2. let p1 = new THREE.Vector3().copy(Start); p1.x += subVec.x;
  3. let p2 = new THREE.Vector3().copy(Start); p2.y += subVec.y;

Or, if you want to place a plane mesh:

  1. let subVec = new TREE.Vector3().subVectors(End, Start);
  2. let g = new THREE.PlaneGeometry(Math.abs(subVec.x), Math.abs(subVec.y));
  3. let o = new THREE.Mesh(g, _someMaterial_); o.position.addVectors(Start, End).multiplyScalar(0.5);

You can also translate the geometry, instead of a mesh. Depends on your needs.

3

image
image1924×1474 393 KB

4

I want line rect. no 3d cube.

Perhaps if the direction the camera is looking at changes, it will change like the picture.

wlfanse
wlfanse1927×1471 86.4 KB

I draw line use start point end point

but I want rect…
please refer.

5

Why not use div element for a rectangle?

1 Like
6

Here is a rectangle instead of a line. I tried to use your code as much as possible and I changed only part of your createRectangle function, see lines: 96-111.

https://codepen.io/boytchev/full/dygyWvz

image

PS. I’m not sure the rest of the code is optimal, as it is recreating objects instead of reusing already created objects. But this is another problem.

2 Likes
7
  1. let subVec = new THREE.Vector3().subVectors(End, Start);
  2. let p1 = new THREE.Vector3().copy(Start); p1.x += subVec.x;
  3. let p2 = new THREE.Vector3().copy(Start); p2.y += subVec.y;

This helps me , what about if we need rectangle straight what ever the cube view position is does not matter, means this line of code is working well and seems like it always align the rectangle with respect to cube not the camera.

how we can do that ?

8

I still don’t understand why you want to involve something of 3D, when you want it just in 2D.

9

The reason we do this is that we want to use it when multiple people are looking at one screen(remote screen) and pointing out the wrong place.

After pointing out, delete the rectangle you drew.

10

It’s strange when I add OrbitControls and the camera moves. …

11

Replace lines 92-97 with this:

const minY = Math.min(start.y, end.y);
const maxY = Math.max(start.y, end.y);
const pointStartMinY = castPoint({x:start.x, y:minY}).point;
const pointStartMaxY = castPoint({x:start.x, y:maxY}).point;
const pointEndMinY = castPoint({x:end.x, y:minY}).point;
const pointEndMaxY = castPoint({x:end.x, y:maxY}).point;

Result:

image
image1479×627 37.4 KB

2 Likes
12

Thanks!!!

1 Like
13

Thanks. Just consider that using 2D coordinates to build a rectangle in 3D that looks like rectangle in 2D might be overcomplicated. If an HTML element with a CSS border, as @prisoner849 suggests, works for your case, it is a better solution (and it consumes 0 Three.js resources).

1 Like
14

@prisoner849 , you can see the screen shots here, here the person has cube view to rotate

In my case if i am using this

  1. let subVec = new THREE.Vector3().subVectors(End, Start);
  2. let p1 = new THREE.Vector3().copy(Start); p1.x += subVec.x;
  3. let p2 = new THREE.Vector3().copy(Start); p2.y += subVec.y;

i am getting an proper rectangle but that is moved with respect to cube

i want if the cube rotate the scene , my rectangle should be straight only

image
image1920×1080 156 KB

This is current output if the cube is rotated 30 degrees let say

i want like this

image
image1920×1080 143 KB

Means alreadys an rectangle with zero degree tilt in it. No matter the cube view at top left corner movement.

Just like your 2d rectangle with Marker you did, But i have 3d env so i need it in 3d way

Thanks