3D camera rotation

Kport1 · September 8, 2020, 4:24pm

Hello! im trying to create a 3D camera that rotates when mouse is dragged.
I created something that works, but the movement feels very strange.
Here’s my code:

Planet p = new Planet(new PVector(width / 2, height / 2, 100), 15);

PVector camPos = new PVector(width / 2, height / 2, 0);
PVector camDir = new PVector(width / 2, height / 2, 100);

float aYZ = 0;
float aXZ = 0;


void setup() {
  size(900, 900, P3D);

  perspective(PI / 2, float(width) / float(height), 0.1, 1000000);
}


void draw() {
  background(0);

  float camDirX = 100 * sin(aYZ) * cos(aXZ) + camPos.x;
  float camDirY = 100 * sin(aYZ) * sin(aXZ) + camPos.y;
  float camDirZ = 100 * cos(aYZ) + camPos.z;

  camDir = new PVector(camDirX, camDirY, camDirZ);


  println(sin(aYZ));

  camera(camPos.x, camPos.y, camPos.z, camDir.x, camDir.y, camDir.z, 0, 1, 0);

  if (keyPressed) {
    if (key == 'w') {
      camPos = camPos.add(camDir.copy().sub(camPos).normalize());
      camDir = camDir.add(camDir.copy().sub(camPos).normalize());
    } else if (key == 's') {
      camPos = camPos.add(camDir.copy().sub(camPos).normalize().mult(-1));
      camDir = camDir.add(camDir.copy().sub(camPos).normalize().mult(-1));
    }
  }


  p.show();
}


void mouseDragged() {
  float dx = mouseX - pmouseX;
  float dy = mouseY - pmouseY;

  aXZ += dy / 100;
  aYZ += dx / 100;
}

there is also a Planet and Body3D class:

class Body3D{
  PVector pos;
  PVector vel = new PVector(0,0,0);
  PVector acc = new PVector(0,0,0);
  
  float m;
  
  void applyAcc(PVector acc_){
    acc = acc.add(acc_);
  }
  
  void update(){
    vel = vel.add(acc);
    pos = pos.add(vel);
    
    acc = new PVector(0,0,0);
    
  }
}

class Planet extends Body3D{
  
  
  Planet(PVector pos_, float m_){
    this.pos = pos_;
    this.m = m_;
  }
  
  
  void show(){
    lights();
    noStroke();
    fill(255);
    translate(pos.x,pos.y,pos.z);
    sphere(this.m * 1.3);
  }
}

Thanks!

Chrisir · September 8, 2020, 7:11pm

center in 3D is 0,0,0, NOT width/2 height/2

When your planet is in the center and you want to rotate the cam around it, the camDir stays fixed at 0,0,0; and camPos rotates around the planet

there is a nice trigonometry primer in the tutorials : Tutorials / Processing.org

Edit: Example


Planet p = new Planet(new PVector(0, 0, 0), 15);
Planet p2 = new Planet(new PVector(110, 0, 110), 43);

PVector camPos = new PVector(0, 9, 0);
PVector camDir = new PVector(0, 0, 0);

void setup() {
  size(900, 900, P3D);
  perspective(PI / 2, float(width) / float(height), 0.1, 1000000);
}


void draw() {
  background(0);
  lights();

  float angle = map (mouseX, 
    0, width, 
    -PI, TWO_PI); 

  camPos = new PVector( 700 *  cos( angle ) + camDir.x, 
    map(mouseY, 0, height, -1333, 1333), 
    700 * sin( angle ) + camDir.z);

  camera( camPos.x, camPos.y, camPos.z, 
    camDir.x, camDir.y, camDir.z, 
    0, 1, 0);

  if (keyPressed) {
    if (key == 'w') {
      //    camPos = camPos.add(camDir.copy().sub(camPos).normalize());
      camDir = camDir.add(camDir.copy().sub(camPos).normalize());
    } else if (key == 's') {
      //  camPos = camPos.add(camDir.copy().sub(camPos).normalize().mult(-1));
      camDir = camDir.add(camDir.copy().sub(camPos).normalize().mult(-1));
    }
  }

  p.show();
  p2.show();

  camera();
  noLights();
  fill(255);
  textSize(19);
  textMode(SHAPE);
  text("height of cam is "+ str( map(mouseY, 0, height, -1333, 1333)), 
    -117, -117);
}

void mouseDragged() {
  //float dx = mouseX - pmouseX;
  //float dy = mouseY - pmouseY;

  //aXZ += dy / 100;
  //aYZ += dx / 100;
}
//---------------------------------------------------------------

