Idle user perspective camera rotation

Questions
,
1

Hey guys been stomped on how to recreate this idle perspective camera rotation https://thenewmobileworkforce.imm-g-prod.com/all-season this is the code im messing around with hope this helps thank you.

 window.addEventListener(
    "mousemove",
    (event) => {
      let xMiddle = window.innerWidth / 2; //give us middle point
      let xRatio = event.clientX / xMiddle; //gives ratio that we need
      let x = xRatio - 1; 
      let y = event.clientY / window.innerHeight;
      camera.position.x = x * 0.5;
      camera.position.y = y * 0.5;

      // figure out how to scroll camera while idle
      onInactive(1000, function () {
        // alert('Inactive for 5 seconds');
        for (let i = -0.5; i < 0.5; i++) {
          camera.position.x = x * i
          camera.position.y = y * i
        }
      });

      function onInactive(ms, cb) {
        console.log('hello')
        var wait = setTimeout(cb, ms);

        document.onmousemove = document.mousedown = document.mouseup = document.onkeydown = document.onkeyup = document.focus = function () {
            clearTimeout(wait);
            wait = setTimeout(cb, ms);

        };
      }
    },
    false
  );
1 Like
2

It seems this the camera controls in this official example could be a good match (if you invert the rotation and lower the sensitivity).

https://threejs.org/examples/webgl_materials_normalmap

3

The controls in @Mugen87 demo are rotating the model, where as the red bull controls seems to move the cameras position.

However, this topic is about the subtle movements which are playing while no user input happens (idle). But I dont know what Gurjot is asking because there is no question :question:

4

Hey guys thank you for the replies. So I have the camera rotation its just when the user is idle and the mouse movement stops the camera rotates on its own very slightly to give it that 3d effect. If you click on the link and dont do anything watch the image the perspective camera moves in a circle slightly. Thats why I add the onInactive function in my code example I hope this makes sense thank you.

5

You could get the position of the camera and the vector its looking in from camera’s position and the camera’s forward.
Calculate the point of pivot for the camera by adding the vector to the camera and a distance you determine.
Assume an axis at the pivot point (new Vector3(0, 1, 0)) or any other axis if you prefer.
Determine a max range for the sideways movement.
Do as you do in your for loop for the smooth motion, only you’d be using 3d coordinate to lerp and rotate it. (Something like this method to rotate an object around an arbitrary pivot).

This would work only if you plan to move in one axis (i.e along a ring with the pivot at the center).
If you think you’d need to move in both axes you are better of using Quaternions to do the rotations).

6

Also checkout the discussion on this thread. Might be useful.

1 Like
7

wow this looks very promising I will try it out on monday and let you know thank you!

8

Thank you the solution worked the downside is performance any idea how to fix the issue? Thanks again

9

Not too sure about that.
Would need to look at the full code to say anything. Maybe a jsfiddle or something would be easier to discuss.