【WebGL入门4】纹理与canvas
关于webgl的纹理映射和opengl类似,通过将object的坐标和纹理坐标一一对应实现。其中核心代码:
var geometry = new THREE.CubeGeometry(150, 150, 150); //创建一个物体
texture = new THREE.Texture( canvas); //将物体画到canvas上面,再load到texture上
var material = new THREE.MeshBasicMaterial({map:texture}); //将对应好的坐标一一map过去
texture.needsUpdate = true; //实时渲染必须要加上这一句,需要随时update。
mesh = new THREE.Mesh( geometry,material ); //添加mesh
scene.add( mesh );
流水线:在canvas上面画图,将canvas传递给THREE.Texture纹理,将纹理传递给THREE.MeshBasicMaterial材质,最后构造THREE.Mesh。
注意:默认情况下,纹理被均匀分配到四边形的各个顶点上。所以完整的:THREE.Texture = function ( image, mapping, wrapS, wrapT, magFilter, minFilter, format, type, anisotropy ),不赋值就是默认情况。