Have two vectors Start
and End
, and want to find two points, then do something like this:
let subVec = new THREE.Vector3().subVectors(End, Start);
let p1 = new THREE.Vector3().copy(Start); p1.x += subVec.x;
let p2 = new THREE.Vector3().copy(Start); p2.y += subVec.y;
Or, if you want to place a plane mesh:
let subVec = new TREE.Vector3().subVectors(End, Start);
let g = new THREE.PlaneGeometry(Math.abs(subVec.x), Math.abs(subVec.y));
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.
I want line rect. no 3d cube.
Perhaps if the direction the camera is looking at changes, it will change like the picture.
I draw line use start point end point
but I want rect…
please refer.
Why not use div
element for a rectangle?
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
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.
let subVec = new THREE.Vector3().subVectors(End, Start);
let p1 = new THREE.Vector3().copy(Start); p1.x += subVec.x;
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 ?
I still don’t understand why you want to involve something of 3D, when you want it just in 2D.
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.
It’s strange when I add OrbitControls and the camera moves. …
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:
Thanks!!!
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).
@prisoner849 , you can see the screen shots here, here the person has cube view to rotate
In my case if i am using this
let subVec = new THREE.Vector3().subVectors(End, Start);
let p1 = new THREE.Vector3().copy(Start); p1.x += subVec.x;
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
This is current output if the cube is rotated 30 degrees let say
i want like this
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