Jeferson-x
-
Total de itens
3 -
Registro em
-
Última visita
Posts postados por Jeferson-x
-
-
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;
}
-
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?
cubo 3d javascript e elemento canvas
em Ajax, JavaScript, XML, DOM
Postado
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>