canvas 酷炫3D方块空间特效代码下载



如需定制开发(网站开发、二次开发)在线咨询,请点击>> QQ:753511799

53 209 70



特效描述:酷炫 3D方块空间。基于canvas全屏3D方块空间,三维立体的方块动画,酷炫的方块穿梭动画特效。

代码结构

1. HTML代码

		<canvas id="canvas"></canvas>
		<script type="text/javascript">
			function project3D(x, y, z, vars) {
				var p, d;
				x -= vars.camX;
				y -= vars.camY;
				z -= vars.camZ;
				p = Math.atan2(x, z);
				d = Math.sqrt(x * x + z * z);
				x = Math.sin(p - vars.yaw) * d;
				z = Math.cos(p - vars.yaw) * d;
				p = Math.atan2(y, z);
				d = Math.sqrt(y * y + z * z);
				y = Math.sin(p - vars.pitch) * d;
				z = Math.cos(p - vars.pitch) * d;
				p = Math.atan2(x, y);
				d = Math.sqrt(x * x + y * y);
				x = Math.sin(p - vars.roll) * d;
				y = Math.cos(p - vars.roll) * d;
				return {
					x: vars.cx + x / z * vars.scale,
					y: vars.cy + y / z * vars.scale,
					d: z > 0 ? Math.sqrt(x * x + y * y + z * z) : -1
				}
			}
			function rgb(col) {
				col += 0.000001;
				var r = parseInt((0.5 + Math.sin(col) * 0.5) * 16);
				var g = parseInt((0.5 + Math.cos(col) * 0.5) * 16);
				var b = parseInt((0.5 - Math.sin(col) * 0.5) * 16);
				return "#" + r.toString(16) + g.toString(16) + b.toString(16);
			}
			function process(vars) {
				vars.scale -= Math.cos(vars.frameNo / 40) * 8;
				vars.shipSpeed += Math.cos(vars.frameNo / 40) / 30;
				vars.yaw += Math.cos(vars.frameNo / 100) / 80;
				vars.pitch += Math.sin(vars.frameNo / 70) / 40;
				vars.roll -= Math.cos(vars.frameNo / 130) / 40;
				vars.shipVX = Math.sin(vars.yaw) * Math.cos(vars.pitch) * vars.shipSpeed;
				vars.shipVZ = Math.cos(vars.yaw) * Math.cos(vars.pitch) * vars.shipSpeed;
				vars.shipVY = Math.sin(vars.pitch) * vars.shipSpeed;
				vars.camX += vars.shipVX;
				vars.camY += vars.shipVY;
				vars.camZ += vars.shipVZ;
				for (var i = 0; i < vars.shapes.length; ++i) {
					rotateShape(vars.shapes[i], i / vars.shapes.length * .1, -i / vars.shapes.length * .1, i / vars.shapes.length * .1);
					if (vars.shapes[i].x - vars.camX > vars.fieldRadius) vars.shapes[i].x -= vars.fieldRadius * 2;
					if (vars.shapes[i].x - vars.camX < -vars.fieldRadius) vars.shapes[i].x += vars.fieldRadius * 2;
					if (vars.shapes[i].y - vars.camY > vars.fieldRadius) vars.shapes[i].y -= vars.fieldRadius * 2;
					if (vars.shapes[i].y - vars.camY < -vars.fieldRadius) vars.shapes[i].y += vars.fieldRadius * 2;
					if (vars.shapes[i].z - vars.camZ > vars.fieldRadius) vars.shapes[i].z -= vars.fieldRadius * 2;
					if (vars.shapes[i].z - vars.camZ < -vars.fieldRadius) vars.shapes[i].z += vars.fieldRadius * 2;
				}
			}
			function sortFunction(a, b) {
				return b.dist - a.dist;
			}
			function draw(vars) {
				vars.ctx.globalAlpha = 1;
				vars.ctx.fillStyle = "rgba(0,0,0,.65)";
				vars.ctx.fillRect(0, 0, canvas.width, canvas.height);
				var x, y, z, point, pta, ptb, a;
				for (i = vars.shapes.length; i--;) {
					x = vars.shapes[i].x;
					y = vars.shapes[i].y;
					z = vars.shapes[i].z;
					point = project3D(x, y, z, vars);
					a = 1 - Math.pow(point.d / vars.fieldRadius, 10);
					vars.ctx.globalAlpha = a < 0 ? 0 : a;
					vars.ctx.strokeStyle = rgb(vars.frameNo / 16 + (i / 800) * (1 / vars.scale * 200));
					vars.ctx.lineWidth = 40 / (1 + point.d);
					vars.ctx.beginPath();
					for (j = 12; j--;) {
						pta = project3D(x + vars.shapes[i].s[j].a.x, y + vars.shapes[i].s[j].a.y, z + vars.shapes[i].s[j].a.z, vars);
						ptb = project3D(x + vars.shapes[i].s[j].b.x, y + vars.shapes[i].s[j].b.y, z + vars.shapes[i].s[j].b.z, vars);
						if (pta.d != -1 && ptb.d != -1) {
							vars.ctx.moveTo(pta.x, pta.y);
							vars.ctx.lineTo(ptb.x, ptb.y);
						}
					}
					vars.ctx.stroke();
				}
			}
			function rotateShape(shape, yaw, pitch, roll) {
				var x, y, z, p, d;
				for (var i = 0; i < shape.s.length; ++i) {
					for (var j = 2; j--;) {
						if (j) {
							x = shape.s[i].a.x;
							y = shape.s[i].a.y;
							z = shape.s[i].a.z;
						} else {
							x = shape.s[i].b.x;
							y = shape.s[i].b.y;
							z = shape.s[i].b.z;
						}
						d = Math.sqrt(x * x + z * z);
						p = Math.atan2(x, z);
						x = Math.sin(p + yaw) * d;
						z = Math.cos(p + yaw) * d;
						d = Math.sqrt(y * y + z * z);
						p = Math.atan2(y, z);
						y = Math.sin(p + pitch) * d;
						z = Math.cos(p + pitch) * d;
						d = Math.sqrt(x * x + y * y);
						p = Math.atan2(x, y);
						x = Math.sin(p + roll) * d;
						y = Math.cos(p + roll) * d;
						if (j) {
							shape.s[i].a.x = x;
							shape.s[i].a.y = y;
							shape.s[i].a.z = z;
						} else {
							shape.s[i].b.x = x;
							shape.s[i].b.y = y;
							shape.s[i].b.z = z;
						}
					}
				}
			}
			function S(x1, y1, z1, x2, y2, z2) {
				this.a = {
					x: x1,
					y: y1,
					z: z1
				};
				this.b = {
					x: x2,
					y: y2,
					z: z2
				};
			}
			function Cube(x, y, z) {
				Q = {};
				Q.x = x;
				Q.y = y;
				Q.z = z;
				Q.s = [];
				Q.s.push(new S(-1, -1, -1, 1, -1, -1));
				Q.s.push(new S(1, -1, -1, 1, 1, -1));
				Q.s.push(new S(1, 1, -1, -1, 1, -1));
				Q.s.push(new S(-1, 1, -1, -1, -1, -1));
				Q.s.push(new S(-1, -1, 1, 1, -1, 1));
				Q.s.push(new S(1, -1, 1, 1, 1, 1));
				Q.s.push(new S(1, 1, 1, -1, 1, 1));
				Q.s.push(new S(-1, 1, 1, -1, -1, 1));
				Q.s.push(new S(-1, -1, -1, -1, -1, 1));
				Q.s.push(new S(1, -1, -1, 1, -1, 1));
				Q.s.push(new S(1, 1, -1, 1, 1, 1));
				Q.s.push(new S(-1, 1, -1, -1, 1, 1));
				return Q;
			}
			R = () => Math.random() * Math.PI * 2;
			function loadScene(vars) {
				vars.shapes = [];
				for (var i = 0; i < vars.cubeNo; ++i) {
					var x = vars.fieldRadius - Math.random() * vars.fieldRadius * 2;
					var y = vars.fieldRadius - Math.random() * vars.fieldRadius * 2;
					var z = vars.fieldRadius - Math.random() * vars.fieldRadius * 2;
					var c = new Cube(x, y, z);
					rotateShape(c, R(), R(), R());
					vars.shapes.push(c);
				}
			}
			function frame(vars) {
				if (vars === undefined) {
					var vars = {};
					vars.canvas = document.querySelector("canvas");
					vars.ctx = vars.canvas.getContext("2d");
					vars.canvas.width = document.body.clientWidth;
					vars.canvas.height = document.body.clientHeight;
					window.addEventListener("resize", function() {
						vars.canvas.width = document.body.clientWidth;
						vars.canvas.height = document.body.clientHeight;
						vars.cx = vars.canvas.width / 2;
						vars.cy = vars.canvas.height / 2;
					}, true);
					vars.frameNo = 0;
					vars.canvas.addEventListener("mousemove", (e) => {
						vars.mx = e.clientX / vars.canvas.clientWidth * vars.canvas.width
						vars.my = e.clientY / vars.canvas.clientHeight * vars.canvas.height
					});
					vars.camX = 0;
					vars.camY = 0;
					vars.camZ = 0;
					vars.pitch = 0;
					vars.yaw = 0;
					vars.roll = 0;
					vars.cx = vars.canvas.width / 2;
					vars.cy = vars.canvas.height / 2;
					vars.scale = 400;
					vars.shipSpeed = 1.5;
					vars.shipVX = vars.shipVY = vars.shipVZ = 0;
					vars.fieldRadius = 150;
					vars.cubeNo = 1500;
					loadScene(vars);
				}
				vars.frameNo++;
				requestAnimationFrame(function() {
					frame(vars);
				});
				process(vars);
				draw(vars);
			}
			frame();
		</script>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册



×
×
51前端

注册

×
绑定手机

请绑定手机号,在继续操作

×
单次下载支付

应付金额:279

支付完成后,回到下载页面,在进行下载

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到