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.
Related
So I'm using React, Three Fiber as well as the drei library and cannon for physics.
I am making an apartment viewer as a personal project in which you can walk around in - so far everything works fine. To make it later on possible to load in the apartment model from a database (and make the creation process easier for multiple models), the transformations for the light switches, aktivatable point lights and the apartments collision boxes are copied from objects within the gltf file.
To prevent the collision boxes from rendering or otherwise effecting the rendering process, they are made invisible. (I also tried to set child.castShadow = false with no effect).
For some reason the shadows are corrupted: unwanted point light shadows.
I also tried to change some properties of the original child: Object3D properties in the Apartment component (the only place where the boxes could affect the shadows), without changing results.
Another thing is that there doesn't seem to be any options to adjust shadows anymore. Properties like shadowBias, shadowMapWidth etc. are deprecated. By hovering over it I get something like #deprecated — Use shadow.mapSize.width instead. At least I couldn't find a solution to that, also because the Three Fiber documentation isn't that extensive. Just using them doesn't work either.
I am playing with candlestick graphs (example from here: https://apexcharts.com/javascript-chart-demos/candlestick-charts/basic/) everything work as expected.
However, I am struggling with adding my signal data for a visual representation of the graph.
I am unable to find a solution that works I was thinking I can somehow fine-tune a timeline - I tried chart.js/apexcharts and for now, I believe the closest will be with the second framework.
What I need is a bar chart that can be used in numeric ranges for the X and Y-axis as presented below. (the goal is to be able to add the green bar as presented)
Is there an easy win or an idea of how to approach this?
Is there something I am missing?
That is my current solution (line graphs with stopWin/stopLose and entry price).
Still suboptimal - but works and is easy to achieve.
After weeks of playing around with it - the solution stayed:
I got two instances of apexcharts one with candlestick and one with line graphs
they are in a single div with CSS playground and position absolute.
I am passing standardised min/max values and has to have the same amount of elements in them (line graphs are allowing You to add null values which allow using this solution.
The final version work is repeatable and looks good.
if you need some help in similar case - feel free to reach out ;)
I've modeled using helixtoolkit which is done in a wpf user control library and hosted on ElementHost. I decided to do this because my model is fairly simple (just a stick element with lineVisual3d and bunch of small spheres).
Now I want to animate it and everything I find related to animation seems too complicated for what I'm trying to accomplish. I've seen storyboard being suggested as well as transform methods.
What I have is a 3D line connected by a bunch of points3D and I want to translate them only by a series of values at a fixed time increment.
I did this in a 2D graph using a timer for winform and even a forloop did the trick.
However, I'm not sure how to do the same for a 3D line element. I was thinking that since I have a simple structure simply redrawing it would suffice.
But my problem is I want to add a slider which acts in pretty much the same way as a video player, it will increment itself as the animation runs, I want to also be able to freeze it at any point in time and use the slider to go to any point in time much like how a video player works.
My biggest question here is how do I use a slider to control the animation. Again, this animation will simply be a bunch of values that I want to translate the stick element by(a series of points).
I've already got the values but I want to add an animation for these values at every increment while being able to control it using a slider.
--I will post any code if necessary, not posting any right now because I dont know what would help explain the question better
You can use TranslationTransform3D and apply the transform onto the 3D Model
Currently working on a project where I want to implement Auto Scrolling in a view. Is this possible with React Native? I have searched the internet and have not come across anything that shows this capability.
Most Stack Overflow questions and YouTube videos deal with scrolling between different views (not within the same view), scrolling to the bottom (with Scroll To), infinite scrolling, or scrolling responsively. But I haven't been able to find anything dealing specifically with auto-scrolling within a given view.
Please let me know. Thank you in advance.
Something that just came to my mind would be like...
Store current x and y offset values of the scrollview in the component's state, setState every 'x' seconds with the new offset and call scrollTo() method of scrollview. That would change the x and y offset repetitively and make it looks like is auto scrolling.
PS: I know is not a full solution and should be posted in the comments section but I'm not able to comment yet... hope this helps anyway :)
I need to display many markers on a WPF image. The markers can be lines, circles, squares, etc. and there can be several hundreds of them.
Both the image source and the markers data are updated every few seconds. The markers are associated with specific pixels on the image and their size should be absolute in relation to the screen (i.e. when I move the image the markers should move along with it, but if i zoom in, they should take the same space of the screen as before).
Currently, I've implemented this using the AdornerLayer. This solution has several problems but the most significant one is that the UI doesn't fare well under the load even for 120 such markers.
I wanted to ask what would be the best way to go about implementing this? I thought of two solutions:
Inherit from Canvas and make sure it is invalidated not for every
added marker but for a range of markers at once
Create a control that holds an image and change its OnDraw to draw all the markers
I would appreciate some pointers from someone with experience with a similar problem.
Your use case looks quite specialized, so a specialized solution seems in order. I'd try a variant of your second option — extend Image, overriding its OnRender method.