
? Browser Support ?
HTML
>
Canvas
>
Processing
>3D-texture
OpenGL med Processing.js
_texture.pde
import processing.opengl.*;
/* @pjs preload="data/1.jpg,data/2.jpg,data/3.jpg,data/4.jpg,data/5.jpg,data/6.jpg" */
// rotating stuff
float v1=0.0f;
float v2=0.0f;
// box and textures
TBox theBox=null;
PImage[] images=null;
class TBox{
int v=0;
public TBox(){}
public void drawMe(PImage[] im){
//draws the sides of a unit cube (0,0,0)-(1,1,1)
// and map an image on each
textureMode(NORMALIZED);
beginShape();/* f1: front */
normal(-1,0,0);
texture(im[0]);
vertex(0.0f,0.0f,0.0f, 0,0);
vertex(0.0f,0.0f,1.0f, 1,0);
vertex(1.0f,0.0f,1.0f, 1,1);
vertex(1.0f,0.0f,0.0f, 0,1);
endShape();
beginShape();/* f2: bottom */
normal(0,0,-1);
texture(im[1]);
vertex(0.0f,0.0f,0.0f, 0,0);
vertex(1.0f,0.0f,0.0f, 0,1);
vertex(1.0f,1.0f,0.0f, 1,1);
vertex(0.0f,1.0f,0.0f, 1,0);
endShape();
beginShape();/* f3:back */
normal(1,0,0);
texture(im[2]);
vertex(1.0f,1.0f,0.0f, 0,0);
vertex(1.0f,1.0f,1.0f, 0,1);
vertex(0.0f,1.0f,1.0f, 1,1);
vertex(0.0f,1.0f,0.0f, 1,0);
endShape();
beginShape();/* f4: top */
normal(0,0,1);
texture(im[3]);
vertex(1.0f,1.0f,1.0f, 0,0);
vertex(1.0f,0.0f,1.0f, 1,0);
vertex(0.0f,0.0f,1.0f, 1,1);
vertex(0.0f,1.0f,1.0f, 0,1);
endShape();
beginShape();/* f5: left */
normal(0,1,0);
texture(im[4]);
vertex(0.0f,0.0f,0.0f, 0,0);
vertex(0.0f,1.0f,0.0f, 1,0);
vertex(0.0f,1.0f,1.0f, 1,1);
vertex(0.0f,0.0f,1.0f, 0,1);
endShape();
beginShape();/* f6: right */
normal(0,-1,0);
texture(im[5]);
vertex(1.0f,0.0f,0.0f, 0,0);
vertex(1.0f,0.0f,1.0f, 1,0);
vertex(1.0f,1.0f,1.0f, 1,1);
vertex(1.0f,1.0f,0.0f, 0,1);
endShape();
}
}
void setup() {
size(350, 350,OPENGL);
images=new PImage[]{loadImage("data/1.jpg"),loadImage("data/2.jpg"),
loadImage("data/3.jpg"),loadImage("data/4.jpg"),
loadImage("data/5.jpg"),loadImage("data/6.jpg")};
theBox=new TBox();
}
void LightAndMaterial(){
directionalLight(255, 255, 255, .5, 0, -1);
lightSpecular(255, 255, 255);
specular(255, 255, 255);
ambientLight(255, 255, 255);
ambient(255, 255, 255);
}
void draw() {
LightAndMaterial();
noFill();
background(255, 255, 255);
translate(150,150,0);
rotateX(v2);
rotateY(v1);
translate(-50,-50);
tint(255, 255, 255, 255);
scale(100);
theBox.drawMe(images);
v1+=PI/400;
v2+=PI/300;
}