I have a small issue about a custom cursor made in react three fiber.
To track the mouse movement on the viewport and update the position of an element with it is quite easy but it get's trickier once you add camera movements in the equation.
I made a small codepen to showcase the problem, basically my custom cursor would only work if my camera was right in front of the scene, for instance if the position was [0,0,5] which is not the case in my project.
https://codesandbox.io/s/simple-serotoninene-forked-shwiw?file=/src/ThreeElements/CanvasContainer.js
To add more complexity i also have camera animation on mouse movement on my real pro, which gets the cursor even wronger.
Anyone has a trick to resolve my problem ?
Thanks !
Related
Could some kind and clever D3 soul please put me out of my misery. I have the following example setup - https://codesandbox.io/s/compassionate-night-kpqc8t?file=/src/App.js. There are zoom buttons and the svg takes mouse events to initiate zoom. Problem is that the zoom triggered by the button is independent of that triggered by the button.
I believe this stackOverflow describes the problem and the solution - D3.zoom jumps when using mouse wheel after programmatically zoom - I just cannot figure out the implementation for the life of me in the context I have.
I got it to work. I'm not entirely sure what the difference is, but somewhere along the line I must've been targeting the wrong element...
At the bottom of this article - https://www.d3indepth.com/zoom-and-pan/ - is an example codepen. Following the codepen to the letter resolved my issue.
Thanks,
Simon
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'm a long-time user of SciChart, but it's an old version (3.1). I've just started using FastHeatMapRenderableSeries for the first time, and there is a requirement for a user to alter the chart's gradient stops. I've implemented a UI to do this (see image), which involves dragging markers that updates their respective gradient stop within the ColorMap's LinearGradientBrush. It's working in as much as gradient changes can be seen in the chart's HeatColorMap (not shown on this screenshot), and also in my "drag" control (a Rectangle whose Fill is bound to the ColorMap's brush).
The problem is that the colours within the chart itself don't change - perhaps I was being a little too hopeful that this would happen automatically! Is this possible, or will I have to recreate the series each time there has been a change to the gradient?
We actually have this working in a later version of SciChart. Im not sure which version exactly but it was introduced at some point. Have a look at this forum post which discusses a bug in the heatmap color map binding in v5.
In the v6 examples suite, you can drag the heat map legend and recolour the chart automatically, so we know in principle this works.
Very cool image by the way!
I really want to create circular slider. I've been searching, but I can't find any information. So any tutorial, guide or if someone already created like this. Please post their XML code.
Instead of making a circular slider (which as #auburg points out) would be a little unintutive to use (think the old telephone dials), consider making it a dial like a thermostat:
It's functionally very similar, but has a much larger hit-test area and is therefore less easy to mess-up for the user.
Try this guide: https://blogs.msdn.microsoft.com/jerrynixon/2012/12/06/walkthrough-building-a-sweet-dial-in-xaml-for-windows-8/
A circular slider can be implemented just like a normal horizontal or vertical slider. The only difference would be that in the MouseMove event handler of the thumb during the drag operation you cannot just handle the horizontal or vertical position. Instead you have to calculate the angle relative to the center of the slider and map that to the value of the slider.
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.