Importing processing.webgl for 3d canvas when using processing.js in pure javascript

Question

I would like to utilize some of the 3D shapes in processing.js.

I see that if I was using the processing 'language' I could just

import processing.webgl.*

And the compiler would ignore the import statement.

However I am currently coding in pure javascript and it isn't clear to me how to do this.

Can any one help?

EDIT

To more accurate about my problem, my setup function looks something like this:

p.setup = function() {
    p.size(100, 100, P3D);
} 

And I receive P3D is undefined

Answer 1

The process of drawing 3D shapes in Processing v.s. Processing.js is almost identical. You don't need to import anything if you're only developing in Processing.js. Instead, just pass P3D, OPENGL or WEBGL when you call size:

void setup(){
  size(100, 100, P3D); // Can also be OPENGL or WEBGL
  translate(width/2, height/2);
  box(20);
}

EDIT

Here's a bit of HTML using Processing.js in pure JavaScript (I got the code from: http://js.processing.org/learning)

<script src="processing.js"></script>

<canvas id="cvs"></canvas>

<script>
function sketchProc(p) {
  // It makes more sense to use WEBGL if only developing in JavaScript
  p.size(100, 100, p.WEBGL);
  p.translate(p.width/2, p.height/2);
  p.box(20);
}

var canvas = document.getElementById("cvs");
var pjs = new Processing(canvas, sketchProc);
</script>

Answer 2

So all I needed to do was change my size() call so it looked like this:

p.size(100, 100, p.P3D);

I needed to access the P3D constant through the processing object p.P3D.