Three.js纹理（二）
一、纹理原理
从本质上来说，纹理只是图片而已，它是由像素点组成。无论在内存还是显存中，它都是由4个分量组成，这四个分量是R、G、B和A。从上面的概念中，我们就能够引申出一些重要的理解了，就是只要是图像数据，准确的说是内存或者显存中的图像数据，都可以作为纹理，显示在屏幕中。
上面的例子，我们通过loadtexture函数在服务器上加载一张图片作为纹理，这一次，我们通过html中的canvas来作为纹理。它非常重要，以后的课程中我们会经常使用这个技巧。
它们两者之间有很多差别，这个差别就是图片和canvas的差别，图片是通过图像处理软件，如photoshop来处理的。而canvas是通过浏览器的绘图API来绘制的。显示canvas能够给程序员更多的想象空间，从而做出更有意思的效果出来。
二、代码
<!DOCTYPE html> <html lang="en"> <head> <title></title> <meta charset="utf-8"> <style> body { margin: 0px; background-color: #000000; overflow: hidden; } </style> </head> <body onload="start();"> <script src="../js/three.js"></script> <script 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>
1.在canvas上画时钟
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就是一个网格表面，它代表着我们渲染到3D世界中的各种模型。其构造函数如下：
THREE.Mesh = function ( geometry, material )
它接受2个参数，一个是几何体，一个是材质。
这里我们这样来构造它：
mesh = new THREE.Mesh( geometry,material );
其中geometry是一个THREE.CubeGeometry表示的正方体。
【注】：需要注意的是在定义了纹理之后，我们将texture.needsUpdate设置为了true，如果不设置为true，那么纹理就不会更新，很可能你看到的是一个黑色的正方体，原因是纹理没有被载入之前，就开始渲染了，而渲染使用了默认的材质颜色。
