WebGL8 ----纹理，不一样的皮肤（1）
1、纹理由图片组成
在threejs中，纹理类由THREE.Texture表示，其构造函数如下所示：
THREE.Texture( image, mapping, wrapS, wrapT, magFilter, minFilter, format, type, anisotropy )；
参数说明：
① image : 这是一个图片类型，基本上它有ImageUtils来加载 var image = THREE.ImageUtils.loadTexture(url);
② mapping: 是一个THREE.UVMapping()类型，它表示的是纹理坐标;
③ wrapS：表示x轴的纹理的回环方式，就是当纹理的宽度小于需要贴图的平面的宽度的时候，平面剩下的部分应该以何种方式贴图的问题;
④ wrapT：表示y轴的纹理回环方式;
⑤ magFilter 和 ⑥ minFilter 表示过滤的方式;
⑦ format: 表示加载的图片的格式，这个参数可以取值THREE.RGBAFormat，RGBFormat等;
THREE.RGBAFormat表示每个像素点要使用四个分量表示，分别是红、绿、蓝、透明来表示。RGBFormat则不使用透明，也就是说纹理不会有透明的效果;
⑧ type : 表示存储纹理的内存的每一个字节的格式，是有符号，还是没有符号，是整形，还是浮点型。不过这里默认是无符号型（THREE.UnsignedByteType）;
⑨ anisotropy: 各向异性过滤。使用各向异性过滤能够使纹理的效果更好，但是会消耗更多的内存、CPU、GPU时间;
2、纹理坐标
在正常的情况下，你在0.0到1.0的范围内指定纹理坐标；
代码实例：
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<style>
body {
margin: 0px;
background-color: #000000;
overflow: hidden;
}
</style>
</head>
<body>
<script src="../js/three.js"></script>
<script>
var camera, scene, renderer;
var mesh;
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();
//画一个宽为500，高为300的平面；
var geometry = new THREE.PlaneGeometry( 500, 300, 1, 1 );
//为平面赋予纹理坐标（要逆时针）
geometry.vertices[0].uv = new THREE.Vector2(0,0);
geometry.vertices[1].uv = new THREE.Vector2(2,0);
geometry.vertices[2].uv = new THREE.Vector2(2,2);
geometry.vertices[3].uv = new THREE.Vector2(0,2);
//加载纹理（必须以服务器的形式加载）
//第一个参数：是一个相对路径，表示与网页之间的额相对路径；
//第二个参数：null,表示要传入一个纹理坐标参数，来覆盖前面在geometry中参数；
//第三个参数：表示一个回调函数，表示成功加载纹理后需要执行的函数，参数t是传入的texture
var texture = THREE.ImageUtils.loadTexture("textures/a.jpg",null,function(t){});
//将纹理应用于材质
var material = new THREE.MeshBasicMaterial({map:texture});
var 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() {
requestAnimationFrame( animate );
renderer.render( scene, camera );
}
</script>
</body>
</html>
