let zConst = 0.5773502691896257; //tan(PI/6)

let cameraZ = 500;

function preload() {

  image = loadImage("earth.png");

}

​

function setup() {

  //createCanvas(displayWidth, displayHeight, WEBGL);

  createCanvas(600, 400, WEBGL);

  angleMode(DEGREES);

  cameraZ = height / 2 / zConst;

}

​

function draw() {

  //camera(xloc, yloc, zloc, xdir, ydir, zdir, xup, yup, zup);

​

  let clip = map(mouseX, 0, width, 0.1, 10);

​

  let camX = map(mouseX, 0, width, -500, 500);

  let camY = map(mouseY, 0, height, -500, 500);

  let camX2 = random(-2, 2);

  let camY2 = random(-2, 2);

  perspective(60, width / height, cameraZ / 10, cameraZ * clip);

  camera(camX2, camY2, cameraZ, camX, camY, -1000, 0, 1, 0);

  //cameraZ -= 0.5;

  background(0);

  ambientLight(127);

  directionalLight(127, 127, 127, 0, 0, -50);

  // cube

  push();

  translate(-100, -100, 0);

  rotateX(frameCount * 0.5);

  rotateY(frameCount * 0.5);

  // texture(image);

  specularMaterial(0, 255, 0);

  box(100, 100, 100);

  pop();

  // spinning globe

  push();

  noStroke();

  translate(100, 0, 0);

  rotateY(frameCount * 0.5);

  texture(image);

  sphere(50);

  pop();

  // grey floor

  push();

  noStroke();

  ambientMaterial(127);

  translate(0, 100, 0);

  rotateX(90);

  plane(500, 500);

  pop();

}

​