bewegende camera

Verander met de re muisknop Xpos en Ypos van de camera. (regel 20)

Verander met de middelste muisknop Xpos en Ypos samen met Xdir en Ydir, omdat upX en upY = 1 is de kamera hier ook 45 graden gedraaid. (regel 23)

camera bewegingen. terug naar de inleiding

argumenten van de camera: camera(Xpos, Ypos, Zpos, Xdir, Ydir, Zdir, upX, upY, upZ); , pos = positie, dir = richting

upX, upY, upZ is een 3d vector, met (0,0,0) is de camera nergens op gericht er is dus geen beeld te zien.

De schets maakt als achtergrond gebruik van het object ruitjespap van de class "WEBGLRuitjes"

 

let x; let y; let z; let n; let gradhoek = 1; gradhoek2 = 1;
function setup() {
  createCanvas(windowWidth, windowHeight,WEBGL);
  n = height/15;
  x = 0; y = 0; z = 0;
  ruitjespap = new WEBGLRuitjes(n, x, y);
}
 
function draw() {
  background('#E6FBFF');
  ruitjespap.display();
  camera(x, y, z+13*n, x, y, z, 0, 1, 0);
 
  let camx = map(mouseX, 0, width,  -5*n, 5*n);
  let camy = map(mouseY, 0, height, -5*n, 5*n);
 
  if (mouseIsPressed) {
    if (mouseButton === LEFT) {
      camera(camx, camy, z+13*n, x, y, z, 0, 1, 0);
    }
    if (mouseButton === CENTER) {
      camera(camx, camy, z+13*n, camx, camy, z, 1, 1, 0);
    }
}
  fill(150,150,10,100);
  push();
  rotateX(radians(gradhoek));
  gradhoek -= 1;
  if (gradhoek < -360) gradhoek = 1;
  translate(x-5*n, y, z+2*n);
  box(2*n);
  pop();
 
  fill(250,100,10,100);
  push();
  rotateX(radians(gradhoek2));
  gradhoek2 += 1;
  if (gradhoek2 > 360) gradhoek2 = 1;
  translate(x+5*n, y, z);
  box(4*n);
  pop();
 
  push();
  rotateX(radians(45));
  rotateY(radians(45));
  box(2*n);
  pop();
}

near clipping plane en far clipping plane is het gebied (het frustum) waarin het camerabeeld zichtbaar is.

let x; let y; let z; let n; let gradhoek = 1; gradhoek2 = 1; function setup() { createCanvas(windowWidth, windowHeight,WEBGL); n = height/15; x = 0; y = 0; z = 0; ruitjespap = new WEBGLRuitjes(n, x, y); } function draw() { background('#E6FBFF'); ruitjespap.display(); perspective(PI/3.0, width/height, 6.5*n, 19*n); let camz = map(mouseX, -width/2, width/2, 0, 13*n); // met de muis in het (0,0) punt is camz = 13*n, met mouseX varrieert camz tussen de 6.5*n en 19.5*n // als het far clipping plane kleiner is dan 19.5 verdwijnt de vorm (deels) achter het far clipping plane // als het near clipping plane groter is dan 6.5 verdwijnt de vorm (deels) achter het near clipping plane camera(x, y, camz, x, y, z, 0, 1, 0); fill(150,150,10,100); box(4*n,2*n, 2*n); //box 4 vakjes in x richting en 2 vakjes in y en z richting }

Flevopink