Moving the camera around


#1

I’m trying to move the the camera (with the keyboard) in my 3d sketch but can’t get things working.
i’ve tried with and without the Camera() function
the result is always a mess !
Could someone give me an hint : for example if I turn left by an angle of 0.1 rad what argument of the function camera should I move ?
With this help I could hopefully do the rest (moving forewards and backwards)

Cheers


#2

First off is it essential that you use the keyboard? Because if you’re willing to use the mouse. I suggest orbitControl() it’s plug and play.

If you’d like to use the keyboard and you don’t need full control. I suggest rotateX(), rotateY(), and rotateZ().

If you would like full control camera() is the function to use. However it’s difficult to understand. The first 3 numbers are the coordinates of the camera itself. The next 3 are the coordinates of where it’s looking normally you want 0, 0, 0. The last 3 are the vector indicating camera’s yaw, pitch, and roll. This stack overflow describes the method that’s basically going on behind the scenes in p5. I found it helpful.

I would use a vector for each of these sets that might change and then update them. Below is a basic sketch that uses the camera() function and a vector to store the location. It’s working correctly but it might not seem like it is because it’s not intuitive at all. To get what you want you’ll have to do a lot of trigonometry. That’s why I’d suggest using some of the built in methods if possible so you don’t have to figure it out yourself. If that is something you want to do I suggest looking at how the orbitControl() method is implemented and working from there.

let cameraLocation;

function setup() {
  createCanvas(windowWidth, windowHeight, WEBGL);
  cameraLocation = createVector(0, 0, (height/2.0) / tan(PI*30.0 / 180.0));
}

function draw() {
  background(51);
  updateCameraLocation();
  // console logging camera location helps to conceptialize what's happening
  // console.log(`Camera: x:${cameraLocation.x}, y:${cameraLocation.y}, z:${cameraLocation.z}`)
  camera(cameraLocation.x, cameraLocation.y, cameraLocation.z, 0, 0, 0, 0, 1, 0);
  normalMaterial();
  torus(50, 15);
}

function updateCameraLocation() {
  if (keyIsDown(LEFT_ARROW)) cameraLocation.x -= 5;
  if (keyIsDown(RIGHT_ARROW)) cameraLocation.x += 5;
  if (keyIsDown(UP_ARROW)) cameraLocation.z -= 5;
  if (keyIsDown(DOWN_ARROW)) cameraLocation.z += 5;
}

#3

First of all : tahnk you so much for the time you took to answer my question !
I apreciate that very much

If I modify your code a little I get the right result when the camera moves left or right !

let cameraLocation;
let sketchLocation;


function setup() {
  createCanvas(windowWidth, windowHeight, WEBGL);
  cameraLocation = createVector(0, 0, (height/2.0) / tan(PI*30.0 / 180.0));
  sketchLocation = createVector(0, 0,0);
}

function draw() {
  background(51);
  updateCameraLocation();
  camera(cameraLocation.x, cameraLocation.y, cameraLocation.z, sketchLocation.x, sketchLocation.y, sketchLocation.z, 0, 1, 0);
  normalMaterial();
  torus(50, 15);
}

function updateCameraLocation() {
  if (keyIsDown(LEFT_ARROW)) sketchLocation.x -= 5;
  if (keyIsDown(RIGHT_ARROW)) sketchLocation.x += 5;
  if (keyIsDown(UP_ARROW)) cameraLocation.z -= 5;
  if (keyIsDown(DOWN_ARROW)) cameraLocation.z += 5;
}