3D 旋转立方体

最新推荐文章于 2024-07-25 09:24:40 发布

iLove9ouHenry

最新推荐文章于 2024-07-25 09:24:40 发布

阅读量719

点赞数

分类专栏：数据结构与算法人工智能设计模式 3D 文章标签： function javascript c xhtml safari null

数据结构与算法同时被 3 个专栏收录

9 篇文章 0 订阅

订阅专栏

3 篇文章 0 订阅

订阅专栏

人工智能

1 篇文章 0 订阅

订阅专栏

//source:Cube_src.js
var Cube; (function() {
	function n(b, o, l) {
		var i = b;
		var h = o;
		var k = l;
		this.$1 = function() {
			this.rx = i;
			this.ry = h;
			this.$2 = k
		};
		this.$5 = function(d, e, a) {
			var c,
			f,
			m;
			var j,
			g;
			if (d) {
				j = Math.sin(d);
				g = Math.cos(d);
				f = g * h - j * k;
				m = g * k + j * h;
				h = f;
				k = m
			}
			if (e) {
				j = Math.sin(e);
				g = Math.cos(e);
				c = g * i - j * k;
				m = g * k + j * i;
				i = c;
				k = m
			}
			if (a) {
				j = Math.sin(a);
				g = Math.cos(a);
				c = g * i - j * h;
				f = g * h + j * i;
				i = c;
				h = f
			}
			this.$1()
		};
		this.$1()
	}
	function p(j, g, b, o) {
		var l = j;
		var i = g;
		var h = b;
		var k = o;
		this.$6 = function() {
			var d = l.rx;
			var e = l.ry;
			var a = (i.rx - d) / 2;
			var c = (e - i.ry) / 2;
			var f = (h.rx - d) / 2;
			var m = (e - h.ry) / 2;
			return [a, c, f, m, d, e]
		};
		this.$7 = function() {
			return l.$2 + k.$2
		};
		this.$3 = function() {
			return Math.min(l.rx, i.rx, h.rx, k.rx)
		};
		this.$4 = function() {
			return Math.max(l.ry, i.ry, h.ry, k.ry)
		}
	}
	Cube = function() {
		var g = 35;
		var b = [new n( - 1, +1, +1), new n( + 1, +1, +1), new n( + 1, -1, +1), new n( - 1, -1, +1), new n( - 1, +1, -1), new n( + 1, +1, -1), new n( + 1, -1, -1), new n( - 1, -1, -1)];
		var o = [new p(b[0], b[1], b[3], b[2]), new p(b[1], b[5], b[2], b[6]), new p(b[5], b[4], b[6], b[7]), new p(b[4], b[0], b[7], b[3]), new p(b[4], b[5], b[0], b[1]), new p(b[3], b[2], b[7], b[6])];
		var l,
		i;
		var h = [];
		var k = [];
		var q;
		var u = navigator.userAgent;
		var r = /MSIE/.test(u);
		var w = /Firefox/.test(u);
		var s = Math.PI / 180;
		function x(d, e) {
			var a = h[d];
			if (!a) return;
			if (e) a.display = "block";
			else {
				a.display = "none";
				return
			}
			var c = o[d];
			var f = c.$6(g);
			for (var m = 0; m < 6; m++) f[m] = ((f[m] * 1e6) >> 0) / 1e6;
			if (r) {
				var j = k[d];
				j.M11 = f[0];
				j.M21 = f[1];
				j.M12 = f[2];
				j.M22 = f[3];
				a.pixelLeft = l + g * c.$3();
				a.pixelTop = i - g * c.$4()
			} else {
				f[4] = l + g * f[4];
				f[5] = i - g * f[5];
				if (w) {
					f[4] += "px";
					f[5] += "px"
				}
				a[q] = "matrix(" + f.join(",") + ")"
			}
		}
		function t() {
			var a = [];
			var c;
			for (c = 0; c < 6; c++) a[c] = {
				id: c,
				val: o[c].$7()
			};
			a.sort(function(d, e) {
				return (d.val > e.val) ? -1: 1
			});
			for (c = 0; c < 6; c++) x(a[c].id, c < 3)
		}
		function v(d) {
			var e = g + g;
			if (!r) e -= 2;
			d.width = Math.round(e) + "px";
			d.height = Math.round(e) + "px"
		}
		this.setLocate = function(d, e) {
			l = d;
			i = e;
			t()
		};
		this.setFace = function(d, e) {
			if (h[d]) h[d].display = "none";
			var a = e.style;
			h[d] = a;
			a.position = "absolute";
			a.left = "0";
			a.top = "0";
			a.margin = "0";
			a.border = "#000 1px solid";
			if (r) {
				var c = "DXImageTransform.Microsoft.Matrix";
				a.filter = "progid:" + c + "(sizingMethod='auto expand')";
				k[d] = e.filters[c]
			} else {
				if (!q) {
					if (a.MozTransform != null) q = "MozTransform";
					else if (a.WebkitTransform != null) q = "WebkitTransform";
					else if (a.OTransform != null) q = "OTransform";
					else throw new Error("浏览器不支持");
				}
				a[q + "Origin"] = "0% 0%"
			}
			v(a);
			t()
		};
		this.setRadius = function(d) {
			g = d;
			for (var e = 0, a; e < 8; e++) if (a = h[e]) v(a);
			t()
		};
		this.rotate = function(d, e, a) {
			for (var c = 0; c < 8; c++) b[c].$5(s * d, s * e, s * a);
			t()
		}
	};
	Cube.FACE_FRONT = 0;
	Cube.FACE_RIGHT = 1;
	Cube.FACE_BACK = 2;
	Cube.FACE_LEFT = 3;
	Cube.FACE_TOP = 4;
	Cube.FACE_BOTTOM = 5
})()

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>javascript 3d cube display effect-javascript实现的3d球面显示效果</title>
<meta content="分享 JavaScript Cube 1 6 发布 Web 开发 JavaScript" name="Keywords"/>
<meta content="JSCube可以创建一个立方体将6个HTML元素贴在其面上,并支持旋转和缩放,当前最新版本1.6.0,支持IE FireFox Opear Chrome Safari浏览器脚本引用" name="description"/>
</head>
<body>
<a href="search.html">一个有趣的查询效果</a>
<script type="text/javascript" src="Cube.js"></script>
<script type="text/javascript"> 
var MyFace =
[
	{id: Cube.FACE_FRONT,	pic: "G1"},
	{id: Cube.FACE_BACK,	pic: "g2"},
	{id: Cube.FACE_LEFT,	pic: "o2"},
	{id: Cube.FACE_BOTTOM,	pic: "l"},
	{id: Cube.FACE_RIGHT,	pic: "o1"},
	{id: Cube.FACE_TOP,		pic: "e"}
];
 
