3D

3D (+ textures) example using EasyCam.

EasyCam controls

• rotate: left-click drag
• pan: middle-click / 2-finger drag
• zoom: right-click / spread drag
• reset: double-click

hello3d.js

let doTexture = false;

function preload() {
    img = loadImage('fur.jpg');
}

function setup() { 
  createCanvas(400, 400, WEBGL);
  createEasyCam();

  // suppress right-click context menu
  document.oncontextmenu = function() { return false; }
} 

function draw(){
    background(64);
    lights();
    texture(doTexture ? img : 0);
    box(200);
}

function keyPressed(){
    doTexture = !doTexture;
}

HTML

<script src="../p5/p5.min.js"></script>

<script src="../p5/p5.easycam.min.js"></script>

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