您当前的位置: 效果：
代码：
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);
}