WebGL中文网

     实现这个效果的步骤可以用下面的框图来表示：

1、在canvas上画时钟

由于时钟的秒针会每秒滴答一次，那么canvas中的内容，其本身就会被更新一次。我们将在canvas中绘制时钟的代码放到了【初级教程\chapter6\clock.js】中。打开代码，你会发现它非常熟悉，这里的函数都是html5绘制canvas的基本函数，只不过其逻辑需要对照代码好好来理解一下，不过这都不是我们的重点了在，重点是它能画出如下的图像来，这段代码在【初级教程\chapter6\6-7.html】中能够找到。

2、将canvas传递给THREE.Texture纹理

Canvas可以作为纹理传递给THREE.Texture函数，纹理的构造函数是：

THREE.Texture = function ( image, mapping, wrapS, wrapT, magFilter, minFilter, format, type, anisotropy )

这个函数的第一个参数image，接收一个image类型的图像，或者canvas，后面的参数可以暂时不理会，它会以默认值去填充texture后面的参数。

这里我们只需要将canvas传递给Texture就ok了，代码如下：

texture = new THREE.Texture( canvas);

那么纹理怎么知道其每一个像素怎么映射到形状状的表面呢，默认情况下，纹理被均匀分配到四边形的各个顶点上。

3、将纹理传递给THREE.MeshBasicMaterial材质

将texture传递给材质就更简单了，材质本身可以接受一个属性名为map的参数，代码如下：

var material = new THREE.MeshBasicMaterial({map:texture});

这样就将纹理赋给了材质。

4、构造THREE.Mesh

在我们的中级教程中，详细的讲解过Mesh，从它的概念，组成，怎么将几何体和材质融合一体，又怎么知道几何体和材质是否发生变化，怎么更新Mesh动画，几乎都讲了一遍，可以说是目前最为完整的3DMesh教程。不过这里篇幅有限，而Mesh又确实需要太多的笔墨去讲解，所以，这里就一笔带过了。

Mesh就是一个网格表面，它代表着我们渲染到3D世界中的各种模型。其构造函数如下：

THREE.Mesh = function ( geometry, material )

它接受2个参数，一个是几何体，一个是材质。

Mesh就是一个网格表面，它代表着我们渲染到3D世界中的各种模型。其构造函数如下：

THREE.Mesh = function ( geometry, material )

它接受2个参数，一个是几何体，一个是材质。

这里我们这样来构造它：

mesh = new THREE.Mesh( geometry,material );

其中geometry是一个THREE.CubeGeometry表示的正方体。

ok，经过这4步，我们的代码就可以运行了。