three.js 源码分析之ImageLoader

    技术2026-01-10  11

    /**

         * @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;

     

            }

     

        } );

    Processed: 0.015, SQL: 9