Ir para conteúdo
Fórum Script Brasil

Jeferson-x

Membros
  • Total de itens

    3
  • Registro em

  • Última visita

Sobre Jeferson-x

Jeferson-x's Achievements

0

Reputação

  1. 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> <html><head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta name="Author" content="Gerard Ferrandez at http://www.dhteumeuleu.com/"> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="HandheldFriendly" content="true"> <meta name="description" content="CANVAS 3D CUBES experiment"> <meta name="keywords" content="canvas,3D,cubes"> <link rel="canonical" href="http://www.dhteumeuleu.com/fascinating"> <link rel="stylesheet" href="fascinating%20-%20CANVAS%203D%20CUBES%20experiment_arquivos/slider.css"> <link rel="shortcut icon" href="http://www.dhteumeuleu.com/favicon.ico"> <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> <script src="fascinating%20-%20CANVAS%203D%20CUBES%20experiment_arquivos/ge1doot.js"></script> <script> /* * ====================================================== * 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> <!-- dhteumeuleu nav menu --> <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> </div> </label> </div> <!-- end of dhteumeuleu nav menu --> <!-- google analytics --> <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>
  2. Ola pessoal, sou iniciante e estava "brincando" com um codigo de um cubo 3d em css... consigo alterar a rotação, mudar as cores, colocar imagens nas faces do cubo e etc mas alguém sabe como fazer para controlar o cubo com o mouse? tipo girar o cubo atraves do movimento do mouse e para-lo assim que for conveniente? Segue abaixo o codigo.... Obrigado a todos. body { margin-top: 125px; } @-moz-keyframes spinningH { from { -moz-transform: rotateX(0deg) rotateY(0deg); } to{ -moz-transform: rotateX(360deg) rotateY(720deg); } } @-webkit-keyframes spinningH { from { -webkit-transform: rotateX(0deg) rotateY(0deg); } to{ -webkit-transform: rotateX(360deg) rotateY(720deg); } } @-o-keyframes spinningH { from { -o-transform: rotateX(0deg) rotateY(0deg); } to{ -o-transform: rotateX(360deg) rotateY(720deg); } } @-ms-keyframes spinningH { from { -ms-transform: rotateX(0deg) rotateY(0deg); } to{ -ms-transform: rotateX(360deg) rotateY(720deg); } } @keyframes spinningH { from { transform: rotateX(0deg) rotateY(0deg); } to{ transform: rotateX(360deg) rotateY(720deg); } } #container { -webkit-perspective : 1000px; -moz-perspective : 1000px; -o-perspective : 1000px; -ms-perspective : 1000px; perspective : 1000px; -webkit-perspective-origin : 50% 50%; -moz-perspective-origin : 50% 50%; -moz-transform-origin : 50% 50%; -o-perspective-origin : 50% 50%; -ms-perspective-origin : 50% 50%; perspective-origin : 50% 50%; } .animate { -webkit-animation : spinningH 6s infinite linear; -moz-animation : spinningH 6s infinite linear; -o-animation : spinningH 6s infinite linear; -ms-animation : spinningH 6s infinite linear; animation : spinningH 6s infinite linear; } #cube { position: relative; margin: 0 auto; height: 400px; width: 400px; -webkit-transition : -webkit-transform 2s linear; -moz-transition : -moz-transform 2s linear; -o-transition : -o-transform 2s linear; -ms-transition : -ms-transform 2s linear; transition : transform 2s linear; -webkit-transform-style : preserve-3d; -moz-transform-style : preserve-3d; -o-transform-style : preserve-3d; -ms-transform-style : preserve-3d; transform-style : preserve-3d; } #cube>div { position: absolute; height: 360px; width: 360px; padding: 20px; opacity: 2.9; background-position:center center; } #cube div:nth-child(1) { -webkit-transform : translateZ(200px); -moz-transform : translateZ(200px); -o-transform : translateZ(200px); -ms-transform : translateZ(200px); transform : translateZ(200px); background-color:#000; background-image:url(f1.png); background-repeat : no-repeat; } #cube div:nth-child(2) { -webkit-transform : rotateY(90deg) translateZ(200px); -moz-transform : rotateY(90deg) translateZ(200px); -o-transform : rotateY(90deg) translateZ(200px); -ms-transform : rotateY(90deg) translateZ(200px); transform : rotateY(90deg) translateZ(200px); background-color:#000; background-image:url(f2.png); background-repeat : no-repeat; } #cube div:nth-child(3) { -webkit-transform : rotateY(180deg) translateZ(200px); -moz-transform : rotateY(180deg) translateZ(200px); -o-transform : rotateY(180deg) translateZ(200px); -ms-transform : rotateY(180deg) translateZ(200px); transform : rotateY(180deg) translateZ(200px); background-color :#000; background-image:url(f3.png); background-repeat : no-repeat; } #cube div:nth-child(4) { -webkit-transform : rotateY(-90deg) translateZ(200px); -moz-transform : rotateY(-90deg) translateZ(200px); -o-transform : rotateY(-90deg) translateZ(200px); -ms-transform : rotateY(-90deg) translateZ(200px); transform : rotateY(-90deg) translateZ(200px); background-color :#000; background-image:url(f4.png); background-repeat : no-repeat; } #cube div:nth-child(5) { -webkit-transform : rotateX(-90deg) translateZ(200px) rotate(180deg); -moz-transform : rotateX(-90deg) translateZ(200px) rotate(180deg); -o-transform : rotateX(-90deg) translateZ(200px) rotate(180deg); -ms-transform : rotateX(-90deg) translateZ(200px) rotate(180deg); transform : rotateX(-90deg) translateZ(200px) rotate(180deg); background-color :#000; background-image:url(f5.png); background-repeat :no-repeat; } #cube div:nth-child(6) { -webkit-transform : rotateX(90deg) translateZ(200px); -moz-transform : rotateX(90deg) translateZ(200px); -o-transform : rotateX(90deg) translateZ(200px); -ms-transform : rotateX(90deg) translateZ(200px); transform : rotateX(90deg) translateZ(200px); background-color :#000; background-image:url(f6.png); background-repeat :no-repeat; text-align:center; }
  3. Ola pessoal, sou novo aqui e gostaria da ajuda de voces, tenho estudado html e css e estou "brincando" com alguns codigos que achei na internet. Achei muito interessante esse cubo mas como fazer para poder gira-lo?
×
×
  • Criar Novo...