I've got a camera somewhere in a 3d space. I need to calculate angle between camera and a given point.
I can't use lookAt() method (nor any built-in Controller), because I'm also rotating camera on mousemove and want to animate the rotation.
In a word: how to change camera.rotation to make it look at specified point?
The typical approach for rotating a 3D object towards a target is the usage of Quaternion.rotateTowards(). It's usage is demonstrated in the official example webgl_math_orientation_transform.
The important bit of this approach is:
camera.quaternion.rotateTowards( targetQuaternion, step );
targetQuaternion represents the target orientation whereas step represents the angular step in radians. This value should honor the time delta for a correct animation.
Related
Target:
It is necessary to create two spheres, one of which can be rolled over the surface of the other with the mouse, and implement a camera that can be moved around these balls using the keyboard.
Implementation:
I started a matrix that stores the current state of the rotation of the rolling ball. When the user drags, I get a series of mouse move events, and each time I move, I calculate how many degrees around the current X and Y, as the user sees them, the rotation has changed. Then I calculate a matrix that represents these two rotations and multiply the original sphere rotation matrix by it in reverse order - the reverse order is necessary because the rotation occurs from the point of view of the camera, and not from the point of view of model space.
Problem:
But with such an implementation, the second sphere will not change the point of contact with the first sphere (it will, as it were, slide along it), how can one analytically implement the rotation of the point of contact of the balls in terms of matrices?
Here is the code if anyone is interested: https://github.com/AndrewStrizh/spheres-with-webGL
What you need is to be able to control rotation of your sphere around two (or more) different rotation pivots.
A proper way to deal with complex transformations is to implement hierarchical transformations:
http://web.cse.ohio-state.edu/~wang.3602/courses/cse3541-2019-fall/05-Hierarchical.pdf
In this case, you can control the rotation of the sphereB around the sphereA by making the sphereB a child of an third invisible object - call it Locator - located at the center of the sphereA. With proper implementation of hierarchical transformations, rotating the Locator will also rotate the sphereB around this Locator (so, around the sphereA). In the same time, you can also apply a rotation of the sphereB around its own center, making it spinning.
In practice, implementing true hierarchical transformations require to implement a scene graph, with proper nodes traversal, etc. But the main idea is that every object have what is called a local transform matrix, and world transform matrix. The local transform matrix hold only the own transformation of that particular object (locally to its own origin), while the world transform matrix is the final matrix, sum result of all the hierarchical transformations (from parents) applied to this object.
The world transform matrix is the one used as "model" matrix, to be multiplied with the view and projection matrices. World and local transform matrices of nodes are computed like this (pseudocode):
node.worldMatrix = node.localMatrix * node.parent.worldMatrix;
Knowing that, since you only need three objects and two hierarchical transformations, you don't have to implement a whole scene graph, you only need to simulate this principle by multiplying proper matrices to reproduce the desired behavior.
I'm using a Perspective Camera for my top down Three.js game, but it curves a bit too much because it's designed to be used as "first person view". Is there a way to adjust how much objects bend/curve in the frustum from the sides?
Essentially, I would like something like a mix of a Perspective Camera and an Orthographic Camera
E.g -- The walls of the buildings should be less visible from a certain distance
You can adjust the camera FOV.
https://threejs.org/docs/?q=persp#api/en/cameras/PerspectiveCamera
Made a simple Pen here:
https://codepen.io/cdeep/pen/eYEOqrz
camera.fov = 30;
camera.updateProjectionMatrix ();
The lesser the FOV, the more flatter things look.
Please note that you'll need to position the camera farther away at lower FOVs to ensure the contents fit inside the view which also requires you to increase the camera's far property so things don't get cut out
In hammer js what i wanted to do save the rotation of object, so where use left the rotation they can start from same.
But i found that its not working and in event there are two attributes one is rotation and another is angle.
may be i am missing something and i couldn't find documentation regarding angel property.
here is demo which is not able to save rotation after one cycle of rotate.
http://codepen.io/anon/pen/bZYgKd/
I am currently working on a game (Purely a hobby) found at http://game.mersholm.dk
I got most things working out great (transformation, selection, movement, objects etc) But theres one nut of which i just cannot crack.
I am trying to add an isometric building using drawimage(experimenting). Ofcourse the image also undergoes a transformation due to the transformation matrix defined. This just makes the image twirl and rotate.
If i reset the matrix, draw the image and sets the matrix again it will break my screen to world cordinate calculations.
How would i go around adding isometric graphics to the world without twirling them with the matrix?
best regards.
Jonas
The right way to go when drawing an image with transform is this one :
save the context.
reset the context's transform.
translate to the screen point where you will start drawing the image.
apply the transform required for the image : rotate/scale/skew.
draw the image at (0,0).
restore the context.
In case you are confident with the previous state of the context, do not reset it. But, then, if you don't reset the context -which is faster- just be sure to use world OR screen coordinates according to the current scale/transform.
What I want to achieve is a camera rotation like http://www.keithclark.co.uk/labs/3dcss/demo/ . It's not perfect and sometimes the camera breaks, but that's the idea.
I like the rotation to be similar like a human view, but I only managed to obtain a rotation across a certain point. This is an example of what I obtained http://jsfiddle.net/gaAXk/3/.
As i said before, i would like a human like behaviour.
I also tried with -webkit-transform-origin but with no better result.
Any help/suggestion will be highly appreciated.
The problem here is the following:
To give a human-like behavior, when the point of view moves, you should calculate the new positions on the x/y/z axis for the objects (not just the rotation angle in case of a rotation, for instance).
CSS transform should work in the follwing way, we give a perspective, for example of 800px to a scene. Then the objects will be visible with a Z position up to 800px, if the Z position is, for example 1000px, it will be behind our point of view, so we won't be able to see the element.
That said, after a rotation you should calculate the new position for the items based on our new point of view.
To be clearer I've updated your example with much simpler code (it only supports rotation and there's just one image): http://jsfiddle.net/gaAXk/12/
The perspective in the example is 800px.
The image is initially placed at x=0px, y=0px, z=0px. So it will be visible in front of us at a "distance" of 800px.
When we rotate the point of view, the element should move along a circumference around the point of view, so the x,z positions and the rotation angle of the element, needs to be updated.
The element in the example moves along a circumference with 800px radius (the calculatePos() function does the trick).
The same calculation should be updated if we change position (if the point of view gets closer to some objects, and further from others).
This isn't so trivial. If anyone has better solutions (I'm not a 3D expert), I will be glad to hear some.