onload = OnLoad;
onresize = OnResize;
document.onmousemove = OnMouseMove;
 
var GCube = new Cube();
GCube.setRadius(100);

var cx, cy;


var dx, dy;
 
function OnLoad()
{
	var oImg;
 
	OnResize();
	GCube.setRadius(50);
 
	for(var i=0; i<6; i++)
	{
		oImg = document.createElement("img");
		//oImg.src = "res/" + MyFace[i].pic + ".gif";
		oImg.src =  MyFace[i].pic + ".gif";
		document.body.appendChild(oImg);
 
		GCube.setFace(MyFace[i].id, oImg);
	}
 
	setInterval(OnTimer, 16);
}
 
function OnResize()
{
	var de = document.documentElement;
	cx = de.clientWidth / 2;
	cy = de.clientHeight / 2;
 
	GCube.setLocate(cx, cy);
}
 
function OnMouseMove(e)
{
	e = e || event;
 
	dx = e.clientX - cx;
	dy = e.clientY - cy;
}
 
function OnTimer()
{
	GCube.rotate(dy/50, -dx/50);
}
</script>
</body>
</html>

iLove9ouHenry

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
3D 旋转立方体

//source:Cube_src.jsvar Cube; (function() { function n(b, o, l) { var i = b; var h = o; var k = l; this.$1 = function() { this.rx = i; this.ry = h; this.$2 = k }; this.$5 = func
复制链接

扫一扫

专栏目录