I'm trying to make a third person player controller in p5js using WEBGL, and I can't figure out how to make the camera rotate around a point. I've tried using rotate, but it just makes the cube (placeholder for player) spin around. Here is my code:

    let x = 0;
    let y = 1;
    let z = 0;
    let dy = 0; // dy for gravity
    let speed = 2;
    let cam;
    let jumpHeight = 2;
    let grav = 0.02;
    
    function setup() {
        createCanvas(windowWidth, windowHeight, WEBGL);
        background(100);
        debugMode();
        cam = createCamera();
    }
    
    function draw() {
        background(100);
        controller();
        gravity();
        cam.setPosition(x, y - 200, z - 250);
        cam.lookAt(x, y, z);
        translate(x, y, z);
        box();
    }
    
    
    function controller() {
        if (keyIsDown(87)) z += speed;
        if (keyIsDown(83)) z -= speed;
        if (keyIsDown(65)) x += speed;
        if (keyIsDown(68)) x -= speed;
    }
    
    function keyPressed() {
        if (keyCode == 32 && round(y) >= 0) {
            dy -= jumpHeight; // Jump
            console.log('jump');
        }
        else console.log(round(dy));
    }
    
    
    function gravity() {
        if (y <= 0) dy += grav;
        if (y >= 0) y = -1;
        y += dy;
    }
    
    
    function mouseMoved() {
        // Trying to figure out how to make camera pivot around a point here
    }
``

I'm trying to make a third person player controller in p5js using WEBGL, and I can't figure out how to make the camera rotate around a point. I've tried using rotate, but it just makes the cube (placeholder for player) spin around. Here is my code:

    let x = 0;
    let y = 1;
    let z = 0;
    let dy = 0; // dy for gravity
    let speed = 2;
    let cam;
    let jumpHeight = 2;
    let grav = 0.02;
    
    function setup() {
        createCanvas(windowWidth, windowHeight, WEBGL);
        background(100);
        debugMode();
        cam = createCamera();
    }
    
    function draw() {
        background(100);
        controller();
        gravity();
        cam.setPosition(x, y - 200, z - 250);
        cam.lookAt(x, y, z);
        translate(x, y, z);
        box();
    }
    
    
    function controller() {
        if (keyIsDown(87)) z += speed;
        if (keyIsDown(83)) z -= speed;
        if (keyIsDown(65)) x += speed;
        if (keyIsDown(68)) x -= speed;
    }
    
    function keyPressed() {
        if (keyCode == 32 && round(y) >= 0) {
            dy -= jumpHeight; // Jump
            console.log('jump');
        }
        else console.log(round(dy));
    }
    
    
    function gravity() {
        if (y <= 0) dy += grav;
        if (y >= 0) y = -1;
        y += dy;
    }
    
    
    function mouseMoved() {
        // Trying to figure out how to make camera pivot around a point here
    }
``

• camera
• p5.js

1 Answer 1

Try something like this, if I understood correctly your problem:

EDIT #2

let x = 0;
let y = 0;
let z = 0;
let dy = 0;
let speed = 2;
let cam;
let jumpHeight = 2;
let grav = 0.02;
let camAngle = 0;
let camRadius = 250;
let movingCubes = [];

function setup() {
  createCanvas(windowWidth, windowHeight, WEBGL);
  cam = createCamera();
  for (let i = 0; i < 5; i++) {
    movingCubes.push({
      x: random(-500, 500),
      y: 0,
      z: random(-500, 500),
      angle: random(TWO_PI)
    });
  }
}

function draw() {
  background(100);
  controller();
  gravity();
  let camX = x + camRadius * sin(camAngle);
  let camZ = z + camRadius * cos(camAngle);
  cam.setPosition(camX, y - 200, camZ);
  cam.lookAt(x, y, z);
  push();
  rotateX(HALF_PI);
  fill(50, 100, 50);
  noStroke();
  plane(2000, 2000);
  pop();
  push();
  translate(x, y, z);
  let dx = camX - x;
  let dz = camZ - z;
  let angle = atan2(dx, dz) + PI;
  rotateY(angle);
  fill(200, 0, 0);
  box(50);
  pop();
  for (let cube of movingCubes) {
    cube.angle += 0.01;
    push();
    translate(cube.x, cube.y, cube.z);
    rotateY(cube.angle);
    fill(0, 200, 200);
    box(30);
    pop();
  }
}

function controller() {
  let forwardX = -sin(camAngle);
  let forwardZ = -cos(camAngle);
  let leftX = -cos(camAngle);
  let leftZ = sin(camAngle);
  if (keyIsDown(87)) {
    x += speed * forwardX;
    z += speed * forwardZ;
  }
  if (keyIsDown(83)) {
    x -= speed * forwardX;
    z -= speed * forwardZ;
  }
  if (keyIsDown(65)) {
    x += speed * leftX;
    z += speed * leftZ;
  }
  if (keyIsDown(68)) {
    x -= speed * leftX;
    z -= speed * leftZ;
  }
}

function keyPressed() {
  if (keyCode === 32 && y === 0) {
    dy = -jumpHeight;
  }
}

function gravity() {
  dy += grav;
  y += dy;
  if (y > 0) {
    y = 0;
    dy = 0;
  }
}

function mouseMoved() {
  let deltaX = mouseX - pmouseX;
  camAngle += deltaX * 0.01;
}