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

html5实现的旋转立方时钟(基于three.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
分享到:
评论

相关推荐

    three.js3维坐标系+绘制立方体(带边框)

    在本文中,我们将深入探讨如何使用three.js库创建一个3维坐标系,并在该系统中绘制带有边框的立方体,以及在立方体表面绘制线条。three.js是JavaScript的一个强大库,专门用于在Web浏览器中进行3D图形编程。让我们一...

    基于three.js的炫酷动画景观特效

    Three.js是一个基于WebGL的JavaScript库,它使得在浏览器中创建和展示3D图形变得简单易行。WebGL是一种在网页中实现硬件加速3D图形的API,无需插件即可在现代浏览器上运行。本项目利用Three.js的强大功能,构建出了...

    使用 Three.js 的 3D 艺术博物馆.zip

    Three.js是JavaScript的一个库,专门用于在Web浏览器中构建和展示三维图形。这个库极大地简化了WebGL编程,WebGL是一种在网页上呈现复杂3D图形的API,而无需安装任何插件。 **Three.js基础知识** 1. **对象和场景*...

    three.js 智慧城市模型

    Three.js 是一款基于 WebGL 的 JavaScript 库,用于在浏览器中创建三维图形和动画,它在构建智慧城市模型中扮演了核心角色。本文将深入探讨如何利用 three.js 来创建智慧城市的虚拟表示,并介绍与之相关的技术知识点...

    基于Three.js的一款运行于浏览器三维图编辑器

    基于Three.js的一款运行于浏览器(chrome、Firefox、360)三维图编辑器。本人呕心开发,具备如下功能,且功能仍在进一步完善中。 1、添加立方体、园柱体、球体、半球体、圆锥体等。 2、实现几何体边框的虚实线。 3、...

    three.min.js 最全的版本

    在"three.min.js"中,包含了各种几何形状的构造函数,如`THREE.BoxGeometry`(立方体)、`THREE.SphereGeometry`(球体)和`THREE.PlaneGeometry`(平面)。这些几何形状可以配合不同的材质(如`THREE....

    使用three.js 的 交互式 3D 心脏模型

    在本项目中,我们将深入探讨如何使用流行的JavaScript库three.js创建一个交互式的3D心脏模型。three.js是一个强大的WebGL库,它使得在浏览器中构建3D图形变得简单易行。通过结合HTML5 Canvas、SVG和WebGL,three.js...

    Vue3 + Three.js 商城可视化实战

    Three.js是一个基于WebGL的JavaScript库,用于在浏览器中创建3D图形。在本项目中,Three.js主要负责以下方面: 1. **场景(Scene)**:Three.js的每个3D应用程序都包含一个场景,所有对象都在其中进行渲染。 2. **...

    Three.js模型包

    Three.js 是一个非常流行的JavaScript库,专用于在Web浏览器中创建和展示三维图形。它利用 WebGL 技术,使得在网页上实现交互式3D视觉效果成为可能,无需用户安装任何插件。这个"Three.js模型包"包含了各种示例使用...

    three. js的人体解剖图.zip

    Three.js 是一个基于 WebGL 的 JavaScript 库,它为Web开发人员提供了一个在浏览器中创建3D图形的强大工具。这个“three.js的人体解剖图”压缩包,很显然是一个利用Three.js库来展示人体结构的3D可视化项目。下面...

    Three.js视频教程源码.rar

    Three.js是基于WebGL的JavaScript库,是目前最流行的浏览器端3D图形渲染库之一,广泛应用于网页游戏、数据可视化、3D建模等领域。本教程围绕"Three.js视频教程源码.rar"展开,深入探讨Three.js的核心概念、使用技巧...

    基于three.js的3D爆炸特效

    本项目"基于three.js的3D爆炸特效"就是一个生动的例子,它利用了HTML5库中的three.js框架,为用户呈现了立体且交互式的3D爆炸效果。Three.js是JavaScript的一个库,专门用于在Web浏览器中创建和展示三维图形,无需...

    three.js开发必备(内附开发指南和three.js多版本)

    three.js是一个基于WebGL的JavaScript库,它允许开发者在网页上创建交互式的3D图形。通过这份指南,你可以了解到如何设置场景、添加对象、处理光照、纹理贴图以及动画效果等。此外,它可能还会讲解到如何与HTML、CSS...

    THREE.js中文教程PDF版附带源码

    THREE.js是一个基于WebGL的JavaScript库,用于在网页上创建和展示三维图形。这个库使得开发者无需深入了解底层图形编程,就能轻松实现复杂的3D场景。"THREE.js中文教程PDF版附带源码"是一本针对初学者和进阶者的资源...

    Three.js 实现年会3D抽奖页面

    Three.js是一个基于WebGL的JavaScript库,它允许开发者在浏览器中创建丰富的3D图形和交互式体验。 首先,我们需要理解Three.js的核心概念。WebGL是一种在浏览器中渲染3D图形的API,而Three.js则是对WebGL的一层封装...

    three.js & three.min.js

    标题提及的是"three.js & three.min.js",这指的是一个非常流行的JavaScript库,专门用于在Web浏览器中创建3D图形。Three.js是一个强大的框架,它简化了WebGL(Web图形库)的使用,使开发人员能够轻松地在网页上构建...

    Three.js-入门指南(带书签).pdf

    Three.js 是一个基于WebGL的JavaScript库,它简化了在网页上使用WebGL创建和显示3D图形的过程。WebGL是一种Web标准,它允许网页使用硬件加速的OpenGL ES图形API,Three.js就是基于这一技术构建,使开发者能够不直接...

    Three.js开发指南pdf 最新版

    8. **动画(Animation)**:Three.js提供了基于时间的动画系统,可以轻松实现物体的移动、旋转、缩放等动态效果。 9. **交互性(Interactivity)**:Three.js也支持与用户的交互,例如鼠标或触摸事件的监听,以及...

    THREE.JS开发指南源码

    《THREE.JS开发指南源码》是针对学习Three.js这一流行JavaScript库的开发者们的一份宝贵资源。Three.js是一个强大的3D库,它允许在Web浏览器中创建和展示复杂的三维图形,无需用户安装任何额外的软件。这个压缩包...

    Three.js 开发包第123版

    7. **动画(Animation)**:Three.js 内置了强大的动画系统,可以轻松实现物体的平移、旋转和缩放,以及更复杂的动画序列。 8. **加载器(Loaders)**:Three.js 提供了多种资源加载器,如OBJLoader、GLTFLoader等...

Global site tag (gtag.js) - Google Analytics