<!DOCTYPE html>
<html>
<head>
<title>clock-three</title>
<meta charset="utf-8"/>
<style>
body {
margin: 0px;
background-color: #000;
overflow:hidden;
}
</style>
</head>
<body onload="start()">
<script src="three.js"></script>
<script src="js/clock.js"></script>
<script>
var camera, scene, renderer;
var mesh;
var texture;
function start()
{
clock(); //生成canvas变量
init();
animate();
}
function init() {
renderer = new THREE.WebGLRenderer({ antialias: true});
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
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);
var material = new THREE.MeshBasicMaterial({map:texture});
//如果不设置为true,纹理就不会更新，你很可能看到得是黑色正方体。原因是纹理绘制需要一段时间，javascript是可以异步运行的
纹理没有被载入之前，就开始渲染了！而 渲染使用了默认的材质颜色；
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;
renderer.render( scene, camera );
requestAnimationFrame( animate );
}
</script>
</body>
</html>
经过测试，需要注意：three.js使用版本为97。73版本的时钟不会动；