3D旋转的时钟

初步学习WEBGL。感谢WEBGL中文网的帮助

首先是时钟的绘画过程。这里主要介绍逻辑处理的JS代码。剩余的TOUCHME

var hour=new Date().getHours();

if(hour>11){
hour=hour-12;
}

var mins=new Date().getMinutes();

var sec=new Date().getSeconds();
//秒针，每周走60个单位
var UnitSec=2*Math.PI/60;
//分钟，每周走60*60个单位
var UnitMins=2*Math.PI/(60*60);
//小时，每周走12*60*60个单位
var UnitHour=2*Math.PI/(12*60*60);

var AngleHour=UnitHour*(hour*60*60+mins*60+sec);

var AngleMins=UnitMins*(mins*60+sec);

var AngleSec=UnitSec*(sec);
//具体绘画方法
this.drawCursor(AngleHour,AngleMins,AngleSec);
[/code]

重点是3D立方体的绘画

function start() {
//开始画时钟
clock.init();
//开始画立方体
init();
//动起来
animate();
}

function init() {
//首先渲染器render
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
//其次相机Camera。
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.z = 400;
//然后定义场景
scene = new THREE.Scene();

//定义立方体
var geometry = new THREE.CubeGeometry(150, 150, 150);

texture = new THREE.Texture( canvas);
//这里把canvas按照纹理的方式贴到皮肤表面
var material = new THREE.MeshBasicMaterial({map:texture});

texture.needsUpdate = true;
//网格定义
mesh = new THREE.Mesh( geometry,material );
scene.add( mesh );

window.addEventListener( 'resize', onWindowResize, false );
}

function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}

function animate() {
texture.needsUpdate = true;
mesh.rotation.y -= 0.01;
mesh.rotation.x -= 0.01;
requestAnimationFrame( animate );
renderer.render( scene, camera );
}
[/code]

这里需要强调下。threeJS的绘画过程，主要有三部分。渲染器，场景，相机。。理解好这三个部分的作用，就好了。