HTML5实现3D球视觉特效

2024-09-05 12:18:47

字体：大中小

来源：转载

供稿：网友

再回首，那只小球已停止转动——HTML5 3D球效果，炫丽的3D球视觉效果，测试前请先激活，小球大小可随时设定，可控制小球向上、向下、向左、向右转动，代码里的自定义参数也比较多，比如X/Y方向上的密度和速度、数学角度、各方向上的偏移量、存储的像素点等。

<html><head><title>HTML5实现3D球效果</title><style type="text/css">  #box{   border:2px solid #f60; margin:0 auto;  }  </style>  <script>			var spaceX = 30; //X方向的密度			var spaceY = 30; //Y方向的密度			var PI = Math.PI; //数学角度π			var radius = 200; //球的半径			var radian = PI / 180; //弧度			var speedX = 0; //X方向的速度			var speedY = 0; //Y方向的速度			var offsetX = 300; //X方向的偏移量相当于将球的中心X坐标移之到画布中央			var offsetY = 300; //Y方向的偏移量相当于将球的中心Y坐标移之到画布中央			var spheres = new Array(); //存储像素点			var canvas; //画布			var context; //上下文			var focalLength = 300; //控制球距离屏幕的距离			var start = true; //是否启动			var sx = 0; //sinx			var cx = 0; //cosx			var sy = 0; //siny			var cy = 0; //cosy			var sz = 0; //sinz			var cz = 0; //cosz			var innerStaColor = "GREEN"; //表示内部颜色			var outerStaColor = "RED"; //外部颜色			var objectRadius = 10; //绘制原点半径			var scaleRatio = 0;						var cameraView = {				x: 0,				y: 0,				z: 0,				rotX: 0,				rotY: 0,				rotZ: 0			}; //视角角度			/**			author:qingfeilee			date:2012-03-28			description:初始化系统画布信息		**/			function initCanvas() {				try{ 					canvas = document.getElementById("sphere");					context = canvas.getContext("2d");				}catch(e){					 document.getElementById("tip_info").innerHTML = "您的浏览器不支持！";  				}			}			/**			author:qingfeilee			date:2012-03-28			description:初始化小球实体		**/			function initSphere() {				for (var i = spaceY; i < 180; i += spaceY) {					for (var angle = 0; angle < 360; angle += spaceX) {						var object = {};						var x = Math.sin(radian * i) * radius;						object.x = Math.cos(angle * radian) * x;						object.y = Math.cos(radian * i) * radius;						object.z = Math.sin(angle * radian) * x;						object.glow = .5; //亮度的范围						spheres.push(object);					}				}			}			/**			author:qingfeilee			date:2012-03-28			description:初始化系统函数		**/			function init() {				initCanvas();				initSphere();				setInterval(this.update, 1000 / 60, this);				setTimeout(function() {					start = false;				},				1000);			}			/**			author:qingfeilee			date:2012-03-28			description:设置整个大球的运转速度		**/			function setSpeed(speedX, speedY) {				this.speedX = speedX;				this.speedY = speedY;			}			/**			author:qingfeilee			date:2012-03-28			description:更新整个球的状态以实现动态效果		**/			function update() {				if (start) {					setParam();				}			}			/**			author:qingfeilee			date:2012-03-28			description:设置各个小球的属性		**/			function setParam() {				//根据速度大小计算出一次旋转的角度大小				var rotYstep = speedX / 10000;				var rotXstep = speedY / 10000;				cameraView.rotY = rotYstep;				cameraView.rotX = -rotXstep;				//计算出对应的cos和sin				sx = Math.sin(cameraView.rotX);				cx = Math.cos(cameraView.rotX);				sy = Math.sin(cameraView.rotY);				cy = Math.cos(cameraView.rotY);				sz = Math.sin(cameraView.rotZ);				cz = Math.cos(cameraView.rotZ);				// 设置画布的效果				context.fillStyle = 'rgba(0,0,0,0.1)';				context.fillRect(0, 0, canvas.width, canvas.height);				var l = spheres.length - 1;				for (var i = l,				obj; obj = spheres[i]; i--) {					render(obj);				}			}			/**			author:qingfeilee			date:2012-03-28			description:渲染整个画布		**/			function render(object) {				var xy, xz, yx, yz, zx, zy;				// 计算出物体的相对于照相机的位置				var x = object.x - cameraView.x;				var y = object.y - cameraView.y;				var z = object.z - cameraView.z;								// 绕X轴旋转				xy = cx * y - sx * z;				xz = sx * y + cx * z;				// 绕Y轴旋转				yz = cy * xz - sy * x;				yx = sy * xz + cy * x;				// 绕Z轴旋转				zx = cz * yx - sz * xy;				zy = sz * yx + cz * xy;				//给各个球重新定位				object.x = zx;				object.y = zy;				object.z = yz;				//根据z轴数据来缩放球				scaleRatio = focalLength / (focalLength + yz);				scale = scaleRatio;				if (object.glow > .5) {					object.glow -= .02;				}				var sphereStyle = context.createRadialGradient(offsetX + object.x * scaleRatio, offsetY + object.y * scaleRatio, 				scaleRatio * .5, offsetX + object.x * scaleRatio, offsetY + object.y * scaleRatio, scaleRatio * objectRadius * .5);				sphereStyle.addColorStop(0, innerStaColor);				sphereStyle.addColorStop(object.glow, outerStaColor);				sphereStyle.addColorStop(1, 'rgba(0,0,0,0)');				context.fillStyle = sphereStyle;				context.fillRect(offsetX + object.x * scaleRatio - scaleRatio * objectRadius * .5, 				offsetY + object.y * scaleRatio - scaleRatio * objectRadius * .5, scaleRatio * objectRadius, scaleRatio * objectRadius);				 document.getElementById("tip_info").innerHTML = "当前速度："+speedX+"  "+ speedY+"   小球半径："+objectRadius;  							}			/**			author:qingfeilee			date:2012-03-28			description:冻结/激活真个大球状态		**/			function startOrPause() {				if (start) {					setTimeout(function() {						start = false;					},					2000);					document.getElementById("swi").innerHTML = "激活";					innerStaColor = "GREEN";					outerStaColor = "RED";				} else {					start = true;					document.getElementById("swi").innerHTML = "2秒后冻结";					innerStaColor = "RED";					outerStaColor = "GREEN";				}			}			function changeObjectRadius(val) {				this.objectRadius = val;			}			window.addEventListener("load", init, true);		</script>	</head>	<body>		<div id="box" style="width:600px; height:600px">  			<canvas id="sphere" width="600" height="600" style="background:#0066FF">			</canvas>			<div align="center">				<button id="swi" onclick="startOrPause()">激活</button>				<button onclick="setSpeed(-150,0)">向东</button>				<button onclick="setSpeed(150,0)">向西</button>				<button onclick="setSpeed(0,-150)">向南</button>				<button onclick="setSpeed(0,150)">向北</button>				小球大小：	<input type="range" min="10" max="30" value="10" step="2" onchange="changeObjectRadius(this.value)"/>			</div>			<div align="center">											</div>					</div>	</body></html>

上一篇：CSS3实现透视感效果

下一篇：图片呼吸灯，CSS3图片阴影+鼠标移上放大图片