Three.js 学习记录 之 纹理加载

最近开始学习OpenGL，不免用到了Three.js，之前学习过程中没有做记录，俗话说：好脑袋不如一个烂笔头，有时遇到一个点，记得以前弄过，可又记得不太清，不得不重新整理学习，这时往往会后悔之前怎么没做个记录，现在开始，做个记录，为以后备用！

这次学习的是如何加载纹理，目前我用的是r81版本，之前的 THREE.ImageUtils.loadTexture 方法现在已经不推荐使用了，现在使用的是THREE.ImageLoader方法，具体使用方法如下：

1、生成一个loader 

var
loader =
new THREE.ImageLoader();

这里ImageLoader函数其实是带参数的，参数是loadingManager，这个manager可以管理加载的进度，出现的错误等一些回调函数，不带参数的话。默认使用的是THREE.DefaultLoadingManager，其实加载完成、加载进度、错误等一些回调函数，也可以在ImageLoader的load函数里面管理。

2、加载资源

使用load函数来加载资源，可以把一些状态回调函数函数写在这个函数里面，如下所示：

loader.load(
// 纹理路径
"a image",

// 纹理加载成功后
function ( image ) {
// 可以把加载好的纹理赋给你定义好的texture对象

},

// 加载进度
function ( xhr ) {
console.log( (xhr.loaded / xhr.total * 100) + '% loaded' );
},

// 错误处理
function ( xhr ) {
console.log( 'An error happened' );
}

这样的话，纹理加载就算处理完了。

注意，纹理加载是异步的，可以把render渲染放到纹理加载完毕后。