The following piece of code was written in order to rotate the camera by rad radians vertically (on an axis which has the angle of 90 deg on the vector where the camera looks at). However it's only working when the camera looks in Z direction (rotating on X axis) on every other case the code is rotating the camera on X axis when it shouldn't. Can you explain why is this happening? I would highly appreciate your help.
camera.getWorldDirection(direction)
console.log(direction)
/*direction.y or 0 I'm not sure*/
const axis = new THREE.Vector3(-1 * direction.z, 0,direction.x)
camera.rotateOnAxis(axis, rad)
I tried searching for similar issues, simulating the program paper. Unfortunately I could not solve it.
Related
I am in the process of making an arrow that points to an end goal using a canvas in HTML5 and Javascript. I am doing this by finding the x and y coordinates of the player and the end goal, then using Math.atan2() to find the angle. Up to that point everything works flawlessly, but then I get to the point of rendering the arrow at the same angle of the two points. I use ctx.translate() and ctx.rotate() to rotate the canvas accordingly, but it seems like the canvas doesn't rotate the same amount of degrees as I tell it to. For example:
var angles = 90;
ctx.rotate(angles);
but the canvas will rotate MUCH further than I want it to. Any clues as to why the canvas doesnt rotate by degrees and how to fix this? If needed here is the link to my game WIP: https://jsfiddle.net/juinorCPC/0azfu2wp/4/
EDIT:
I should probably also mention that i HAVE tried to rotate by radians and not by degrees, but the issue is that when i use radians, the canvas will rotate much LESS than it is supposed to.
EDIT x2:
I fixed the jsfiddle.
A quick example of the problem im seeing in action for those who cant get the fiddle to work:
Lets say I have a player in the middle of the canvas: (250, 250). I have a goal at another part of the canvas: (325, 125). I get the rotation in degrees: 23.96248897457819. Now i use ctx.rotate (better known as canvas.rotate() ) to rotate the canvas around the mid point (250, 250). The canvas does NOT rotate how i would like it to. IF i use degrees it rotates too much, if i use radians, it rotates too little.
Hola it me again try using this and if it work it work
function angle(playerX, playerY, goalX, goalY) {
var dx = playerX - goalX;
var dy = playerY - goalY;
var theta = Math.atan2(-dy, -dx);
theta *= 180 / Math.PI;
return theta;
}
I am trying to build a small app where my users can straighten up a tilted face with just 2 clicks
I ask my users to click on the middle of the nose and the middle of the eyebrows of the face within the image.
From there I get 2 points eyebrowMiddle(x1,y1) and noseMiddle (x2,y2).
Is it possible via these 2 points to calculate how much Canvas
rotation I need to have to rotate the image and make the face straight
in relation to the canvas rectangle?
Also, how can I detect and adjust accordingly if the image is tilted
to the left or right?
Here is a more descriptive image to show you what I mean now.
PS:
x1,y1 and x2,y2 are in relation to the canvas perimeter of
course, not the browser window or anything else.
We have tried the line equation such as m = (x2-x1) / (y2-y1) but the
result is always near 1 so I don't think we are following the right
course at the moment.
We don't care if the image looks wrong in the canvas as long as the
face features are parallel in relation to the bottom of the canvas
(they should be looking straight).
To perform such a rotation, you need to decide of the pivot point. Here i choose the eyebrow.
Then you have to choose a point in the target canvas where this pivot point will be hooked. I decided to choose the point at middle x coordinates, and at fourth of the screen in y.
To compute the rotation angle, you have to use atan2, which will nicely give you the angle for a given deltaY / deltaX in between two points ( angle = Math.atan2 ( delta y , delta x ) ) .
Then to draw :
- Translate to the target point.
- rotate by right angle.
- draw the image centering on its pivot.
ET VOILA, it works :-)
function rotate() {
ctx.save();
// go to default center position
ctx.translate(eyeBrowTargetPosition.x, eyeBrowTargetPosition.y);
// compute angle
var yDelta = noseMiddle.y - eyebrowMiddle.y;
var xDelta = noseMiddle.x - eyebrowMiddle.x ;
var angle = Math.atan2 (yDelta ,xDelta);
// compensate for angle
ctx.rotate(angle);
//draw image centering input on eyebrow
ctx.drawImage(face, -eyebrowMiddle.x, -eyebrowMiddle.y);
ctx.restore();
};
jsbin is here :
http://jsbin.com/wavokaku/2/edit?js,output
result with an approximation of the existing green dots :
I have a rectangle in canvas, and I know how to move it up and sideways.
What I want to do is have it move in a circular motion.
So my objects(rectangle) x and y would go in a circle.
Now I am assuming I need a radius for how far out and some formula for the speed(1pixel) to get it rotate on the axis.
Any idea's?
The parametric equation for moving in a circle is this:
x=r*cos(theta)
y=r*sin(theta)
theta is the angle, and r the radius.
If you want to know the change in theta to get the desired speed, solving for the distance d you get that the change in theta is: arccos(1-(d/r)^2/2)
The JavaScript functions are Math.cos, Math.sin, and Math.acos, respsectively. They all deal with radians.
I've searched for the answer to this and have tried many proposed solutions, but none seem to work. I've been struggling with this forever so any insight is greatly appreciated.
I have 3 shapes (vectors I suppose) on a JS canvas, each with an orientation represented as degrees off of 0 and a width. I need to drag one of these shapes "straight out" from its orientation. This is difficult to explain in words so please view the graphic I created:
The middle (diagonal) shape is at 45 degrees. It's origin is the red dot, (x1,y1). The user drags the shape and their mouse lies at the green dot, (x2,y2). Since the shape's origin is in the lower left, I need to position the shape at the position of the lighter blue shape as if the user has dragged straight outward from the shape's origin.
I don't think it matters, but the library I'm using to do this is KineticJS. Here's the code and some information I have available which may help solve the problem. This code positions the shape on top of the mouse, which isn't what I want:
var rotationDeg = this.model.get("DisplayOri"), // rotation in degrees
rotationRadians = rotationDeg * Math.PI / 180, // rotation in rads
unchanged = this.content.getAbsolutePosition(), // {x,y} of the shape before any dragging
dragBoundFunc = function (changed) {
// called on a mouseMove event, so changed is always different and is the x,y of mouse on stage
var delta = {
x: changed.x - unchanged.x,
y: changed.y - unchanged.y
};
return changed; // go to the mouse position
};
[edit] I should mention that the obvious of "return delta" doesn't work.
It sounds like you want to constrain the movement of the object.
Determine the vector representing the constraint axis : that is, we only want motion to occur along this line. It appears from your drawing that this is in the direction of the short line from the red dot out to the left. That vector has a direction of -1/m where m is the slope of the line we are moving.
Constrain the movement. The movement is represented by the mouse move delta - but we only want the portion of that movement in the direction of the constraint axis. This is done with a dot product of the two vectors.
So in pseudo code
m = (line.y2 - line.y1)/(line.x2 - line.x1)
constraintSlope = -1/m
contraintVector = {1, constraintSlope} //unit vector in that direction
userMove = {x2-x1, y2-y1} //vector of mouse move direction
projection = userMove.x * constraintVector.x + userMove.y * constraintVector.y
translation = projection * constraintVector //scaled vector
OH Great and Knowledgeable Stack Overflow, I humbly request your great minds assistance...
I'm using the three js library, and I need to implement a 'show extents' button. It will move the camera to a position such that all the objects in the world are visible in the camera view (given they are not blocked of course).
I can find the bounding box of all the objects in the world, say they are w0x,w0y,w0z and w1x,w1y,w1z
How can I, given these to bounds, place the camera such that it will have a clear view of the edges of the box?
Obviously there will have to be a 'side' chosen to view from...I've googled for an algorithm to no avail!
Thanks!
So Let's say that you have picked a face. and that you are picking a camera position so that the camera's line-of-sight is parallel to one of the axes.
Let's say that the face has a certain width, "w", and let's say that your camera has a horizontal field-of-view "a". What you want to figure out is what is the distance, "d" from the center of the face that the camera should be to see the whole width.
If you draw it out you will see that you basically have an isosceles triangle whose base is length w and with the angle a at the apex.
Not only that but the angle bisector of the apex angle forms two identical right triangles and it's length (to the base) is the distance we need to figure out.
Trig tells us that the tangent of an angle is the ratio of the oposite and adjacent sides of the triangle. So
tan(a/2) = (w/2) / d
simplifying to:
d = w / 2*tan(a/2)
So if you are placing the camera some axis-aligned distance from one of your bounding box faces then you just need to move d distance along the axis of choice.
Some caveats, make sure you are using radians for the javascript trig function input. Also you may have to compute this again for your face height and camera's vertical field-of-view and pick the farther distance if your face is not square.
If you want to fit the bounding box from an arbitrary angle you can use the same ideas - but first you have to find the (aligned) bounding box of the scene projected onto a plane perpendicular to the camera's line of sight