`
18211103738
  • 浏览: 81151 次
  • 性别: Icon_minigender_1
社区版块
存档分类
最新评论

html5实现的旋转立方时钟(基于three.js)

html5three.js 
阅读更多

效果：


 

代码：

1.CubeClock.html

<!doctype html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title>CubeClock</title>
		<style>
			body,*{margin:0;padding:0;border:0;}
			div{width:100%;height:100%;background:#FFFFFF;}
		</style>
		<script src="clock.js"></script>
		<script src="three.min.js"></script>
		<script>
		window.onload = function(){
			var canvas = document.createElement("canvas");
			canvas.width = 200;
			canvas.height = 200;
			//document.body.appendChild(canvas);
			drawClock(canvas);
			window.setInterval(function(){drawClock(canvas);},1000);
			
			var div = document.getElementsByTagName("div")[0];
			var width = window.innerWidth*98/100;
			var height = window.innerHeight*98/100;
			
			var scene = new THREE.Scene();
			/*
			var geometry = new THREE.BoxGeometry(200,200,200);
			var material = new THREE.MeshLambertMaterial({color:0xcc0000});
			var cube=new THREE.Mesh(geometry,material);
			scene.add(cube);
			*/
			var geometry = new THREE.BoxGeometry(200, 200, 200);
			var texture = new THREE.Texture(canvas);
			var material = new THREE.MeshBasicMaterial({map: texture});
			var mesh = new THREE.Mesh(geometry, material);
			scene.add(mesh);
			
			/*
			var pointLight = new THREE.PointLight(0xFFFFFF);
			pointLight.position.set(1000, 5000, 13000);
			scene.add(pointLight);
			*/
			
			var camera = new THREE.PerspectiveCamera(75, width/height, 1, 1000);
			camera.position.set(0,0,500);
			//camera.up.y = 1;
			//camera.lookAt({x:0,y:0,z:0});
			
			var renderer = new THREE.WebGLRenderer({antialias:true});
			renderer.setSize(width, height);
			renderer.setClearColor(0xEEEEEE);
			div.appendChild(renderer.domElement);
			
			function render(){
				texture.needsUpdate = true;	//更新纹理（让秒针动起来）
				//cube.rotation.x += 0.01;
				//cube.rotation.y += 0.02;
				mesh.rotation.x += 0.01;	//绕X轴旋转，速率为0.01
				mesh.rotation.y += 0.02;	//绕Y轴旋转，速率为0.02
				renderer.render(scene, camera);
				requestAnimationFrame(render);
			}
			render();
		}
		</script>
	</head>
	<body>
		<div></div>
	</body>
</html>

 2.clock.js

function drawDial(canvas){
	var cxt = canvas.getContext("2d");
	cxt.save();
	cxt.lineWidth = 10;
	cxt.strokeStyle = "#FDAB17";
	cxt.strokeRect(-95,-95,190,190);
	cxt.fillStyle = "#FFFFFF";
	cxt.fillRect(-90,-90,180,180);
	cxt.restore();
	for(var i=0;i<12;i++){
		if(i%3==0){
			cxt.save();
			cxt.rotate(Math.PI/6*i);
			cxt.beginPath();
			cxt.moveTo(0,-77);
			cxt.lineTo(0,-90);
			cxt.closePath();
			cxt.lineWidth = 5;
			cxt.strokeStyle = "#000";
			cxt.stroke();
			cxt.restore();
		}else{
			cxt.save();
			cxt.rotate(Math.PI/6*i);
			cxt.beginPath();
			cxt.moveTo(0,-87);
			cxt.lineTo(0,-100);
			cxt.closePath();
			cxt.lineWidth = 5;
			cxt.strokeStyle = "#000";
			cxt.stroke();
			cxt.restore();
		}
	}
}

function drawPointer(canvas,hour,minute,second){
	var cxt = canvas.getContext("2d");
	/*时针*/
	cxt.save();
	cxt.rotate(hour*(Math.PI*2/12)+(minute/60)*(Math.PI*2/12));
	cxt.beginPath();
	cxt.moveTo(0,20);
	cxt.lineTo(0,-45);
	cxt.closePath();
	cxt.lineWidth = 6;
	cxt.strokeStyle = "#000";
	cxt.stroke();
	cxt.restore();
	/*分针*/
	cxt.save();
	cxt.rotate(minute*Math.PI*2/60);
	cxt.beginPath();
	cxt.moveTo(0,25);
	cxt.lineTo(0,-60);
	cxt.closePath();
	cxt.lineWidth = 5;
	cxt.strokeStyle = "#000";
	cxt.stroke();
	cxt.restore();
	/*秒针*/
	cxt.save();
	cxt.rotate(second*Math.PI*2/60);
	cxt.beginPath();
	cxt.moveTo(0,30);
	cxt.lineTo(0,-70);
	cxt.closePath();
	cxt.lineWidth = 4;
	cxt.strokeStyle = "red";
	cxt.stroke();
	cxt.restore();

	cxt.save();
	cxt.beginPath();
	cxt.arc(0,0,6,0,Math.PI*2);
	cxt.closePath();
	cxt.fillStyle = "red";
	cxt.fill();

	cxt.beginPath();
	cxt.arc(0,0,7,0,Math.PI*2);
	cxt.closePath();
	cxt.lineWidth = 3;
	cxt.strokeStyle = "#FDAB17";
	cxt.stroke();
	cxt.restore();
}

var translated = false;
function drawClock(canvas){
	cxt = canvas.getContext("2d");
	if(!translated){//如果(0,0)点没有校正，则移动(0,0)点
		cxt.translate(100,100);
		translated = true;
	}
	var now = new Date();
	var hour = now.getHours();
	hour = hour>12?hour-12:hour;	//小时转换为12进制
	var minute = now.getMinutes();
	var second = now.getSeconds();
	//console.log(hour);
	//console.log(minute);
	//console.log(second);
	cxt.clearRect(-100,-100,200,200);
	drawDial(canvas);
	drawPointer(canvas,hour,minute,second);
}

 

  • 大小: 19.9 KB
分享到：
| JS创建对象和继承的方式
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics