Coders Blog: DEVTIPS #13 JavaScript 3D Text

Klistra in detta i en html fil och kör. Skapar ett textblock som roterar i 3D. Fredagsskoj...

<html>

<head>

<title>Untitled Page</title>

var aDivs = new Array();

//Coordinates and letters

var aPos = new Array();

var angleX = 0, angleY = 0, angleZ = 0;

var fl = 150, iv = 10;

var str = "I AM BORED BEYOND BELIEF! I WANT SOME CAKE! IS THIS A STUPID TEXT OR WHAT? OK TIME FOR ME TO SIGN OFF.. ";

function onload() {

var i, x, y;

var index = 0;

for (y = 50; y >= -50; y -= 10) {

for (x = -50; x <= 50; x += 10) {

var ch = str.substr(index, 1);

aPos[index] = new Array();

aPos[index] = [x, y, 0, ch];

index++;

}

for (i = 0; i <>

createElement(aPos[i][3], aPos[i][0], aPos[i][1]);

}

setInterval(update, iv);

}

function update() {

var i;

var oDiv;

var x, y, z

var x1, y1, z1

var xt1, yt1, zt1;

var xc = 250, yc = 150;

var add = 0;

for (i = 0; i <>

oDiv = aDivs[i];

x = aPos[i][0]; y = aPos[i][1], z = aPos[i][2];

x += Math.sin(angleX + add) * 50;

y += Math.cos(angleY + add) * 20;

add += 0.001;

//Rotation about the z axis:

xt1 = (Math.cos(angleZ) * x) - (Math.sin(angleZ) * y);

yt1 = (Math.sin(angleZ) * x) + (Math.cos(angleZ) * y);

//Rotation about the y axis:

x1 = (Math.cos(angleY) * xt1) + (Math.sin(angleY) * z);

zt1 = -(Math.sin(angleY) * xt1) + (Math.cos(angleY) * z);

//Rotatation about the x axis:

y1 = (Math.cos(angleX) * yt1) - (Math.sin(angleX) * zt1);

z1 = (Math.sin(angleX) * yt1) + (Math.cos(angleX) * zt1);

//Color z-distance

colorElement(oDiv, "#ffffff");

if (z1 > -50) colorElement(oDiv, "#ddddff");

if (z1 > -40) colorElement(oDiv, "#ccccff");

if (z1 > -30) colorElement(oDiv, "#bbbbee");

if (z1 > -20) colorElement(oDiv, "#aaaadd");

if (z1 > -10) colorElement(oDiv, "#9999cc");

if (z1 > 0) colorElement(oDiv, "#8888bb");

if (z1 > 10) colorElement(oDiv, "#7777aa");

if (z1 > 20) colorElement(oDiv, "#666688");

if (z1 > 30) colorElement(oDiv, "#555577");

if (z1 > 40) colorElement(oDiv, "#444466");

if (z1 > 50) colorElement(oDiv, "#333355");

//focal length

scale = fl / (fl + z1);

x1 = x1 * scale + xc;

y1 = y1 * scale + yc;

positionElement(oDiv, x1 * 1.5, y1 * 1.5);

}

angleX += 0.082; angleY += 0.14; angleZ += 0.05;

}

function colorElement(oDiv, color) {

oDiv.style.color = color;

}

function createElement(str, x, y) {

oDiv = document.createElement("DIV");

oDiv.innerText = str;

oDiv.style.position = "absolute";

oDiv.style.pixelLeft = x;

oDiv.style.pixelTop = y;

document.body.insertBefore(oDiv);

aDivs.push(oDiv);

update();

}

function positionElement(oDiv, x, y) {

oDiv.style.pixelLeft = x;

oDiv.style.pixelTop = y;

}

</script>

</head>

<body onload="onload();" style="background-color: #222244; font-family: verdana;

font-weight: bold;">

</body>

</html>

Coders Blog

fredag 3 april 2009

DEVTIPS #13 JavaScript 3D Text

Inga kommentarer: