? 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; }