Rotate object with mouse with declared angle

Questions
,
1

Hi!

I wrote some code, that load few .gltf object and bound it to one 3D.Object().
Now this main object in scene graph is animated in declared angle.

I would like to bound it to mouseEvent and rotate it only on mouse move, in specified angle. Also I would love to attach tween.js for easing animation.

this is the part responsible for specified angle rotation in animation:

let solarSystem_speed = 1;

function render() {

    if (resizeRendererToDisplaySize(renderer)) {
      const canvas = renderer.domElement;
      camera.aspect = canvas.clientWidth / canvas.clientHeight;
      camera.updateProjectionMatrix();
    }

    solarSystem_speed += 0.25;

    let angle1 = solarSystem_speed % 180;
    if ( angle1 < 90 ) {
      solarSystem.rotation.y = (angle1 - 125) * Math.PI/180; 
    } else {
      solarSystem.rotation.y = ((180 - angle1) - 125) * Math.PI/180; 
    }

    renderer.render(scene, camera);

    requestAnimationFrame(render);

}

I attached some code witn onDocumentMouseMove, but I have no idea how to bind it with this rotation specification. Anyone help pls :)?

2

I’m not sure I understand this section. How do you want to map the mouse movement to a single transformation step? Applying a constant angular displacement is easy in a loop but when moving the mouse, you have to define how much movement triggers a single transformation. I’m not sure such kind of interaction makes sense.

Besides, it’s even not recommended to apply a fix transformation in an animation loop because frame times can be different. For a more uniform and consistent animation, you definitely want to respect a delta time value in your code. Besides, you should define your angular step in radians per second.

Have you considered to just use OrbitControls for interaction? In this way, you have an out-of-the box solution that will also work on mobile devices.