# Camera rotation in 3D using mouse

**URL:** <https://discourse.processing.org/t/camera-rotation-in-3d-using-mouse/20563>\
**Category:** Coding Questions\
**Created:** [May 6, 2020, 9:40pm UTC](https://discourse.processing.org/t/camera-rotation-in-3d-using-mouse/20563 "2020-05-06T21:40:40Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![JunQu](https://avatars.discourse-cdn.com/v4/letter/j/ebca7d/32.png) [@JunQu](https://discourse.processing.org/u/JunQu)\
**Post date:** [May 6, 2020, 9:40pm UTC](https://discourse.processing.org/t/camera-rotation-in-3d-using-mouse/20563/1 "2020-05-06T21:40:40Z")

</div>

I’m working on a personal project, and I want to create a camera that follows a box() around. That is however already done. My problem is, I want the box AND camera to rotate with the mouse. (See; every third person game ever made)

 ![problems](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/4/4fb3d0345d019887590aaeaacf4f3409cb81e097.png)

```auto
int grid = 10;
PVector bpos = new PVector();
float bsize = 20;
float bspeedX, bspeedY, bspeedZ;
boolean input1, input2, input3, input4;

void setup() {
  //size(300,300,P3D);
  fullScreen(P3D);
}

void draw() {
  lights();
  camera(width/2.0 + bpos.x, height/2 + bpos.y+30 - bsize*5, (height/2.0) / tan(PI*30.0 / 180.0) + bpos.z-700, 
    width/2.0 + bpos.x, height/2.0, bpos.z, 
    0, 1, 0);
  //camera(eyeX, eyeY, eyeZ, centerX, centerY, centerZ, upX, upY, upZ) - no parameters
  //camera(width/2.0, height/2.0, (height/2.0) / tan(PI*30.0 / 180.0), width/2.0, height/2.0, 0, 0, 1, 0) - default
  background(125); 
  pushMatrix();
  translate(width/2, height/2);
  for (int i = -width/2; i <width/2; i+=grid) {
    for (int j = -height/2; j < height/2; j+=grid) {
      float y = bsize/2;
      line(i, y, j, i+grid, y, j );
      line(i+grid, y, j, i+grid, y, j+grid );
      line(i+grid, y, j+grid, i, y, j+grid );
      line(i, y, j, i, y, j+grid );
    }
  }
  popMatrix();
  noCursor();
  pushMatrix();
  translate(width/2+bpos.x, height/2+bpos.y, bpos.z);
  stroke(255);
  fill(0);
  box(bsize);
  popMatrix();

  if (input1 == true && bspeedX >-3)bspeedX-=0.5;
  if (input2 == true && bspeedX<3)bspeedX+=0.5;
  if (input3 == true && bspeedZ >-3)bspeedZ-=0.5;
  if (input4 == true && bspeedZ <3)bspeedZ+=0.5;
  //-------------------------------------------//  
  if (bspeedX!=0)bspeedX*=0.95;
  if (bspeedZ!=0)bspeedZ*=0.95;
  bpos.x+=bspeedX;
  bpos.z+=bspeedZ;
}

void keyPressed()
{
  setMove(keyCode, true);
}
void keyReleased()
{
  setMove(keyCode, false);
}
boolean setMove(int k, boolean b)
{
  switch (k) {
  case 'A':  
    return input1=b;
  case 'D':  
    return input2=b;
  case 'W': 
    return input3=b;
  case 'S':
    return input4=b;
  default:   
    return b;
  }
}

```

Feel free to ask questions.

---

<div class="post-metadata">

**Author:** ![JunQu](https://avatars.discourse-cdn.com/v4/letter/j/ebca7d/32.png) [@JunQu](https://discourse.processing.org/u/JunQu)\
**Post date:** [May 7, 2020, 5:48pm UTC](https://discourse.processing.org/t/camera-rotation-in-3d-using-mouse/20563/2 "2020-05-07T17:48:55Z")

</div>

Solved with help from a friend.

```auto
int grid = 100;
PVector bpos = new PVector();
float bsize = grid;
float bspeedX, bspeedY, bspeedZ;
boolean input1, input2, input3, input4;
float cameraRotateX;
float cameraRotateY;
float cameraSpeed;
int gridCount = 50;
PVector pos, speed;
float accelMag;

void setup() {
  fullScreen(P3D);
  cameraSpeed = TWO_PI / width;
  cameraRotateY = -PI/6;
  pos = new PVector();
  speed = new PVector();
  accelMag = 2;
}

void draw() {
  lights();
  translate(width/2, height/10);
  rotateX(cameraRotateY);
  rotateY(cameraRotateX);
  background(125); 
  pushMatrix();
  translate(bpos.x, height/2 + bpos.y, bpos.z);
  stroke(255);
  fill(0);
  rotateY(atan2(speed.x, speed.y));
  box(bsize);
  popMatrix();

  PVector accel = getMovementDir().rotate(cameraRotateX).mult(accelMag);
  speed.add(accel);
  pos.add(speed);
  speed.mult(0.9);  
  translate(0, height/2+bsize/2);
  drawGrid(gridCount);
}

void drawGrid(int count) {
  translate(-pos.x, 0, -pos.y);
  stroke(255);
  float size = (count -1) * bsize*2;
  for (int i = 0; i < count; i++) {
    float pos = map(i, 0, count-1, -0.5 * size, 0.5 * size);
    line(pos, 0, -size/2, pos, 0, size/2);
    line(-size/2, 0, pos, size/2, 0, pos);
  }
}

void mouseClicked()
{
  println("bpos.x" + bpos.x);
  println("bpos.y" + bpos.y);
  println("bpos.z" + bpos.z);
}

void mouseMoved() {
  cameraRotateX += (mouseX - pmouseX) * cameraSpeed;
  cameraRotateY += (pmouseY - mouseY) * cameraSpeed;
  cameraRotateY = constrain(cameraRotateY, -HALF_PI, 0);
}

PVector getMovementDir() {
  return pressedDir.copy().normalize();
}

boolean wPressed, sPressed, aPressed, dPressed;
PVector pressedDir = new PVector();

void keyPressed() {
  switch(key) {
  case 'w':
    wPressed = true;
    pressedDir.y = -1;
    break;
  case 's':
    sPressed = true;
    pressedDir.y = 1;
    break;
  case 'a':
    aPressed = true;
    pressedDir.x = -1;
    break;
  case 'd':
    dPressed = true;
    pressedDir.x = 1;
    break;
  }
}

void keyReleased() {
  switch(key) {
  case 'w':
    wPressed = false;
    pressedDir.y = sPressed ? 1 : 0;
    break;
  case 's':
    sPressed = false;
    pressedDir.y = wPressed ? -1 : 0;
    break;
  case 'a':
    aPressed = false;
    pressedDir.x = dPressed ? 1 : 0;
    break;
  case 'd':
    dPressed = false;
    pressedDir.x = aPressed ? -1 : 0;
    break;
  }
}

```

---

<div class="post-metadata">

**Author:** ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)\
**Post date:** [May 7, 2020, 8:38pm UTC](https://discourse.processing.org/t/camera-rotation-in-3d-using-mouse/20563/3 "2020-05-07T20:38:35Z")

</div>

This seems to have been answered in your other [post](https://discourse.processing.org/t/extend-mousex-position-beyond-screen/20605/5)

---

<div class="post-metadata">

**Author:** ![JunQu](https://avatars.discourse-cdn.com/v4/letter/j/ebca7d/32.png) [@JunQu](https://discourse.processing.org/u/JunQu)\
**Post date:** [May 7, 2020, 8:44pm UTC](https://discourse.processing.org/t/camera-rotation-in-3d-using-mouse/20563/4 "2020-05-07T20:44:18Z")

</div>

I also wrote a comment on this one with the code 😃 Should I delete my solved posts?

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [May 7, 2020, 8:50pm UTC](https://discourse.processing.org/t/camera-rotation-in-3d-using-mouse/20563/5 "2020-05-07T20:50:49Z")

</div>

No, let the posts untouched please

Chrisir

---

<div class="post-metadata">

**Author:** ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)\
**Post date:** [May 8, 2020, 6:37am UTC](https://discourse.processing.org/t/camera-rotation-in-3d-using-mouse/20563/6 "2020-05-08T06:37:50Z")

</div>

NEVER ever delete posts - members have provided their time, knowledge and skills for free. They did that not only to help you but also anyone else with similiar questions. Deleting them would be an insult to them.

When posting think about whether you need a new discussion or whether it is part of an earlier post by you, that way answers are not duplicated and effort is focused on the one area.

---

<div class="post-metadata">

**Author:** ![JunQu](https://avatars.discourse-cdn.com/v4/letter/j/ebca7d/32.png) [@JunQu](https://discourse.processing.org/u/JunQu)\
**Post date:** [May 8, 2020, 8:46am UTC](https://discourse.processing.org/t/camera-rotation-in-3d-using-mouse/20563/7 "2020-05-08T08:46:03Z")

</div>

Got it. Posts will stay 😉 Thanks.

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [May 9, 2020, 9:27pm UTC](https://discourse.processing.org/t/camera-rotation-in-3d-using-mouse/20563/8 "2020-05-09T21:27:55Z")

</div>

> [@JunQu](#):
>
> (See; every third person game ever made)

Well, not all of them, no, but I get your point.

The QueasyCam library is also specifically for this. It includes pan, tilt, and camera friction settings. You can install through PDE Contributions Manager.

- [GitHub - jrc03c/queasycam: (!!! NOTE: INACTIVE PROJECT !!!) A super-simple FPS camera library for Processing.](https://github.com/jrc03c/queasycam)

See the example sketch MazeRunner