Creating 3D sketches for the Web

In this recipe, we'll take a look at the third dimension. Processing.js can be used to display 3D content, so everything that you've learned in Chapter 3, Drawing in 3D–Lights, Camera, and Action, can be used on the web.

How to do it...

This is the full code for our 3D sketch. You need to import the OpenGL library and add the OPENGL parameter to the size() function. This sketch will render a yellow box in the middle of the screen. You can manipulate the rotation in the direction of the Y axis by moving your mouse.

import processing.opengl.*;

void setup()
{
  size( 640, 480, OPENGL );
  smooth();
  
  noStroke();
}
  
void draw()
{
  background( 255 );

  lights();

  translate( width/2, height/2 );

  rotateX( radians( frameCount ) );
  rotateY( map( mouseX, 0, width, -PI, PI ) );
  
  fill( 255, 225, 23 );
  box( 200 );
}

The sketch looks like the following screenshot when it runs in your browser:

How it works...

The 3D engine that renders your Processing sketch...