cubo 3d javascript e elemento canvas

Jeferson-x · Fevereiro 9, 2013

Ola pessoal, gostaria que me ajudassem a descobrir como colocar imagens ao invés de cores na face de um cubo feito em javascript, utilizando o elemento canvas.

segue abaixo codigo

<!DOCTYPE html>

<title>fascinating - CANVAS 3D CUBES experiment</title>

<style>

html {

overflow: hidden;

-ms-touch-action: none;

-ms-content-zooming: none;

}

body {

position: absolute;

margin: 0;

padding: 0;

background: #000;

width: 100%;

height: 100%;

}

#canvas {

position: absolute;

width: 100%;

height: 100%;

background: #000;

cursor:default;

-webkit-user-select:none;

-moz-user-select:none;

-ms-user-select: none;

}

#info {

position: absolute;

text-align: left;

bottom: 0px;

right: 0px;

width: 60px;

height: 120px;

margin-top:-60px;

color: #666;

font-size: 11px;

font-family: Segoe UI, Verdana, Arial, Sans-Serif;

-webkit-user-select:none;

-moz-user-select:none;

-ms-user-select: none;

padding:0;

}

#info .background {

position: absolute;

width: 100%;

height: 100%;

background: #000;

opacity: 0.3;

}

#info .content {

position: absolute;

padding: 3px;

width: 100%;

height: 100%;

}

#info .w {

color: #fff;

}

#info hr {

width: 90%;

border: none;

background-color: #666;

height: 1px;

}

#info h1 {

color: #fff;

text-align: center;

}

#info input[type=button] {

font-size:11px;

background:#666;

color:#FFF;

border:none;

}

.search {

background:#0065CB !important;

}

</style>

/*

* ======================================================

* CANVAS 3D experiment - 3D cubes HTML5 engine

* http://www.dhteumeuleu.com/fascinating

* Author Gerard Ferrandez - 2 Jan 2012

* ---------------------------------------------------

* Released under the MIT license

* http://www.dhteumeuleu.com/LICENSE.html

* Last updated: 29 Nov 2012

* ======================================================

*/

"use strict";

