Changing angle of plane based on slider

Hello, I quite new to Babylon and I need some help changing the inclination of a ramp (stretched box) through a slider.

I have created a ramp, angled 15 deg using rotate(BABYLON.Axis.Z, -Math.PI/12), and a slider with a range of 15-90 deg. When I change the slider, I rotate the ramp again using rotate(BABYLON.Axis.Z, -value); however, this results in the ramp rotating 360 multiple times. I need help stopping the ramp rotation at 90 deg (full range of slider).

Any help would be appreciated! Thank you in advance!

Hi peanut,

Welcome to Babylon! If the work you’ve done so far is in a Playground you can share a link to, I can look at and help with your code directly. In this case, however, the docs already have a Playground that I think might help with your question.

https://www.babylonjs-playground.com/#U9AC0N#1

I’m guessing this code looks very similar to the code you already have; and if it does, then based on the description you provided, the problem is likely that your slider value is in degrees, but your rotation value is in radians. Try editing your slider bounds to

slider.minimum = BABYLON.Tools.ToRadians(15);
slider.maximum = BABYLON.Tools.ToRadians(90);

and see if that yields the behavior you’re looking for. Best of luck!

Hi syntheticmagus,

Thank you for your response! I copied my code into a Playground.

I was using the example that you sent (rotating the skull). I am assuming that I need to change the onValueChangedObservable function. Do I need to define a pivot?

Thank you again!

Hi peanut,

Okay, that Playground is super helpful, thanks! It looks like you were using the rotate() function, which will apply a rotation—which is to say increment the rotation—as opposed to set the rotation. You could account for this by rotating by the difference between the value and the current rotation or you can just set the rotation directly.

https://www.babylonjs-playground.com/#W9X493#3

This isn’t the most efficient code in the world since it allocates a new quaternion (I think) every time you change the slider, but for this use case it shouldn’t be a problem. Hopefully this yields behavior closer to what you were looking for!

1 Like

@syntheticmagus beat me to it, although I just used a simple rotation https://www.babylonjs-playground.com/#W9X493#4

1 Like

Thank you syntheticmagus and JohnK! Both of your solutions helped!