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   class="tb5nzbt"   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圖片陰影+鼠標移上放大圖片