How to add object rotation on slider

Questions
,
1

Hi, I am trying to link a slider to a sphere to rotate rather than just moving the position. In order for this to work would the number slider 0-360 need to be converted to radians in the event listener function? As the current output doesnt work.

document.getElementById("pos").addEventListener("input", function (e){

sphere.rotation.y = e.target.value;

console.log(sphere.rotation.y);

});

this is linked to a simple rotation slider:

  <input type="range" name="pos" id="pos" min="0" max="360" step ="1"/>

Thanks!

2

It seems the code does work in this fiddle, though: Edit fiddle - JSFiddle - Code Playground

However, it’s actually more correct to convert degrees to radians. You can do this by using the THREE.MathUtils.degToRad() helper function.

In general, please do never use terms like “my code does not work” when reporting issues or bugs. “Not work” is way too generic and can mean a lot of things. Always describe the expected and current result in detail instead.

2 Likes