I have a plane as shown in the image, there I have an object at Point O, having X,Y,Z axis like in the image and there is another point P on the plane, What I want to find out is the angle between PO and X axis of the object. How can I do so?
There is the angle method of Vector2 that :
// computes the angle in radians with respect to the positive x-axis.
That angle() method is to find angle with 2D World X-Axis. But in my case this X-Axis shown here is the local X-Axis of the object. Basically I want to find out the angle, with which if I rotate the object around the its local Z-Axis then then it’s local X-Axis will point towards P. Is that possible with the angle()?
I’m not sure I understand what you want. But according to your drawing, the plane you are talking about is the xy plane. You have P (Px, Py, Pz), the point (Px,Py) is just an orthogonal projection of P onto the plane xy. Then
new Three.Vector2(Px,Py).angle()
gives you the angle between the orthogonally projected P on the xy plane and the x axis.
Is this what you are after?
Edit: Ok I understand what you want.
Yes if you want to point towards P whatever P’s z
In my scene X is left and right, Y is up and down and Z is near and far. So I do calculate the angle with x and z but the principle is the same.
But my plane is ZX plane. Sorry for the confusion due to not mentioning the World Coordinate Axis. I should have also mention that. Actually, in the scene I have default Three.js coordinate system as Y+ towards up, X+ towards right, Z+ towards camera. Please assume I have added an object at O position. And rotated it by -Math.PI/2 around it’s X-Axis. The Axis you are seeing in the image are the local axis of the object after the rotation. All I need to find out angel between 3D line PO and the local X-Axis of the object.
Have you tried something? just do new Three.Vector2(Px,Pz).angle()
you might need to do the same with new Three.Vector2(Py,Pz).angle()
1 rotation around X and 1 around Y should do what you want
Sorry but this did not help.
Suppose my
O point is { x: 0.8943402910521785, y: 0.6457295855861607, z: -110.87743377685547}
P point is {x: 0, y: 0.6457295855861607, z: 0}
Now, if I rotate the object around Z-Axis with some angle even after initial rotation of -Math.PI/2 around it’s X-Axis. Still the value of P and O point remain same, so how can angle() value would change here? I found it will also remain same and that should be.
You are not testing this?
If you rotate around z, of course, x and y will change. A rotation around an axis means that axis remains the same after the rotation. It is the eigenvector.
These are the rotation matrix around x,y, and z. as you see in each matrix there is a column 1,0 and 0.
It means the corresponding value will remain the same and the others are modified
I think there is still a huge confusion.
“if I rotate the object around Z-Axis with some angle even after initial rotation of -Math.PI/2 around it’s X-Axis. Still the value of P and O point remain same” -With this I mean the position coordinate of the P and O point but not their respective Axis angles.
If I rotate any object around any of it’s axis the Center of the object will remain same and that Center is O in our case and P is a fixed point.
For example if I have a object at (0,0,0) and I rotate the object around it’s any of the local axis the position of the object remain same (0,0,0). Same way our O point which is the center of the object will remain same no matter how much I have rotated around it’s local axis.
Do you mean you want to rotate around any axis? You didn’t say you want to move O, you said you want to rotate the x-axis so that it points towards P. that is exactly what a rotation does it rotates the axes and since your points are expressed relative to those axes, your points get rotated too… 
You said:
"Basically I want to find out the angle, with which if I rotate the object around the its local Z-Axis then then it’s local X-Axis will point towards P. "
To me it means you want your object to “look” in the direction of another object, so yes it means it rotates at its position towards the other object.
So the question is what is the eigenvector of the rotation you want to perform? What is the static axis?
If you want to rotate around an object, you still need to define the static axis, because you don’t rotate around a point but around an axis.
Are sure you understand what you want? Think about it first.
Sir/Ma’am,
I know what I am looking for. I do not want to move O. May be I could not express it well so that the confusion was taken place, sorry for that.
Edit fiddle - JSFiddle - Code Playground
Please take a look at this fiddle.
Lets suppose the position of the Blue Box is O. And the red sphere is P. You can see that I have initially rotated the box by -Math.PI/2 around it’s local X-Axis. Then I am rotating the box around it’s local Z-Axis periodically.
At each rotation step the local X-Axis of the object is changing the angle with the red point right?
I want to find out this angle.
Suppose at any moment, we get the angle as Math.PI/4 so if I stop the auto-rotation and apply (-Math.PI/4) rotation around local Z-Axis of the box then it’s local X-Axis will point towards the sphere(P). This is what I tried mean.
Please let me know if you have any doubt about my requirement.
I have updated the fiddle even more for better understanding. Please refresh the fiddle if you have already opened it. I just want the angle between box’s local X-Axis(red line) and the black line connecting P to O.
Please check the updated fiddle with the black line.
yes ok, the O position has not changed. Give me a minute, please. I try to modify your code to produce what you want.
Please take your time. I am sorry for wasting your time. I should have already make a fiddle at the first place so it would have been much easier for me to express the requirement. I am so sorry.
let v = new THREE.Vector2(sphere.position.x-box.position.x,sphere.position.z-box.position.z).angle();
box.rotation.y = Math.PI/2.-v;
this way the blue axis follows the red sphere
1 Like
I think this is very close. But the fiddle you get was older one.
Please check this.
Edit fiddle - JSFiddle - Code Playground
If you look at this example you can see the apparently the angle between box local X-Axis(red line) and the black like is 90 degree. So I need to get the value of the angle.
lol
You may want to add this
let v2 = new THREE.Vector2(sphere.position.y-box.position.y,sphere.position.z-box.position.z).angle();
box.rotation.x = -(Math.PI/2.-v2);
In your first fiddle, this way the blue axis follows the red sphere
1 Like
What I see in your solution is it does not take account the rotation of the box. The value of v will remain same even if the box is rotating. Please make sure what I am looking for is the angle between Box Local X-Axis and Black Line. The last fiddle I shared having their angle around 90 degree. I want to find out this angle value as 90 or whatever it is. So that, if I rotate the box by -90 degree around it’s local Z-Axis. Then we can see the X is pointing towards the P point.