好了，最后，我们来看看，我们的所有代码,代码中"<后的-",请忽略掉，是因为html排版的原因被加上。

<-!DOCTYPE html> <-html lang="en"> <-head> <-title><-/title> <-meta charset="utf-8"> <-style> body { margin: 0px; background-color: #000000; overflow: hidden; } <-/style> <-/head> <-body data-ke-onload="start();"> <-script src="../js/three.js" data-ke-src="../js/three.js"><-/script> <-script src="./clock.js" data-ke-src="./clock.js"><-/script> <-script> var camera, scene, renderer; var mesh; var texture; function start() { clock(); init(); animate(); } function init() { renderer = new THREE.WebGLRenderer(); 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}); 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 ); } <-/script> <-/body> <-/html>

代码中clock.js就是绘制时钟的代码，里面有一个全局变量canvas，表示canvas本身。另外，需要注意的是在定义了纹理之后，我们将texture.needsUpdate设置为了true，如果不设置为true，那么纹理就不会更新，很可能你看到的是一个黑色的正方体，原因是纹理没有被载入之前，就开始渲染了，而渲染使用了默认的材质颜色。

这是什么原因呢？是这样的，纹理的绘制是需要一段时间的，javascript是可以异步运行的，在canvas绘制出时钟之前，可能three.js就开始根据纹理渲染图形了。如果纹理不更新，那么正方体一直会是以前没有绘制完成的纹理，很可能是材质本身的颜色。

另一个方面，canvas由于绘制的是时钟，其每一秒都会重新绘制一次，所以为了让正方体上的纹理可以及时反映canvas上的时钟，也需要不断的更新纹理，所以需要将needUpdate设置为true，不过缺点是其效率会低一些，不过这种效率的降低，是完全可以接受的。

好了，那么这一节，我们就讲到这里，WebGL中文网的全体同仁都将为您服务。我们不仅提供优秀的教程，而且提供专业的在线答疑。希望大家支持，您的付出，将绝对不会后悔。

我们有信心，在您学完WebGL中文网的课程后，做一个漂亮的3D游戏或者3D网站，一点没有问题。