Get camera's current rotation in degrees - javascript

I'm using a THREE.PerspectiveCamera with THREE.OrbitControls for rotation etc.
When I rotate the camera I want to update a symbol on Google Maps to show the direction of the camera.
Trying to get the rotation of (Y) in degrees like this:
360 / Math.PI * perspectiveCamera.rotation.y;
It returns the degrees from ..5..15...180..15..5 then -5..-15...-180..-15..-5.
Is there a another way to get the y rotation of the camera in 360 degrees?

In the past I have used radians * 180 / Math.PI to convert radians to degrees. More on these conversions here.
Or you could add 180 to the angle you are currently calculating to get a range from 0 to 360 :)

Related

How to get the y angle between 2 vectors in Three.js?

In Three.js I have 2 3d vectors and I want to find the x-axis and y-axis angle between them.
For the x-axis I found this
toDegrees(atan2(A.z, A.y) - atan2(B.z, B.y))
from
The X angle between two 3D vectors?
which works, but for y-axis, I am trying
toDegrees(atan2(A.z, A.x) - atan2(B.z, B.x))
but it gives me the wrong value. How can I fix this?
Thanks
You can use Vector3.angleTo directly, it will give you the angle in radians, as usual to math functions, here I printing it in degrees (multiplying by 180 degrees/pi rad= 1)
// notice that v1 is pointing to the x-axis direction.
const v1 = new THREE.Vector3(10,0,0);
const v2 = new THREE.Vector3(3,3,0);
const v3 = new THREE.Vector3(0, 50, 23);
// Alngle between v1 and v2
console.log(v1.angleTo(v2)*180/Math.PI)
// The operation is comutative
console.log(v2.angleTo(v1)*180/Math.PI)
// An example at 90 degree
console.log(v1.angleTo(v3)*180/Math.PI)
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
This makes it possible to find angles to any direction, if you want angle to a plane for instance, it is given by ans(a - 90) where a is the angle in degrees to the normal vector of the plane.

Sphere rotation in Babylon.js

I want to ask for help regarding rotation using the Babylon.js framework.
I need the sphere to rotate 45 degrees, exactly aligned with the diagonal circle, which has a 45 degree orientation, but I'm not getting it.
The code I made is in the link below:
https://codepen.io/polalas/pen/VwvaKwL
The method responsible for the rotation is the loop () method, which is triggered every time the scene is rendered.
function loop () {
var y1 = scene.getMeshByName("I1");
y1.rotation.y - = 0.01 * Math.sin (Math.PI / 4);
y1.rotation.x - = 0.01 * Math.sin (Math.PI / 4);
}
I imagine that I mishandled the rotation. Could someone help, please?
Using your code, the best way to achieve that is to first rotate the parent of the sphere (what you called newMesh (or I1)) 45 degrees around the Z axis right before adding the sphere as a child:
newMesh.rotate(BABYLON.Axis.Z, Math.PI / 4);
Afterwards you can rotate it around its Local (!) X axis in your render loop:
function loop(){
var y1 = scene.getMeshByName("I1");
}
This way you get a perfect rotation around your (mocked) pivot.

three.js orbital controls reset by animating

Is there any way to set the angle of three.js orbital controls angle. When t try to setAzimuthalAngle and polar angle it shows
controls.setPolarAngle(myangle)
controls.setPolarAngle is not a function
I need a way so that i can tween the cameras angle to 0.
As you note, there is no setPolarAngle function for OrbitControls.js. You probably want to change the min/max values for vertical orbiting instead to lock it at your desired angle.
// How far you can orbit vertically, upper and lower limits.
// Range is 0 to Math.PI radians.
this.minPolarAngle = 0; // radians
this.maxPolarAngle = Math.PI; // radians

find angle made by a line passing through origin

In above image the blank arrow will rotate randomly and stop at particular box.
I know the X & Y of each box how can i find the angle made by blank arrow. basically i want to find out at what angle each box is. I need to calculate this in javascript.
You can use slop to calculate angle
deltaY = Y //(of Box Point 2 is (0,0) so Delta = Y2-Y1=Y2);
deltaX = X //(of Box);
Than angle in degrees is
Degrees = arctan(deltaY / deltaX) * 180 / PI
If atan2 is present in library use(JavaScript)
Degrees = Math.atan2(deltaY ,deltaX) * 180 / PI

Angle of Rotation

Here is the code, I am trying to get the angle of rotation. I am rotating an image around a dial. I am getting all the angles right except when it reaches 270 degree it does some funky stuff. The angle changes to negative. It works fine from 0 to 270 but i cant get it to display angle between 270 to 360..Please give me some suggestions
this.rotate = function(x){
this.node.style.MozTransform="rotate("+x+"deg)";
this.node.style.WebkitTransform="rotate("+x+"deg)";
this.node.style.OTransform="rotate("+x+"deg)";
this.node.style.msTransform="rotate("+x+"deg)";
this.node.style.Transform="rotate("+x+"deg)";
myintID = setInterval(function(){
//Math!
angleFromEye = Math.atan2((cursorLocation.y-self.my_y), cursorLocation.x- self.my_x)*(180/Math.PI)+ 90;
//Rotate
self.rotate(angleFromEye);
Actually the angle is negative for the values -90 to 0 also, but you add 90 to the angle, so you don't see that.
Simply add 360 to the angle when it's negative:
if (angleFromEye < 0) angleFromEye += 360;
I think your problem is with your conversion from the range of return values of atan2 to your desired range.
atan2 gives angles in radians, in the range [-pi,pi], you want angles in degrees in the range [0,360].
Your conversion gives you angles in degrees in the range [-180+90,180+90] = [-90,270].
atan2(...)*(180/Math.PI) + 90
Try this instead:
atan2(...)*(180/Math.PI) + 180
I recently created a jQuery plugin, that allows you to get the rotation of an element, and also to rotate an element. It works in ie7 and ie8 as well.
Here: http://wp-dreams.com/jquery-element-rotation-plugin/

Categories