p5.js 3D Example 1
Just spinning some textures around with p5.js
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.16/p5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.16/addons/p5.dom.js"></script>
<h1>
3D with WebGL
</h1>
<div id="my-image">
<p>I want my graphics here:</p>
</div>
JavaScript
var grahics;
var creeperImg;
function preload(){
creeperImg = loadImage("http://i.imgur.com/jiItp64.png");
}
function setup(){
createCanvas(400, 400, WEBGL);
graphics = createGraphics(200, 200)
graphics.fill(20);
graphics.ellipse(20, 20, 20, 20)
var hleft = select('#my-image');
createImg(graphics).parent(hleft);
}
function draw(){
background(0);
//image(graphics, 0, 0) // image is not a function error
push();
rotateZ(frameCount * 0.02);
rotateX(frameCount * 0.02);
box(100, 100, 100);
pop();
}