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/
Related
I have problems with a multitouch library, in this case Interact.js, which e.g. generates a pinch / rotate for a target although one of the two pointer events is outside the target when the gesture is started. That doesn't do me any good.
I wonder if it makes sense to rely on a library or to create the 2 gestures, drag and rotate, myself.
In order not to start all over, there is an example for this, i.e. to determine the mathematics of the rotation from the movement of 2 points, I have managed the relevant pointers so far.
Many thanks in advance.
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.
I'm looking over the documentation for three.js right now and have found the controls section. I see that it's possible to use orbit to control the cameras view of the scene and I ahve confirmed that this works with touchscreen. What I cannot find anywhere online is if it has the possibility to rotate, scale, and transform a loaded model. I see that transform exists but I can't find anything else that I would need for it.
You need to add event listeners to the canvas by yourself and detect intersections. If intersection with the desired object was made, then make transformations depending on the event to it.
I am trying to use directional rotation plugins together with pixi.js plugins.
However, it doesn't seem to be working. If you undo the comments in the codepen: https://codepen.io/asiankingofwhales/pen/RyNKBR?editors=0010, you could see that I tried three different ways:
1 directly adding "_cw" doesn't work
2. using directional rotation plugin without pixi.js plugin result in crazy rotating
3. combining directional rotation plugin with pixi plugin doesn't work at all. no rotations.
Can anyone help?
Or if this is not possible yet, can anyone shed some lights on how to do directional rotations with pixi.js?
This is the simplified versions of a project I am working on: https://codepen.io/asiankingofwhales/pen/JvoWYY?editors=0010. Basically, I have a constantly rotating object, then at one point, I decide to rotate it to a certain point. However, I want all the rotations to be clockwise, which isn't possible at this point.
I tried accessing the current rotations values, and then calculate the difference between the current and the destination values, then using the "=+" to do clockwise rotation. However, the value I am accessing always seems to be outdated.
Because if the rectangle is constantly rotating, I might be getting a rotation value now, but by the time I used it to calculate differences, it's already moving to a bigger rotational angle. Or am i wrong?
Any other other solutions to this problems?
The right answer has been found:
https://greensock.com/forums/topic/18213-directional-rotations-do-not-work-with-pixi-plugins/?tab=comments#comment-83923
I'm building an application based on Paper.js.
I have a list of items, each composed from a top level group and a bunch of paths as children.
I need to implement collision detection, which currently works like so:
When an item is dragged, its components (the paths it's comprised of) are checked against any other path in the same layer using the
Path#getIntersections(path) method.
If the method returns a non empty array (of CurveLocations, which describe the points of intersection) I know there's a collision. I
stop dragging and combine the items.
If the returned array is empty, there's no collision to handle so no need to interrupt the drag. I translate (move) the dragged item by
the distance it was dragged.
And now, here's what I need to do in step 2:
Upon detecting a collision, I need to move the item to the nearest
"legal" position (the closest to the current mouse position without
overlapping any other shape/border).
Now I can go about implementing SAT or GJK and solving it without the getIntersections method, but the only thing I'm lacking here is the MTV (if I'm not mistaken).
Can someone please confirm if this is either possible or not, and if it is, then how?
Update
After some fiddling with the various mouse events, I've come to a current (imperfect) solution:
onMouseDown: Save the mouse offset (item position minus mouse position)
onMouseDrag: Check for intersections. If so, translate the dragged object by event.delta.negate() while the check returns true. When done, update the offset.
If no intersection is detected, just move the dragged item to the mouse position minus offset.
onMouseUp: The same as in the drag event, except if no collision is detected then do nothing.
This is more or less working, except it's jittery and it doesn't deal with containment.
Will update with an example as time permits.
If you only have two shapes and they are all quite close to circles and boxes and have similar sizes you could get the center of the bounding box of the shapes and use those center points as a direction vector. Then you move it incrementally away until there is no intersection anymore. But if you have shapes like a U or O that surround another smaller shape it is likely that this method will not give the shortest distance. The same if the moving away will hit other objects.
So I think what you really need is a numerical solution that moves the shape away from its center point in a circular fashion with growing diameter until there wont be any intersections anymore.
Another problem could be when your shape is enclosed in another shape and you will not even have any intersections. So I guess it would be better to use hittest.
Edit:
Here is a very easy not very well optimized example of what I tried to explain with the middle points. Reload it if you do not see any overlays. For the circular way the checking just gets more complicated because you would move the shape not only away but also in all other kind of directions.
Edit2: Second example that checks for intersection and moves the shape outside. As you can see intersection alone is not enough to check for if the obstacle gets bigger than the dragged item.