HTML5實(shí)現(xiàn)3D球視覺特效

2024-09-05 12:18:47

字體：大中小

供稿：網(wǎng)友

再回首，那只小球已停止轉(zhuǎn)動(dòng)——HTML5 3D球效果，炫麗的3D球視覺效果，測(cè)試前請(qǐng)先激活，小球大小可隨時(shí)設(shè)定，可控制小球向上、向下、向左、向右轉(zhuǎn)動(dòng)，代碼里的自定義參數(shù)也比較多，比如X/Y方向上的密度和速度、數(shù)學(xué)角度、各方向上的偏移量、存儲(chǔ)的像素點(diǎn)等。

<html><head><title>HTML5實(shí)現(xiàn)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; //數(shù)學(xué)角度π			var radius = 200; //球的半徑			var radian = PI / 180; //弧度			var speedX = 0; //X方向的速度			var speedY = 0; //Y方向的速度			var offsetX = 300; //X方向的偏移量相當(dāng)于將球的中心X坐標(biāo)移之到畫布中央			var offsetY = 300; //Y方向的偏移量相當(dāng)于將球的中心Y坐標(biāo)移之到畫布中央			var spheres = new Array(); //存儲(chǔ)像素點(diǎn)			var canvas; //畫布			var context; //上下文			var focalLength = 300; //控制球距離屏幕的距離			var start = true; //是否啟動(dòng)			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"; //表示內(nèi)部顏色			var outerStaColor = "RED"; //外部顏色			var objectRadius = 10; //繪制原點(diǎn)半徑			var scaleRatio = 0;						var cameraView = {				x: 0,				y: 0,				z: 0,				rotX: 0,				rotY: 0,				rotZ: 0			}; //視角角度			/**			author:qingfeilee			date:2012-03-28			description:初始化系統(tǒng)畫布信息		**/			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:初始化小球?qū)嶓w		**/			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:初始化系統(tǒng)函數(shù)		**/			function init() {				initCanvas();				initSphere();				setInterval(this.update, 1000 / 60, this);				setTimeout(function() {					start = false;				},				1000);			}			/**			author:qingfeilee			date:2012-03-28			description:設(shè)置整個(gè)大球的運(yùn)轉(zhuǎn)速度		**/			function setSpeed(speedX, speedY) {				this.speedX = speedX;				this.speedY = speedY;			}			/**			author:qingfeilee			date:2012-03-28			description:更新整個(gè)球的狀態(tài)以實(shí)現(xiàn)動(dòng)態(tài)效果		**/			function update() {				if (start) {					setParam();				}			}			/**			author:qingfeilee			date:2012-03-28			description:設(shè)置各個(gè)小球的屬性		**/			function setParam() {				//根據(jù)速度大小計(jì)算出一次旋轉(zhuǎn)的角度大小				var rotYstep = speedX / 10000;				var rotXstep = speedY / 10000;				cameraView.rotY = rotYstep;				cameraView.rotX = -rotXstep;				//計(jì)算出對(duì)應(yīng)的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);				// 設(shè)置畫布的效果				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:渲染整個(gè)畫布		**/			function render(object) {				var xy, xz, yx, yz, zx, zy;				// 計(jì)算出物體的相對(duì)于照相機(jī)的位置				var x = object.x - cameraView.x;				var y = object.y - cameraView.y;				var z = object.z - cameraView.z;								// 繞X軸旋轉(zhuǎn)				xy = cx * y - sx * z;				xz = sx * y + cx * z;				// 繞Y軸旋轉(zhuǎn)				yz = cy * xz - sy * x;				yx = sy * xz + cy * x;				// 繞Z軸旋轉(zhuǎn)				zx = cz * yx - sz * xy;				zy = sz * yx + cz * xy;				//給各個(gè)球重新定位				object.x = zx;				object.y = zy;				object.z = yz;				//根據(jù)z軸數(shù)據(jù)來縮放球				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 = "當(dāng)前速度："+speedX+"  "+ speedY+"   小球半徑："+objectRadius;  							}			/**			author:qingfeilee			date:2012-03-28			description:凍結(jié)/激活真?zhèn)€大球狀態(tài)		**/			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秒后凍結(jié)";					innerStaColor = "RED";					outerStaColor = "GREEN";				}			}			function changeObjectRadius(val) {				this.objectRadius = val;			}			window.addEventListener("load", init, true);		</script>	</head>	<body>		<div   class="iwvjtn8m0"   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實(shí)現(xiàn)透視感效果

下一篇：圖片呼吸燈，CSS3圖片陰影+鼠標(biāo)移上放大圖片