用纯粹的Javascript做出的3D立方旋转效果

最新推荐文章于 2024-07-03 12:41:46 发布

newsonglin

最新推荐文章于 2024-07-03 12:41:46 发布

阅读量867

点赞数

文章标签： javascript c

本文链接：https://blog.csdn.net/newsonglin/article/details/3110973

版权

用纯粹的Javascript做出的3D立方旋转效果:

http://maettig.com/code/javascript/3d_dots.html

震惊！

贴源码在此收藏：

 
 <html>
<head>
<title>Rotating 3D Cube in JavaScript</title>
<style type="text/css">
body{
    background:#000;
    color:#FF0;
    height:100%;
    margin:0;
    padding:0;
    width:100%;
}
b{
    position:absolute;
}
a{color:gold;}
a:hover{color:#FF0;}
address{
    font-family:Georgia;
    font-style:normal;
    bottom:10px;
    position:absolute;
    right:10px;
    text-align:right;
}
</style>
</head>
<body onmousemove="a = event.clientX / 99; b = event.clientY / 99;">
<script type="text/javascript">
var dimension = 1;
var a = 0, b = 0
var i = 27;
while (i--)
{
    document.write('<b id="l' + i + '">+</b>');
}
function f()
{
    i = 0;
    for (x =- dimension; x <= dimension; x += dimension)
    {
        for (y =- dimension; y <= dimension; y += dimension)
        {
            for (z =- dimension; z <= dimension; z += dimension)
            {
                u = x;
                v = y;
                w = z;
                uu2 = u * Math.cos(a) - v * Math.sin(a);
                v2 = u * Math.sin(a) + v * Math.cos(a);
                ww2 = w;
                u = u2; v = v2; w = w2;
                uu2 = u;
                vv2 = v * Math.cos(b) - w * Math.sin(b);
                w2 = v * Math.sin(b) + w * Math.cos(b);
                u = u2; v = v2; w = w2;
                var c = Math.round((w + 2) * 70);
                if (c < 0) c = 0;
                if (c > 255) c = 255;
                with (document.all('l' + i).style)
                {
                    left = 300 + u * (w + 2) * 50;
                    top  = 300 + v * (w + 2) * 50;
                    color = 'rgb(' + c + ', ' + c + ', 0)';
                    fontSize = (w + 2) * 16 + "px";
                }
                i++;
            }
        }
    }
}
setInterval('f()', 9);
</script>
Hello World
</body>
</html>
 