实现这个效果的步骤可以用下面的框图来表示:
由于时钟的秒针会每秒滴答一次,那么canvas中的内容,其本身就会被更新一次。我们将在canvas中绘制时钟的代码放到了【初级教程\chapter6\clock.js】中。打开代码,你会发现它非常熟悉,这里的函数都是html5绘制canvas的基本函数,只不过其逻辑需要对照代码好好来理解一下,不过这都不是我们的重点了在,重点是它能画出如下的图像来,这段代码在【初级教程\chapter6\6-7.html】中能够找到。
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);
那么纹理怎么知道其每一个像素怎么映射到形状状的表面呢,默认情况下,纹理被均匀分配到四边形的各个顶点上。
将texture传递给材质就更简单了,材质本身可以接受一个属性名为map的参数,代码如下:
var material = new THREE.MeshBasicMaterial({map:texture});
这样就将纹理赋给了材质。
在我们的中级教程中,详细的讲解过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步,我们的代码就可以运行了。
联系客服