ajax bufferarray three中loader的实现原理

ajax的返回数据的类型有五中，，在研究three的loader的时候，突然发现ajax返回的数据还有arrayBuffer数据类型，以前我只知道返回文本，，于是我查阅资料，总结了一下，，以下是我的总结：

responseType的值如下五中：

《1》“ ”和 "text" 字符创（默认）

《2》“arraybuffer” ArrayBuffer 对象二进制数据

《3》 “blob” blob 对象（经常用于fileReader对象读取文件的值）

《4》 “document” document 对象

《5》 “json” json对象

对于字符串的我们已经经常用了，，这节我们讲解arraybuffer：实现three的loader的原理，这里以TGALoader为例：

// content[ offset ++ ] | content[ offset ++ ] << 8, 位运算 <<的优先级高于 | ，
    // 运算过程   192 | 3 << 8 ===》 192 | 768 ，   3<<8 === 3 *Math.pow(2,8);

     var offset = 0,
        header = {
            id_length: content[ offset ++ ],
            colormap_type: content[ offset ++ ],
            image_type: content[ offset ++ ],
            colormap_index: content[ offset ++ ] | content[ offset ++ ] << 8,
            colormap_length: content[ offset ++ ] | content[ offset ++ ] << 8,
            colormap_size: content[ offset ++ ],
            origin: [
                content[ offset ++ ] | content[ offset ++ ] << 8,
                content[ offset ++ ] | content[ offset ++ ] << 8
            ],
            width: content[ offset ++ ] | content[ offset ++ ] << 8,
            height: content[ offset ++ ] | content[ offset ++ ] << 8,
            pixel_size: content[ offset ++ ],
            flags: content[ offset ++ ]
        };
     var canvas = document.createElement("canvas");
     canvas.width = header.width;
     canvas.height = header.height;
     var ctx = canvas.getContext("2d");
     var imageData = ctx.createImageData(header.width,header.height);

     // 将读取的image数据赋值给imageData

    var width = header.width;
    var i =0;
    pixel_size = header.pixel_size >> 3;
    pixel_total = header.width * header.height * pixel_size;
    //arraybuffer的截取方法返回一个新的arraybuffer

    var image = content.subarray(offset);

    for ( var y = 0; y !== header.height; y += 1 ) {
        for ( var x = 0; x !== width; x += 1, i += 4 ) {
            imageData.data[ ( x + width * y ) * 4 + 2 ] = image[ i + 0 ];
            imageData.data[ ( x + width * y ) * 4 + 1 ] = image[ i + 1 ];
            imageData.data[ ( x + width * y ) * 4 + 0 ] = image[ i + 2 ];
            imageData.data[ ( x + width * y ) * 4 + 3 ] = image[ i + 3 ];
        }
    }

    ctx.putImageData( imageData, 0, 0 );
    document.body.appendChild(canvas);