3d boxes: start

//For other primitives, see https://p5js.org/examples/3d-geometries.html

​

let myCamera;

​

function setup() {

  createCanvas(800, 800, WEBGL);

​

  //optional

  stroke("#43658b");

  debugMode(500, 10); // Add a grid and an axes guide.  RGB indicate XYZ, respectively (so Red is X axis. Direction of the stick outward indicates +ve on that axis.)

​

  //optional

  //Set up a non-default camera position and facing.  You *can* delete these and accept the defaults

  myCamera = createCamera();

  myCamera.setPosition(100, -200, 400);

  myCamera.lookAt(0, 0, 0);

}

​

function draw() {

  background(200);

​

  //allow mouse to be used to "orbit" the camera around the origin.

  //Delete this if you have another plan for controlling the camera.

  orbitControl(5, 5);

​

  //Add some lights (every frame!) ------------------------------------------------

  //Add directional light to surfaces which face it

  //Params: (color, directionVector)

  directionalLight(color(150, 100, 0), createVector(-0.8, -0.5, -0.2));

​

  //Add a little light evenly to ALL surfaces.  Not too much or we'll see no shadow

  ambientLight(180, 150, 150);

​

​

  //Draw some example shapes! -----------------------------------------------------

  noStroke();

​

  //no translation - draw this one at the origin

  ambientMaterial(color("#ed6663")); //Material for the next shape(s) to be drawn

  sphere(30);

​

  push(); //(push(): remember current origin, etc)

​

  translate(0, 0, 150); //Move the origin +150 world units along the z-axis (blue)

  fill("#ffa372");

  //Draw a box with width, height, depth, at the current *translated* origin

  box(300, 50, 30);

  pop(); //forget about the translation

​

  //Move to another location to draw another box.  

  //But remember the current origin and restore it, afterwards.

  push();

  translate(100, 0, -100);

  ambientMaterial(color("#4e89ae"));//different materials with different reflectivities are available

  box(100, 400, 10);

  pop();

​

​

}