class Planet extends Body3D {

  Planet(PVector pos_, float m_) {
    this.pos = pos_;
    this.m = m_;
  }

  void show() {
    lights();
    noStroke();
    fill(255);
    translate(pos.x, pos.y, pos.z);
    sphere(this.m * 1.3);
  }
}

//------------------------------------------------------------------

class Body3D {
  PVector pos;
  PVector vel = new PVector(0, 0, 0);
  PVector acc = new PVector(0, 0, 0);

  float m;

  void applyAcc(PVector acc_) {
    acc = acc.add(acc_);
  }

  void update() {
    vel = vel.add(acc);
    pos = pos.add(vel);

    acc = new PVector(0, 0, 0);
  }
}

Kport1 · September 10, 2020, 8:48am

thanks! But im trying to rotate the camera around its own axis and not around a object on the canvas. Like pressing the Left arrow will rotate the camera left, but with the mouse

Chrisir · September 10, 2020, 12:34pm

I see.

My formula is correct just swap position and lookAt

Kport1 · September 11, 2020, 1:27pm

yes. I know camDir must rotate, but i dont know how to translate mouse movement into this rotation.

Chrisir · September 11, 2020, 1:43pm

It’s really just like in my code

map mouse to angle and use this angle

Coming from my code swap cam pos and
cam lookAt

Chrisir · September 12, 2020, 8:42am

I am sorry, I didn’t post my Sketch above.

I posted it now

cam is moving around center here

Kport1 · September 12, 2020, 9:54am

Thx. This is great, but is it possible to have the y coordinate be a circle too? So you can keep looking up and then eventually come bak to where you were.

Kport1 · September 12, 2020, 10:01am

Right now the camDir has a maximum and minimum y coordinate, but in space there would not be a up or down, so the camera sould be able to rotate freely in every direction.

Chrisir · September 12, 2020, 10:25am

That’s true

I don’t know how to do this ad hoc

we have to ask one of the gurus

could you post your entire code to help them please?

Kport1 · September 12, 2020, 11:40am

I just addes some code for gravity wich also doesnt work… pls help

ArrayList<Planet> planets = new ArrayList<Planet>();

PVector camPos = new PVector(0, 0, 100);
PVector camDir = new PVector(0, 0, 0);

float aYZ = 0;
float aXZ;


float G = 0.01;


void setup() {
  size(900, 900, P3D);

  perspective(PI / 2, float(width) / float(height), 0.1, 1000000);

  aXZ = height / 2;

  planets.add(new Planet(new PVector(100, 0, 0), 5));
  planets.add(new Planet(new PVector(0, 100, 0), 5));
}


void draw() {
  background(0);

  if (aXZ > height) {
    aXZ = height;
  } else if (aXZ < 0) {
    aXZ = 0;
  }


  float angle = map (aYZ, 0, width, -PI, TWO_PI); 

  float camDirX = 700 * cos(angle) + camPos.x;
  float camDirY = map(aXZ, 0, height, -1333, 1333);
  float camDirZ = 700 * sin(angle) + camPos.z;

  camDir = new PVector(camDirX, camDirY, camDirZ);


  camera(camPos.x, camPos.y, camPos.z, camDir.x, camDir.y, camDir.z, 0, 1, 0);


  for (Planet p : planets) {
    p.show();
  }




  for (Planet b1 : planets) {
    for (Planet b2 : planets) {
      if (b1 != b2) {

        float r = dist(b1.pos.x, b1.pos.y, b1.pos.z, b2.pos.x, b2.pos.y, b2.pos.z);


        PVector p1 = new PVector(b2.pos.x, b2.pos.y, b2.pos.z);
        PVector p2 = new PVector(b1.pos.x, b1.pos.y, b1.pos.z);

        p1 = p1.sub(b1.pos);
        p2 = p2.sub(b2.pos);

        float a = G * ((b1.m * b2.m) / (r * r));

        b1.applyAcc(p1.mult(a).mult(1));
        b2.applyAcc(p2.mult(a).mult(1));
      }
    }
  }




  for (Planet p : planets) {
    p.update();
  }


  if (keyPressed) {
    if (key == 'w') {
      camPos = camPos.add(camDir.copy().sub(camPos).normalize());
      camDir = camDir.add(camDir.copy().sub(camPos).normalize());
    } else if (key == 's') {
      camPos = camPos.add(camDir.copy().sub(camPos).normalize().mult(-1));
      camDir = camDir.add(camDir.copy().sub(camPos).normalize().mult(-1));
    }
  }
}


