let sceneScale;
let sceneTranslation;
let env

let img;
let teaport;

function preload() {
  img = loadImage("https://p5js.org/assets/outdoor_spheremap.jpg");
  teapot = loadModel("https://p5js.org/assets/teapot.obj");
}

function setup() {
  sceneScale = createVector(100, -100, 100);
  sceneTranslation = createVector(0, -1.5, 0);

  createCanvas(640, 360, WEBGL);
  noStroke(); // Disables the wireframe.
  
  const cnv = createGraphics(400, 200)
  cnv.background(0)
  cnv.noStroke()
  cnv.fill(255)
  cnv.rect(0, 0, 200, 200)
  env = cnv.get()
  cnv.remove()
}

function draw() {
  // Set the background colour.
  // background('white');

  // Set the background panorama.
  panorama(env);

  // Transform the scene.
  scale(sceneScale);
  translate(sceneTranslation);

  // Enable orbiting with the mouse.
  orbitControl();

  // Create an ambient light.
  // ambientLight(50);

  // Create a directional light.
  let c = color("white");
  let lightDir = createVector(0, 1, 0);
  directionalLight(c, lightDir);

  // Create an image light.
  imageLight(env);

  // Add a specular material.
  specularMaterial(255);
  shininess(100);
  metalness(300);
  fill(150)

  // Draw the model.
  model(teapot);
}