I'm having an animated object, that can zoom, drag and rotate. What is the best way to detect its collision with other object or border? What I tried so far:
onLayout doesn't fire on reanimated events.
useAnimatedReaction crashes on attempts to use references (created with either useRef or useAnimatedRef) inside of it, thus cannot use .measure, .measureLayout or reanimated measure inside of it.
useEffect (with dependencies of zoom, rotate and drag shared values) doesn't fire until the gesture is done. Value created with useDerivedValue doesn't help in this case either.
Here is the sample project:
https://github.com/topheroes/TestReanimatedIntersection
Please advice
Related
I'm trying to create a viewer in react-three-fiber with react-three/drei where I can switch between OrbitControls and TrackballControls.
The problem is that when switching from TrackballControls to OrbitControls, the axis that the camera rotates around changes as of course the TrackballControls change the up-vector when moving around.
I created a couple of minimal examples in codesandbox to explain my approach to solve this and to show where I'm stuck.
Base Case
This shows the initial attempt to switch between the different control types:
https://codesandbox.io/s/r3f-camera-controllers-base-neu07
Attempt #1
Obviously, this does not work as it is, so I tried resetting the up-vector to (0, 1, 0) and calling lookAt(). This seems to work initially as the camera reorients itself correctly (this is how it should look like). However, it does not rotate around the correct axis and instead moves in strange arcs. See here:
https://codesandbox.io/s/r3f-camera-controllers-set-up-vector-yps4k
Attempt #2
For this question it was suggested to create a new camera which I also tried but ultimately it lead to the same result. This here is my attempt at creating a new camera and copying some values to the new camera:
https://codesandbox.io/s/r3f-camera-controllers-reset-camera-3cih0
Any help appreciated. Thanks!
After a couple of days, I finally figured out a way to achieve what I want.
Instead of trying to remove the different controls, I just enable and disable them separately. I can then call the reset() functions on both Controls via a ref if the control prop changes. To retain the camera position, I can just temporarily store it before resetting the controls.
You can find an example here.
I actually asked this before but have not received a satisfactory answer - so I will try to formulate the question differently.
When a BoxLayout.X Container is nested in a BoxLayout.Y Container one can scroll both ways and after a certain threshold it sticks to vertical or horizontal movement.
What I want is the same behaviour with a Component where the Component derivative is nested in a Container using BoxLayout.Y. Both the Component derivative and the Container it is nested in should handle pointer movements - the Component the horizontal movements and the Container the vertical pointer movements - until the pointer has moved a certain distance and then it should lock to either vertical movement or horizontal movement, just like it already sort of works with nested Container components.
This would greatly enhance the user experience because out of the box with Codename One dragging for example a switch vertically does not work because it swallows all the pointer events, not only the horizontal movements but all of them.
Now - the desired behaviour described above appears hard to achieve because one cannot delegate pointer movement events to the parent Container.
Any ideas of how that could be done?
This is implemented in several layers. One of them is:
protected int getDragRegionStatus(int x, int y);
A component can return a bias to a specific axis by overriding this method. E.g. by returning DRAG_REGION_LIKELY_DRAG_X.
The second bit is through the stickyDrag member of form which biases drag behavior to the source component.
Apparently the default scrolling functionality works when the Component pointer* methods are either not overridden or if the overriding methods call the super methods.
In the Codename One Switch component the vertical scrolling of a parent Container doesn’t work because it just overrides the pointer* methods of Component. See the corresponding bug in issue 2645
I'm trying to carefully word this question because the problem doesn't appear to be that the animation isn't being imported. I can see the animation as <untitled animation> in the scene graph, and I can play the animation in Xcode; the issue is then locating the animation as an attribute to any of the objects. This is what I can see in the scene graph:
But, when I try and locate the animation here:
... nothing appears. So, it seems that it isn't importing the animation as a CAAnimation object with a key.
I have tried to programmatically enumerate through the child nodes to find any CAAnimation objects, but it doesn't see any. Other scenes work perfectly however.
What do I need to add to the DAE file to get it to build the CAAnimation object properly?
Worth pointing out that the 3D model and animation was exported from 3DS Max using OpenCollada. I don't know what the best practices are for exporting collada to SceneKit, and if anyone has any useful information that would be great. Apple don't seem to have anything.
The SceneKit editor in Xcode does not display the root node in the scene graph view, and it might be the one that holds the animation.
You should be able to retrieve the root node's animation programmatically.
How can I disable mouse wheel zoom on Mapbox maps?
I am trying to create a simple map, as per the simple example:
mapbox.auto('map', 'examples.map-vyofok3q');
The Mapbox docs say that you can supply an extra eventhandler argument when you create the map, including the MM.MouseWheelHandler() event, but they do not example how to actually provide a handler:
eventHandlers can be an array of event handlers, including any of the following:
.... MM.MouseWheelHandler()
Please could someone give an example of how to use this handler to disable mouse wheel zoom?
For Mapbox GL JS maps
map.scrollZoom.disable();
(this is a double with a support forum question, but I'll write it here as well)-> http://bl.ocks.org/4404508
I am currently developing a Silverlight OOB application using the Bing Map Control, however I have come across an issue I am struggling to resolve. Basically I have three map layers:-
Base Map (bottom layer)
Icon / Pushpin layer (middle layer)
Shape / drawing layer (top layer)
This all works fine, I have put mouse right click functionality on each of my icons (pushpins if you prefer), if I add a map polygon or polyline to the top layer and this item happens to cover the same area as one of my icons in the middle layer I can no longer get any of the mouse events to fire on my icon.
If anyone can think of a way I can pass the mouse operations from my top layer objects to the middle layer objects please let me know.
Many thanks in advance
Set the IsHitTestVisible of your top layer to false. I feel I need to type more text here but there really isn't much more to say.
It's not clear from your question if you need both the shape and the icon to get the mouse event.
If all you need is for the icon to get the event, then switch the order of your layers so Icon layer is on top.
If you need both shape and icon to get the event, then (if you keep your order with shapes on top) you would need to have some way to tell what icons a shape covers. Do you have a parent/child releationship between them? If not, can you create one? If you set up an event on the shape, and set up OnEvent handlers for the icons that listen to the events, then you can have the icons react as well.
If you are more clear about what your situation is, I could post some code that could help.