How to rotate or setState of easycam during mouse wheel zooming?

p5.js Libraries
1

Currently I’m trying to rotate a cube if the camera approaches it at a certain distance (300). But all rotation or setState functions are not working properly as it seems they are not interrupting the current zoom process.
Here is the code:
https://editor.p5js.org/hmdeif/sketches/Tr18pfOdw

Additionally, even the rotation that happens (if it happens) is not accurate sometimes, it is as if it rotates at random angles sometimes, whether I use the button or zoom in/out.
Thanks

1 Like
2

-a- i would say it seems to work only on double click
need work on the toggle logic
( start by adding a inside 2 times a print(" limit 300 toggle now"+rotateToggle ); )
so the question is not related to library

-b- hint add a


document.oncontextmenu = function() {
  return false;
}

so the RIGHT mouse button zoom ( mouseY up down ) works

1 Like
3

Thanks for your thoughts. Double click resets the camera. So this does not solve the problem.

4

Is someone out there trying to help solve this problem? or is it unsolvable?

5

@hmdeif To better assist you, can yow show us the code where you tried to implement your conditions? So far it seems to rotate regardless on the 300 limit. Correct?

1 Like
6

Here is my rotation code:

function moveCameraXYZ_v2(x,y,z)
{
  var st=easycam.getState();
  var rotXYZ = QuaternionToEuler(st.rotation[0], st.rotation[1], st.rotation[2], st.rotation[3]);
  st.rotation=EulerToQuaternion(rotXYZ[0]+x,rotXYZ[1]+y,rotXYZ[2]+z)
  easycam.setState(st, 500);
}

In this code the duration is 500. It does not rotate at this duration. It only rotates if the duration is set to zero. I don’t know if this is a bug in the easycam library. If so, what is the alternative?

7

sorry, again only can advice to use print, and as sometimes not obvious what is a new print line:


let count = 0;

// later
function moveCameraXYZ_v2(x,y,z)
{
  var st=easycam.getState();
  var rotXYZ = QuaternionToEuler(st.rotation[0], st.rotation[1], st.rotation[2], st.rotation[3]);
  st.rotation=EulerToQuaternion(rotXYZ[0]+x,rotXYZ[1]+y,rotXYZ[2]+z)
  print(count+" moveCameraXYZ_v2"); count++;
  easycam.setState(st, 2000);  // test 2 sec
}

so i see that it is executed ( and more slow works too )
looks like you not overworked the click logic part.
still i must double click to get the action,
but insofar it’s working.

from your easycam.js :


  //
  // STATE (rotation, center, distance)
  //
  /** @returns {Object} a copy of the camera state {distance,center,rotation} */
  getState() {
    return this.state.copy();
  }  
  /** 
   * @param {Object} a new camera state {distance,center,rotation}.
   * @param {long} animation time in millis.
   */
  setState(other, duration) {
    if(other){
      this.setDistance(other.distance, duration);
      this.setCenter  (other.center  , duration);
      this.setRotation(other.rotation, duration);
    }
  }