void mouseDragged() {
  float dx = mouseX - pmouseX;
  float dy = mouseY - pmouseY;

  aXZ += dy / 1;
  aYZ += dx / 1;
}

class Body3D {
  PVector pos;
  PVector vel = new PVector(0, 0, 0);
  PVector acc = new PVector(0, 0, 0);

  float m;

  void applyAcc(PVector acc_) {
    acc = acc.add(acc_);
    
    strokeWeight(10);
    stroke(255);
    point(acc.x * 50 + pos.x,acc.y * 50 + pos.y,acc.z * 50 + pos.z);
  }

  void update() {
    vel = vel.add(acc.div(m));
    acc = new PVector(0, 0, 0);
    pos = pos.add(vel);
  }
}

class Planet extends Body3D{
  
  
  Planet(PVector pos_, float m_){
    this.pos = pos_;
    this.m = m_;
  }
  
  
  void show(){
    lights();
    noStroke();
    fill(255);
    translate(pos.x,pos.y,pos.z);
    sphereDetail(60);
    sphere(this.m * 1.3);
  }
}

glv · September 12, 2020, 11:05pm

This is a good resource for coding forces:
https://natureofcode.com/book/

:)

Kport1 · September 13, 2020, 8:22am

I have done this before in 2d, but after copy pasting the code into 3d it didnt work

Chrisir · September 14, 2020, 7:58pm

cam rotates around itself now, but y still traditional



// cam rotates around ITSELF  
// Looking at center 

Planet p = new Planet(new PVector(0, 0, 0), 15);
Planet p2 = new Planet(new PVector(110, 0, -110), 13);
Planet p3 = new Planet(new PVector(210, 0, -110), 13);

final PVector camPos = new PVector(333, 9, 333);
PVector camDir = new PVector(0, 0, 0);

void setup() {
  size(900, 900, P3D);
  perspective(PI / 2, float(width) / float(height), 0.1, 1000000);
}


void draw() {
  background(0);
  lights();

  float angle = map (mouseX, 
    0, width, 
    -PI, TWO_PI); 

  camDir = new PVector( 1200 *  cos( angle ) + 0, 
    map(mouseY, 0, height, -1333, 1333), 
    1200 * sin( angle ) + 0);

  camera( camPos.x, camPos.y, camPos.z, 
    camDir.x, camDir.y, camDir.z, 
    0, 1, 0);

  if (keyPressed) {
    if (key == 'w') {
      //    camPos = camPos.add(camDir.copy().sub(camPos).normalize());
      camDir = camDir.add(camDir.copy().sub(camPos).normalize());
    } else if (key == 's') {
      //  camPos = camPos.add(camDir.copy().sub(camPos).normalize().mult(-1));
      camDir = camDir.add(camDir.copy().sub(camPos).normalize().mult(-1));
    }
  }

  p.show();
  p2.show();
  p3.show();

  // HUD 
  camera();
  noLights();
  fill(255);
  textSize(19);
  textMode(SHAPE);
  text("cam rotates around ITSELF. Height of cam is "+ str( map(mouseY, 0, height, -1333, 1333)), 
    -117, -117);
}

void mouseDragged() {
  //float dx = mouseX - pmouseX;
  //float dy = mouseY - pmouseY;

  //aXZ += dy / 100;
  //aYZ += dx / 100;
}
//---------------------------------------------------------------

class Planet extends Body3D {

  color col = color (random(255), 33, 333); 

  Planet(PVector pos_, float m_) {
    this.pos = pos_;
    this.m = m_;
  }

  void show() {
    lights();
    noStroke();
    fill(col);
    translate(pos.x, pos.y, pos.z);
    sphere(this.m);
  }
}

//------------------------------------------------------------------

class Body3D {
  PVector pos;
  PVector vel = new PVector(0, 0, 0);
  PVector acc = new PVector(0, 0, 0);

  float m;

  void applyAcc(PVector acc_) {
    acc = acc.add(acc_);
  }

  void update() {
    vel = vel.add(acc);
    pos = pos.add(vel);

    acc = new PVector(0, 0, 0);
  }
}

Chrisir · September 15, 2020, 6:12am

Libraries

Please look at Peasycam

Topic		Replies	Views
Camera rotation in 3D using mouse Coding Questions	7	2395	May 9, 2020
Making a 3D camera Coding Questions	11	1649	January 28, 2020
Needing help for camera rotation in 3D with rotateY Coding Questions	1	255	December 15, 2020
Rotate Camera around it's own axis Coding Questions	1	485	September 25, 2018
3rd Person Shooter translate() and camera() Coding Questions	3	561	June 10, 2020

3D camera rotation

Related Topics