Slider3D: OnPointerDownObservable to change thumb position on bar, customisation options

Bugs
1

Hello,

I’m working with the Slider3D as best as I can to use it as a 360 Video scrub bar for use in WebXR. My implementation is 90% complete but falling a bit short of the HTML scrub bar I have constructed.

  1. When the bar is ‘clicked’ the thumb does not snap to its position as it does with the Babylon 2DGUI version.

  2. Customisation is limited concerning scaling. I need to change the size of the thumb and bar so they are the same height. I have used .scaling but it increases the size of the thumb exponentially.

Probing into the Slider3D object through console.log in DevTools did reveal attributes concerning those thumb scaling and I managed to adjust as desired but was unable to target these through my code. Perhaps these just need to be made available to edit?

Thanks for reading.

2

This PR will let you access the bar, thumb and backplate meshes of the Slider3D control:

As far as snapping is concerned, the Slider3D control comes from the MRTK library, so I don’t know if we can modify the behavior (I imagine the library is standardized)…

1 Like
3

image
If that enables me to change the scaling property here that would be great :slight_smile: Thanks for looking into this. I’ll consider hacky solutions to snapping such as changing the thumb value based on position of bar clicked if possible.

4

I’m not sure what’s the type of the object you dumped the properties for?

5

image
image1619×958 113 KB

It’s from _sliderThumb here, I print the ‘Slider3D’ object.

6

Ok, so in this case, once the PR is merged, you will be able to do your_slide3D.sliderThumb.scaling = ....

1 Like
7

Hi, I have another request if I may. I need to make the slider bar invisible so that I can place a 2d progress bar behind it and use the sliderthumb from 3DSlider. I feel like this could work as I have implemented a similar solution in HTML. The isVisible property of sliderBar doesn’t seem to be accessible from JS. Could this please be made so?

8

isVisible is a property of AbstractMesh, and sliderBar is an AbstractMesh, so it should work. Can you setup a repro in the Playground?

9

If you comment out line58 it’ll run. Hopefully you can see this example I’m not sure.

10

The slider bar mesh is loaded asynchronously, so it takes a little time before slider.sliderBar is defined. You can workaround it like this:

1 Like
11

That’s awesome, many thanks :slight_smile: