three.js 源码分析之ImageLoader

/**

     * @author mrdoob / http://mrdoob.com/

     */

    这个类用于图像的下载，包括数据存储在url中的下载过程，需要注意的是跨域问题

    //图片下载器

    function ImageLoader( manager ) {

 

        this.manager = ( manager !== undefined ) ? manager : DefaultLoadingManager;

 

    }

 

    Object.assign( ImageLoader.prototype, {

        //跨域

        crossOrigin: 'anonymous',

        //加载图片

        load: function ( url, onLoad, onProgress, onError ) {

 

            if ( url === undefined ) url = '';

 

            if ( this.path !== undefined ) url = this.path + url;

 

            //处理url访问

            url = this.manager.resolveURL( url );

 

            var scope = this;

            //首先从缓存中获取

            var cached = Cache.get( url );

            //缓存中存在

            if ( cached !== undefined ) {

                //开始回调

                scope.manager.itemStart( url );

 

                setTimeout( function () {

                    //空闲处理

                    if ( onLoad ) onLoad( cached );

                    //结束回调

                    scope.manager.itemEnd( url );

 

                }, 0 );

                //返回方式获取

                return cached;

 

            }

 

            //创建图片div

            var image = document.createElementNS( 'http://www.w3.org/1999/xhtml', 'img' );

 

            function onImageLoad() {

                //下载完成移出监听

                image.removeEventListener( 'load', onImageLoad, false );

                image.removeEventListener( 'error', onImageError, false );

                //将img添加到缓存（这个this是img自己）

                Cache.add( url, this );

                //回调

                if ( onLoad ) onLoad( this );

                //结束回调

                scope.manager.itemEnd( url );

 

            }

 

            function onImageError( event ) {

                //处理错误

                image.removeEventListener( 'load', onImageLoad, false );

                image.removeEventListener( 'error', onImageError, false );

 

                if ( onError ) onError( event );

 

                scope.manager.itemError( url );

                scope.manager.itemEnd( url );

 

            }

 

            //设置下载监听和错误监听

            image.addEventListener( 'load', onImageLoad, false );

            image.addEventListener( 'error', onImageError, false );

 

            //如果url中有没有图片数据

            if ( url.substr( 0, 5 ) !== 'data:' ) {

                //设置图片可以跨域访问

                if ( this.crossOrigin !== undefined ) image.crossOrigin = this.crossOrigin;

 

            }

            //开始下载计数和回调

            scope.manager.itemStart( url );

            //开始下载

            image.src = url;

            //返回图片

            return image;

 

        },

        //设置跨域

        setCrossOrigin: function ( value ) {

 

            this.crossOrigin = value;

            return this;

 

        },

        //设置路径

        setPath: function ( value ) {

 

            this.path = value;

            return this;

 

        }

 

    } );