(function () {

// ======== private vars ========

var scr, ctx, pointer, cubes, faces, cz = 0;

var white, alpha, ncube, faceOver, lastOver;

var cosY, sinY, cosX, sinX, cosZ, sinZ, minZ, angleY = 0, angleX = 0, angleZ = 0;

var bkgColor1 = "rgba(0,0,0,0.1)";

var bkgColor2 = "rgba(32,32,32,1)";

var autorotate = false, destroy = false;

// ---- fov ----

var fl = 250;

var zoom = 0;

// ======== vertex constructor ========

var Point = function (parent, xyz, project) {

this.project = project;

this.xo = xyz[0];

this.yo = xyz[1];

this.zo = xyz[2];

this.cube = parent;

};

Point.prototype.projection = function () {

// ---- 3D rotation ----

var u = sinZ * this.yo + cosZ * this.xo;

var t = cosZ * this.yo - sinZ * this.xo;

var s = cosY * this.zo + sinY * u;

this.x = cosY * u - sinY * this.zo;

this.y = sinX * s + cosX * t;

this.z = cosX * s - sinX * t;

if (this.project) {

// ---- point visible ----

if (this.z < minZ) minZ = this.z;

this.visible = (zoom + this.z > 0);

// ---- 3D to 2D projection ----

this.X = (scr.width * 0.5) + this.x * (fl / (this.z + zoom));

this.Y = (scr.height * 0.5) + this.y * (fl / (this.z + zoom));

}

};

// ======= polygon constructor ========

var Face = function (cube, index, normalVector) {

// ---- parent cube ----

this.cube = cube;

// ---- coordinates ----

this.p0 = cube.points[index[0]];

this.p1 = cube.points[index[1]];

this.p2 = cube.points[index[2]];

this.p3 = cube.points[index[3]];

// ---- normal vector ----

this.normal = new Point(this, normalVector, false)

};

Face.prototype.faceVisible = function () {

// ---- points visible ----

if (this.p0.visible && this.p1.visible && this.p2.visible && this.p3.visible) {

// ---- back face culling ----

if (

(this.p1.Y - this.p0.Y) / (this.p1.X - this.p0.X) < (this.p2.Y - this.p0.Y) / (this.p2.X - this.p0.X)

^ this.p0.X < this.p1.X == this.p0.X > this.p2.X

) {

// ---- face visible ----

this.visible = true;

return true;

}

// ---- face hidden ----

this.visible = false;

this.distance = -99999;

return false;

};

Face.prototype.distanceToCamera = function () {

// ---- distance to camera ----

var dx = (this.p0.x + this.p1.x + this.p2.x + this.p3.x ) * 0.25;

var dy = (this.p0.y + this.p1.y + this.p2.y + this.p3.y ) * 0.25;

var dz = (zoom + fl) + (this.p0.z + this.p1.z + this.p2.z + this.p3.z ) * 0.25;

this.distance = Math.sqrt(dx * dx + dy * dy + dz * dz);

};

Face.prototype.draw = function () {

// ---- shape face ----

ctx.beginPath();

ctx.moveTo(this.p0.X, this.p0.Y);

ctx.lineTo(this.p1.X, this.p1.Y);

ctx.lineTo(this.p2.X, this.p2.Y);

ctx.lineTo(this.p3.X, this.p3.Y);

ctx.closePath();

// ---- detection pointer inside ----

if (ctx.isPointInPath(pointer.X, pointer.Y)) lastOver = this;

// ---- light ----

if (this === faceOver) {

var r = 256;

var g = 0;

var b = 0;

} else {

// ---- flat (lambert) shading ----

this.normal.projection();

var light = (

white ?

this.normal.y + this.normal.z * 0.5 :

this.normal.z

) * 256;

var r = g = b = light;

}

// ---- fill ----

ctx.fillStyle = "rgba(" +

Math.round® + "," +

Math.round(g) + "," +

Math.round(B) + "," + this.cube.alpha + ")";

ctx.fill();

};

// ======== Cube constructor ========

var Cube = function(parent, nx, ny, nz, x, y, z, w) {

if (parent) {

// ---- translate parent points ----

this.w = parent.w;

this.points = [];

var i = 0, p;

while (p = parent.points[i++]) {

this.points.push(

new Point(

parent,

[p.xo + nx, p.yo + ny, p.zo + nz],

true

)

);

}

} else {

// ---- create points ----

this.w = w;

this.points = [];

var p = [

[x-w, y-w, z-w],

[x+w, y-w, z-w],

[x+w, y+w, z-w],

[x-w, y+w, z-w],

[x-w, y-w, z+w],

[x+w, y-w, z+w],

[x+w, y+w, z+w],

[x-w, y+w, z+w]

];

for (var i in p) this.points.push(

new Point(this, p, true)

);

}

// ---- faces coordinates ----

var f = [

[0,1,2,3],

[0,4,5,1],

[3,2,6,7],

[0,3,7,4],

[1,5,6,2],

[5,4,7,6]

];

// ---- faces normals ----

var nv = [

[0,0,1],

[0,1,0],

[0,-1,0],

[1,0,0],

[-1,0,0],

[0,0,-1]

];

// ---- cube transparency ----

this.alpha = alpha ? 0.5 : 1;

// ---- push faces ----

for (var i in f) {

faces.push(

new Face(this, f, nv)

);

}

ncube++;

};

var reset = function () {

// ---- create first cube ----

cubes = [];

faces = [];

ncube = 0;

cubes.push(

new Cube(false,0,0,0,0,0,0,50)

);

};

var click = function () {

// ---- click cube ----

if (faceOver) {

if (destroy) {

if (ncube > 1) {

var c = faceOver.cube;

faceOver.clicked = false;

// ---- destroy faces ----

var i = 0, f;

while ( f = faces[i++] ) {

if (f.cube == c) {

faces.splice(--i, 1);

}

// ---- destroy cube ----

var i = 0, o;

while ( o = cubes[i++] ) {

if (o == c) {

cubes.splice(--i, 1);

ncube--;

break;

}

} else {

if (!faceOver.clicked) {

// ---- create new cube ----

faceOver.clicked = true;

var w = -2.25 * faceOver.cube.w;

cubes.push(

new Cube(

faceOver.cube,

w * faceOver.normal.xo,

w * faceOver.normal.yo,

w * faceOver.normal.zo

)

);

}

};

var init = function () {

// ---- init script ----

scr = new ge1doot.Screen({

container: "canvas"

});

ctx = scr.ctx;

pointer = new ge1doot.Pointer({

tap: click

});

pointer.Xi = 50;

pointer.Yi = 50;

// ---- Z axis rotation (mouse wheel) ----

scr.elem.addEventListener('DOMMouseScroll', function(e) {

cz += e.detail * 12;

return false;

}, false);

scr.elem.onmousewheel = function () {

cz += event.wheelDelta / 5;

return false;

}

// ---- multi-touch gestures ----

document.addEventListener('gesturechange', function(e) {

e.preventDefault();

// ---- Z axis rotation ----

cz = event.rotation;

}, false);

// ---- some options ----

document.getElementById("white").onchange = function () {

white = this.checked;

if (white) {

bkgColor1 = "rgba(256,256,256,0.1)";

bkgColor2 = "rgba(192,192,192,1)";

} else {

bkgColor1 = "rgba(0,0,0,0.1)";

bkgColor2 = "rgba(32,32,32,1)";

}

document.getElementById("alpha").onchange = function () {

alpha = this.checked;

}

document.getElementById("autor").onchange = function () {

autorotate = this.checked;

}

document.getElementById("destroy").onchange = function () {

destroy = this.checked;

}

document.getElementById("reset").onclick = function () {

reset();

}

// ---- engine start ----

reset();

run();

}

// ======== main loop ========

var run = function () {

// ---- screen background ----

ctx.fillStyle = bkgColor1;

ctx.fillRect(0, Math.floor(scr.height * 0.15), scr.width, Math.ceil(scr.height * 0.7));

ctx.fillStyle = bkgColor2;

ctx.fillRect(0, 0, scr.width, Math.ceil(scr.height * 0.15));

ctx.fillStyle = bkgColor2;

ctx.fillRect(0, Math.floor(scr.height * 0.85), scr.width, Math.ceil(scr.height * 0.15));

// ---- easing rotations ----

angleX += ((pointer.Yi - angleX) * 0.05);

angleY += ((pointer.Xi - angleY) * 0.05);

angleZ += ((cz - angleZ) * 0.05);

if (autorotate) cz += 1;

// ---- pre-calculating trigo ----

cosY = Math.cos(angleY * 0.01);

sinY = Math.sin(angleY * 0.01);

cosX = Math.cos(angleX * 0.01);

sinX = Math.sin(angleX * 0.01);

cosZ = Math.cos(angleZ * 0.01);

sinZ = Math.sin(angleZ * 0.01);

// ---- points projection ----

minZ = 0;

var i = 0, c;

while ( c = cubes[i++] ) {

var j = 0, p;

while ( p = c.points[j++] ) {

p.projection();

}

// ---- adapt zoom ----

var d = -minZ + 100 - zoom;

zoom += (d * ((d > 0) ? 0.05 : 0.01));

// ---- faces light ----

var j = 0, f;

while ( f = faces[j++] ) {

if ( f.faceVisible() ) {

f.distanceToCamera();

}

// ---- faces depth sorting ----

faces.sort(function (p0, p1) {

return p1.distance - p0.distance;

});

// ---- painting faces ----

lastOver = false;

j = 0;

while ( f = faces[j++] ) {

if (f.visible) {

f.draw();

} else break;

}

if (lastOver) faceOver = lastOver;

// ---- animation loop ----

requestAnimFrame(run);

}

return {

// ---- onload event ----

load : function () {

window.addEventListener('load', function () {

init();

}, false);

}

})().load();

</script>

<script src=fascinating%20-%20CANVAS%203D%20CUBES%20experiment_arquivos/ga.js" async></script></head>

<body>

<canvas height="638" width="1366" id="canvas">HTML5 CANVAS IS REQUIRED</canvas>

<div id="info">

<div class="background"></div>

<div class="content">

<input id="white" type="checkbox"><label for="white"> WB</label><br>

<input id="alpha" type="checkbox"><label for="alpha"> TR</label><br>

<input id="autor" type="checkbox"><label for="autor"> AR</label><br>

<input id="destroy" type="checkbox"><label for="destroy"> DC</label><br><br>

<input value="RESET" id="reset" type="button">

</div>

<div id="nav">

<input name="nav-switch" id="nav-switch" type="checkbox">

<label class="label" for="nav-switch">

<div class="container">

<div class="nav-on">

<ul class="menu">

<li class="home"><a href="http://www.dhteumeuleu.com/index">Home</a></li>

<li class="list"><a href="http://www.dhteumeuleu.com/fascinating/source">Source</a></li>

<li class="arrow back"><a href="http://www.dhteumeuleu.com/never-force">Prev</a></li>

<li class="arrow"><a href="http://www.dhteumeuleu.com/you-see">Next</a></li> </ul>

</div>

<div class="nav-off">

<div id="icon"><div></div><div></div></div>

<h1 class="title">fascinating</h1>

</div>

</label>

</div>

<script>

if (window.location.hostname.indexOf("dhteumeuleu") != -1) {

var _gaq = [["_setAccount", "UA-12394130-1], ["_trackPageview"]];

(function() {

var ga = document.createElement("script"); ga.async = true;

ga.src = "http://www.google-analytics.com/ga.js";

(document.getElementsByTagName("head")[0]).appendChild(ga);

})();

}

</script>

</body></html>

Entrar

cubo 3d javascript e elemento canvas

Pergunta

Jeferson-x

Link para o comentário

Compartilhar em outros sites

0 respostass a esta questão

Posts Recomendados

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades