提交 71b91cff 编写于 作者: M Mugen87

TGALoader: Refactoring

上级 c78b6b60
......@@ -10,502 +10,523 @@ THREE.TGALoader = function ( manager ) {
};
THREE.TGALoader.prototype.load = function ( url, onLoad, onProgress, onError ) {
THREE.TGALoader.prototype = {
var scope = this;
constructor: THREE.TGALoader,
var texture = new THREE.Texture();
load: function ( url, onLoad, onProgress, onError ) {
var loader = new THREE.FileLoader( this.manager );
loader.setResponseType( 'arraybuffer' );
var scope = this;
loader.load( url, function ( buffer ) {
var texture = new THREE.Texture();
texture.image = scope.parse( buffer );
texture.needsUpdate = true;
var loader = new THREE.FileLoader( this.manager );
loader.setResponseType( 'arraybuffer' );
if ( onLoad !== undefined ) {
loader.load( url, function ( buffer ) {
onLoad( texture );
texture.image = scope.parse( buffer );
texture.needsUpdate = true;
}
if ( onLoad !== undefined ) {
}, onProgress, onError );
onLoad( texture );
return texture;
}
};
}, onProgress, onError );
// reference from vthibault, https://github.com/vthibault/roBrowser/blob/master/src/Loaders/Targa.js
THREE.TGALoader.prototype.parse = function ( buffer ) {
// TGA Constants
var TGA_TYPE_NO_DATA = 0,
TGA_TYPE_INDEXED = 1,
TGA_TYPE_RGB = 2,
TGA_TYPE_GREY = 3,
TGA_TYPE_RLE_INDEXED = 9,
TGA_TYPE_RLE_RGB = 10,
TGA_TYPE_RLE_GREY = 11,
TGA_ORIGIN_MASK = 0x30,
TGA_ORIGIN_SHIFT = 0x04,
TGA_ORIGIN_BL = 0x00,
TGA_ORIGIN_BR = 0x01,
TGA_ORIGIN_UL = 0x02,
TGA_ORIGIN_UR = 0x03;
if ( buffer.length < 19 )
console.error( 'THREE.TGALoader.parse: Not enough data to contain header.' );
var content = new Uint8Array( buffer ),
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 ++ ]
};
function tgaCheckHeader( header ) {
switch ( header.image_type ) {
// Check indexed type
case TGA_TYPE_INDEXED:
case TGA_TYPE_RLE_INDEXED:
if ( header.colormap_length > 256 || header.colormap_size !== 24 || header.colormap_type !== 1 ) {
console.error( 'THREE.TGALoader.parse.tgaCheckHeader: Invalid type colormap data for indexed type' );
return texture;
}
break;
},
// Check colormap type
case TGA_TYPE_RGB:
case TGA_TYPE_GREY:
case TGA_TYPE_RLE_RGB:
case TGA_TYPE_RLE_GREY:
if ( header.colormap_type ) {
parse: function ( buffer ) {
console.error( 'THREE.TGALoader.parse.tgaCheckHeader: Invalid type colormap data for colormap type' );
// reference from vthibault, https://github.com/vthibault/roBrowser/blob/master/src/Loaders/Targa.js
}
break;
function tgaCheckHeader( header ) {
// What the need of a file without data ?
case TGA_TYPE_NO_DATA:
console.error( 'THREE.TGALoader.parse.tgaCheckHeader: No data' );
switch ( header.image_type ) {
// Invalid type ?
default:
console.error( 'THREE.TGALoader.parse.tgaCheckHeader: Invalid type " ' + header.image_type + '"' );
// check indexed type
}
case TGA_TYPE_INDEXED:
case TGA_TYPE_RLE_INDEXED:
if ( header.colormap_length > 256 || header.colormap_size !== 24 || header.colormap_type !== 1 ) {
// Check image width and height
if ( header.width <= 0 || header.height <= 0 ) {
console.error( 'THREE.TGALoader: Invalid type colormap data for indexed type.' );
console.error( 'THREE.TGALoader.parse.tgaCheckHeader: Invalid image size' );
}
break;
}
// check colormap type
// Check image pixel size
if ( header.pixel_size !== 8 &&
header.pixel_size !== 16 &&
header.pixel_size !== 24 &&
header.pixel_size !== 32 ) {
case TGA_TYPE_RGB:
case TGA_TYPE_GREY:
case TGA_TYPE_RLE_RGB:
case TGA_TYPE_RLE_GREY:
if ( header.colormap_type ) {
console.error( 'THREE.TGALoader.parse.tgaCheckHeader: Invalid pixel size "' + header.pixel_size + '"' );
console.error( 'THREE.TGALoader: Invalid type colormap data for colormap type.' );
}
}
break;
}
// What the need of a file without data ?
// Check tga if it is valid format
tgaCheckHeader( header );
case TGA_TYPE_NO_DATA:
console.error( 'THREE.TGALoader: No data.' );
if ( header.id_length + offset > buffer.length ) {
// Invalid type ?
console.error( 'THREE.TGALoader.parse: No data' );
default:
console.error( 'THREE.TGALoader: Invalid type "%s".', header.image_type );
}
}
// check image width and height
if ( header.width <= 0 || header.height <= 0 ) {
// Skip the needn't data
offset += header.id_length;
console.error( 'THREE.TGALoader: Invalid image size.' );
// Get targa information about RLE compression and palette
var use_rle = false,
use_pal = false,
use_grey = false;
}
switch ( header.image_type ) {
// check image pixel size
case TGA_TYPE_RLE_INDEXED:
use_rle = true;
use_pal = true;
break;
if ( header.pixel_size !== 8 && header.pixel_size !== 16 &&
header.pixel_size !== 24 && header.pixel_size !== 32 ) {
case TGA_TYPE_INDEXED:
use_pal = true;
break;
console.error( 'THREE.TGALoader: Invalid pixel size "%s".', header.pixel_size );
case TGA_TYPE_RLE_RGB:
use_rle = true;
break;
}
case TGA_TYPE_RGB:
break;
}
case TGA_TYPE_RLE_GREY:
use_rle = true;
use_grey = true;
break;
// Parse tga image buffer
function tgaParse( use_rle, use_pal, header, offset, data ) {
case TGA_TYPE_GREY:
use_grey = true;
break;
var pixel_data,
pixel_size,
pixel_total,
palettes;
}
pixel_size = header.pixel_size >> 3;
pixel_total = header.width * header.height * pixel_size;
// Parse tga image buffer
function tgaParse( use_rle, use_pal, header, offset, data ) {
// read palettes
var pixel_data,
pixel_size,
pixel_total,
palettes;
if ( use_pal ) {
pixel_size = header.pixel_size >> 3;
pixel_total = header.width * header.height * pixel_size;
palettes = data.subarray( offset, offset += header.colormap_length * ( header.colormap_size >> 3 ) );
// Read palettes
if ( use_pal ) {
}
palettes = data.subarray( offset, offset += header.colormap_length * ( header.colormap_size >> 3 ) );
// read RLE
}
if ( use_rle ) {
// Read RLE
if ( use_rle ) {
pixel_data = new Uint8Array( pixel_total );
pixel_data = new Uint8Array( pixel_total );
var c, count, i;
var shift = 0;
var pixels = new Uint8Array( pixel_size );
var c, count, i;
var shift = 0;
var pixels = new Uint8Array( pixel_size );
while ( shift < pixel_total ) {
while ( shift < pixel_total ) {
c = data[ offset ++ ];
count = ( c & 0x7f ) + 1;
c = data[ offset ++ ];
count = ( c & 0x7f ) + 1;
// RLE pixels
// RLE pixels.
if ( c & 0x80 ) {
if ( c & 0x80 ) {
// Bind pixel tmp array
for ( i = 0; i < pixel_size; ++ i ) {
// bind pixel tmp array
pixels[ i ] = data[ offset ++ ];
for ( i = 0; i < pixel_size; ++ i ) {
}
pixels[ i ] = data[ offset ++ ];
// Copy pixel array
for ( i = 0; i < count; ++ i ) {
}
pixel_data.set( pixels, shift + i * pixel_size );
// copy pixel array
}
for ( i = 0; i < count; ++ i ) {
shift += pixel_size * count;
pixel_data.set( pixels, shift + i * pixel_size );
} else {
}
// Raw pixels.
count *= pixel_size;
for ( i = 0; i < count; ++ i ) {
shift += pixel_size * count;
pixel_data[ shift + i ] = data[ offset ++ ];
} else {
// raw pixels
count *= pixel_size;
for ( i = 0; i < count; ++ i ) {
pixel_data[ shift + i ] = data[ offset ++ ];
}
shift += count;
}
shift += count;
}
}
} else {
} else {
// raw pixels
// RAW Pixels
pixel_data = data.subarray(
offset, offset += ( use_pal ? header.width * header.height : pixel_total )
);
pixel_data = data.subarray(
offset, offset += ( use_pal ? header.width * header.height : pixel_total )
);
}
}
return {
pixel_data: pixel_data,
palettes: palettes
};
return {
pixel_data: pixel_data,
palettes: palettes
};
}
}
function tgaGetImageData8bits( imageData, y_start, y_step, y_end, x_start, x_step, x_end, image, palettes ) {
function tgaGetImageData8bits( imageData, y_start, y_step, y_end, x_start, x_step, x_end, image, palettes ) {
var colormap = palettes;
var color, i = 0, x, y;
var width = header.width;
var colormap = palettes;
var color, i = 0, x, y;
var width = header.width;
for ( y = y_start; y !== y_end; y += y_step ) {
for ( y = y_start; y !== y_end; y += y_step ) {
for ( x = x_start; x !== x_end; x += x_step, i ++ ) {
for ( x = x_start; x !== x_end; x += x_step, i ++ ) {
color = image[ i ];
imageData[ ( x + width * y ) * 4 + 3 ] = 255;
imageData[ ( x + width * y ) * 4 + 2 ] = colormap[ ( color * 3 ) + 0 ];
imageData[ ( x + width * y ) * 4 + 1 ] = colormap[ ( color * 3 ) + 1 ];
imageData[ ( x + width * y ) * 4 + 0 ] = colormap[ ( color * 3 ) + 2 ];
color = image[ i ];
imageData[ ( x + width * y ) * 4 + 3 ] = 255;
imageData[ ( x + width * y ) * 4 + 2 ] = colormap[ ( color * 3 ) + 0 ];
imageData[ ( x + width * y ) * 4 + 1 ] = colormap[ ( color * 3 ) + 1 ];
imageData[ ( x + width * y ) * 4 + 0 ] = colormap[ ( color * 3 ) + 2 ];
}
}
}
return imageData;
return imageData;
}
}
function tgaGetImageData16bits( imageData, y_start, y_step, y_end, x_start, x_step, x_end, image ) {
function tgaGetImageData16bits( imageData, y_start, y_step, y_end, x_start, x_step, x_end, image ) {
var color, i = 0, x, y;
var width = header.width;
var color, i = 0, x, y;
var width = header.width;
for ( y = y_start; y !== y_end; y += y_step ) {
for ( y = y_start; y !== y_end; y += y_step ) {
for ( x = x_start; x !== x_end; x += x_step, i += 2 ) {
for ( x = x_start; x !== x_end; x += x_step, i += 2 ) {
color = image[ i + 0 ] + ( image[ i + 1 ] << 8 ); // Inversed ?
imageData[ ( x + width * y ) * 4 + 0 ] = ( color & 0x7C00 ) >> 7;
imageData[ ( x + width * y ) * 4 + 1 ] = ( color & 0x03E0 ) >> 2;
imageData[ ( x + width * y ) * 4 + 2 ] = ( color & 0x001F ) >> 3;
imageData[ ( x + width * y ) * 4 + 3 ] = ( color & 0x8000 ) ? 0 : 255;
color = image[ i + 0 ] + ( image[ i + 1 ] << 8 ); // Inversed ?
imageData[ ( x + width * y ) * 4 + 0 ] = ( color & 0x7C00 ) >> 7;
imageData[ ( x + width * y ) * 4 + 1 ] = ( color & 0x03E0 ) >> 2;
imageData[ ( x + width * y ) * 4 + 2 ] = ( color & 0x001F ) >> 3;
imageData[ ( x + width * y ) * 4 + 3 ] = ( color & 0x8000 ) ? 0 : 255;
}
}
}
return imageData;
return imageData;
}
}
function tgaGetImageData24bits( imageData, y_start, y_step, y_end, x_start, x_step, x_end, image ) {
function tgaGetImageData24bits( imageData, y_start, y_step, y_end, x_start, x_step, x_end, image ) {
var i = 0, x, y;
var width = header.width;
var i = 0, x, y;
var width = header.width;
for ( y = y_start; y !== y_end; y += y_step ) {
for ( y = y_start; y !== y_end; y += y_step ) {
for ( x = x_start; x !== x_end; x += x_step, i += 3 ) {
for ( x = x_start; x !== x_end; x += x_step, i += 3 ) {
imageData[ ( x + width * y ) * 4 + 3 ] = 255;
imageData[ ( x + width * y ) * 4 + 2 ] = image[ i + 0 ];
imageData[ ( x + width * y ) * 4 + 1 ] = image[ i + 1 ];
imageData[ ( x + width * y ) * 4 + 0 ] = image[ i + 2 ];
imageData[ ( x + width * y ) * 4 + 3 ] = 255;
imageData[ ( x + width * y ) * 4 + 2 ] = image[ i + 0 ];
imageData[ ( x + width * y ) * 4 + 1 ] = image[ i + 1 ];
imageData[ ( x + width * y ) * 4 + 0 ] = image[ i + 2 ];
}
}
}
return imageData;
return imageData;
}
}
function tgaGetImageData32bits( imageData, y_start, y_step, y_end, x_start, x_step, x_end, image ) {
function tgaGetImageData32bits( imageData, y_start, y_step, y_end, x_start, x_step, x_end, image ) {
var i = 0, x, y;
var width = header.width;
var i = 0, x, y;
var width = header.width;
for ( y = y_start; y !== y_end; y += y_step ) {
for ( y = y_start; y !== y_end; y += y_step ) {
for ( x = x_start; x !== x_end; x += x_step, i += 4 ) {
for ( x = x_start; x !== x_end; x += x_step, i += 4 ) {
imageData[ ( x + width * y ) * 4 + 2 ] = image[ i + 0 ];
imageData[ ( x + width * y ) * 4 + 1 ] = image[ i + 1 ];
imageData[ ( x + width * y ) * 4 + 0 ] = image[ i + 2 ];
imageData[ ( x + width * y ) * 4 + 3 ] = image[ i + 3 ];
imageData[ ( x + width * y ) * 4 + 2 ] = image[ i + 0 ];
imageData[ ( x + width * y ) * 4 + 1 ] = image[ i + 1 ];
imageData[ ( x + width * y ) * 4 + 0 ] = image[ i + 2 ];
imageData[ ( x + width * y ) * 4 + 3 ] = image[ i + 3 ];
}
}
return imageData;
}
return imageData;
function tgaGetImageDataGrey8bits( imageData, y_start, y_step, y_end, x_start, x_step, x_end, image ) {
}
var color, i = 0, x, y;
var width = header.width;
function tgaGetImageDataGrey8bits( imageData, y_start, y_step, y_end, x_start, x_step, x_end, image ) {
for ( y = y_start; y !== y_end; y += y_step ) {
var color, i = 0, x, y;
var width = header.width;
for ( x = x_start; x !== x_end; x += x_step, i ++ ) {
for ( y = y_start; y !== y_end; y += y_step ) {
color = image[ i ];
imageData[ ( x + width * y ) * 4 + 0 ] = color;
imageData[ ( x + width * y ) * 4 + 1 ] = color;
imageData[ ( x + width * y ) * 4 + 2 ] = color;
imageData[ ( x + width * y ) * 4 + 3 ] = 255;
for ( x = x_start; x !== x_end; x += x_step, i ++ ) {
color = image[ i ];
imageData[ ( x + width * y ) * 4 + 0 ] = color;
imageData[ ( x + width * y ) * 4 + 1 ] = color;
imageData[ ( x + width * y ) * 4 + 2 ] = color;
imageData[ ( x + width * y ) * 4 + 3 ] = 255;
}
}
}
return imageData;
return imageData;
}
}
function tgaGetImageDataGrey16bits( imageData, y_start, y_step, y_end, x_start, x_step, x_end, image ) {
function tgaGetImageDataGrey16bits( imageData, y_start, y_step, y_end, x_start, x_step, x_end, image ) {
var i = 0, x, y;
var width = header.width;
var i = 0, x, y;
var width = header.width;
for ( y = y_start; y !== y_end; y += y_step ) {
for ( y = y_start; y !== y_end; y += y_step ) {
for ( x = x_start; x !== x_end; x += x_step, i += 2 ) {
for ( x = x_start; x !== x_end; x += x_step, i += 2 ) {
imageData[ ( x + width * y ) * 4 + 0 ] = image[ i + 0 ];
imageData[ ( x + width * y ) * 4 + 1 ] = image[ i + 0 ];
imageData[ ( x + width * y ) * 4 + 2 ] = image[ i + 0 ];
imageData[ ( x + width * y ) * 4 + 3 ] = image[ i + 1 ];
imageData[ ( x + width * y ) * 4 + 0 ] = image[ i + 0 ];
imageData[ ( x + width * y ) * 4 + 1 ] = image[ i + 0 ];
imageData[ ( x + width * y ) * 4 + 2 ] = image[ i + 0 ];
imageData[ ( x + width * y ) * 4 + 3 ] = image[ i + 1 ];
}
}
}
return imageData;
return imageData;
}
}
function getTgaRGBA( data, width, height, image, palette ) {
var x_start,
y_start,
x_step,
y_step,
x_end,
y_end;
switch ( ( header.flags & TGA_ORIGIN_MASK ) >> TGA_ORIGIN_SHIFT ) {
default:
case TGA_ORIGIN_UL:
x_start = 0;
x_step = 1;
x_end = width;
y_start = 0;
y_step = 1;
y_end = height;
break;
case TGA_ORIGIN_BL:
x_start = 0;
x_step = 1;
x_end = width;
y_start = height - 1;
y_step = - 1;
y_end = - 1;
break;
case TGA_ORIGIN_UR:
x_start = width - 1;
x_step = - 1;
x_end = - 1;
y_start = 0;
y_step = 1;
y_end = height;
break;
case TGA_ORIGIN_BR:
x_start = width - 1;
x_step = - 1;
x_end = - 1;
y_start = height - 1;
y_step = - 1;
y_end = - 1;
break;
function getTgaRGBA( data, width, height, image, palette ) {
}
var x_start,
y_start,
x_step,
y_step,
x_end,
y_end;
if ( use_grey ) {
switch ( ( header.flags & TGA_ORIGIN_MASK ) >> TGA_ORIGIN_SHIFT ) {
default:
case TGA_ORIGIN_UL:
x_start = 0;
x_step = 1;
x_end = width;
y_start = 0;
y_step = 1;
y_end = height;
break;
switch ( header.pixel_size ) {
case 8:
tgaGetImageDataGrey8bits( data, y_start, y_step, y_end, x_start, x_step, x_end, image );
case TGA_ORIGIN_BL:
x_start = 0;
x_step = 1;
x_end = width;
y_start = height - 1;
y_step = - 1;
y_end = - 1;
break;
case 16:
tgaGetImageDataGrey16bits( data, y_start, y_step, y_end, x_start, x_step, x_end, image );
case TGA_ORIGIN_UR:
x_start = width - 1;
x_step = - 1;
x_end = - 1;
y_start = 0;
y_step = 1;
y_end = height;
break;
default:
console.error( 'THREE.TGALoader.parse.getTgaRGBA: not support this format' );
case TGA_ORIGIN_BR:
x_start = width - 1;
x_step = - 1;
x_end = - 1;
y_start = height - 1;
y_step = - 1;
y_end = - 1;
break;
}
if ( use_grey ) {
switch ( header.pixel_size ) {
case 8:
tgaGetImageDataGrey8bits( data, y_start, y_step, y_end, x_start, x_step, x_end, image );
break;
case 16:
tgaGetImageDataGrey16bits( data, y_start, y_step, y_end, x_start, x_step, x_end, image );
break;
default:
console.error( 'THREE.TGALoader: Format not supported.' );
break;
}
} else {
switch ( header.pixel_size ) {
case 8:
tgaGetImageData8bits( data, y_start, y_step, y_end, x_start, x_step, x_end, image, palette );
break;
case 16:
tgaGetImageData16bits( data, y_start, y_step, y_end, x_start, x_step, x_end, image );
break;
case 24:
tgaGetImageData24bits( data, y_start, y_step, y_end, x_start, x_step, x_end, image );
break;
case 32:
tgaGetImageData32bits( data, y_start, y_step, y_end, x_start, x_step, x_end, image );
break;
default:
console.error( 'THREE.TGALoader: Format not supported.' );
break;
}
}
// Load image data according to specific method
// var func = 'tgaGetImageData' + (use_grey ? 'Grey' : '') + (header.pixel_size) + 'bits';
// func(data, y_start, y_step, y_end, x_start, x_step, x_end, width, image, palette );
return data;
}
// TGA constants
var TGA_TYPE_NO_DATA = 0,
TGA_TYPE_INDEXED = 1,
TGA_TYPE_RGB = 2,
TGA_TYPE_GREY = 3,
TGA_TYPE_RLE_INDEXED = 9,
TGA_TYPE_RLE_RGB = 10,
TGA_TYPE_RLE_GREY = 11,
TGA_ORIGIN_MASK = 0x30,
TGA_ORIGIN_SHIFT = 0x04,
TGA_ORIGIN_BL = 0x00,
TGA_ORIGIN_BR = 0x01,
TGA_ORIGIN_UL = 0x02,
TGA_ORIGIN_UR = 0x03;
if ( buffer.length < 19 ) console.error( 'THREE.TGALoader: Not enough data to contain header.' );
var content = new Uint8Array( buffer ),
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 ++ ]
};
// check tga if it is valid format
tgaCheckHeader( header );
if ( header.id_length + offset > buffer.length ) {
console.error( 'THREE.TGALoader: No data.' );
}
} else {
// skip the needn't data
offset += header.id_length;
switch ( header.pixel_size ) {
case 8:
tgaGetImageData8bits( data, y_start, y_step, y_end, x_start, x_step, x_end, image, palette );
// get targa information about RLE compression and palette
var use_rle = false,
use_pal = false,
use_grey = false;
switch ( header.image_type ) {
case TGA_TYPE_RLE_INDEXED:
use_rle = true;
use_pal = true;
break;
case 16:
tgaGetImageData16bits( data, y_start, y_step, y_end, x_start, x_step, x_end, image );
case TGA_TYPE_INDEXED:
use_pal = true;
break;
case 24:
tgaGetImageData24bits( data, y_start, y_step, y_end, x_start, x_step, x_end, image );
case TGA_TYPE_RLE_RGB:
use_rle = true;
break;
case 32:
tgaGetImageData32bits( data, y_start, y_step, y_end, x_start, x_step, x_end, image );
case TGA_TYPE_RGB:
break;
default:
console.error( 'THREE.TGALoader.parse.getTgaRGBA: not support this format' );
case TGA_TYPE_RLE_GREY:
use_rle = true;
use_grey = true;
break;
}
}
case TGA_TYPE_GREY:
use_grey = true;
break;
// Load image data according to specific method
// var func = 'tgaGetImageData' + (use_grey ? 'Grey' : '') + (header.pixel_size) + 'bits';
// func(data, y_start, y_step, y_end, x_start, x_step, x_end, width, image, palette );
return data;
}
}
//
var canvas = document.createElement( 'canvas' );
canvas.width = header.width;
canvas.height = header.height;
var canvas = document.createElement( 'canvas' );
canvas.width = header.width;
canvas.height = header.height;
var context = canvas.getContext( '2d' );
var imageData = context.createImageData( header.width, header.height );
var context = canvas.getContext( '2d' );
var imageData = context.createImageData( header.width, header.height );
var result = tgaParse( use_rle, use_pal, header, offset, content );
var rgbaData = getTgaRGBA( imageData.data, header.width, header.height, result.pixel_data, result.palettes );
var result = tgaParse( use_rle, use_pal, header, offset, content );
var rgbaData = getTgaRGBA( imageData.data, header.width, header.height, result.pixel_data, result.palettes );
context.putImageData( imageData, 0, 0 );
context.putImageData( imageData, 0, 0 );
return canvas;
return canvas;
}
};
......@@ -2,30 +2,41 @@
<!--
@author Daosheng Mu / https://github.com/DaoshengMu/
-->
<html>
<html lang="en">
<head>
<title>three.js webgl - materials - tga texture</title>
<title>three.js webgl - materials - TGA texture</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
color: #000;
background:#777;
padding:0;
margin:0;
overflow:hidden;
}
#info {
position: absolute;
top: 0px;
width: 100%;
color: #ffffff;
padding: 5px;
font-family:Monospace;
font-size:13px;
text-align:center;
}
background-color: #fff;
margin: 0px;
padding: 0px;
overflow: hidden;
a {
color: #ffffff;
}
</style>
</head>
<body>
<div id="info">
<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - tga texture example
<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - TGA texture
</div>
<script src="../build/three.js"></script>
<script src="js/controls/OrbitControls.js"></script>
<script src="js/loaders/TGALoader.js"></script>
<script src="js/Detector.js"></script>
......@@ -35,55 +46,39 @@
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
var SCREEN_WIDTH = window.innerWidth;
var SCREEN_HEIGHT = window.innerHeight;
var container, stats;
var camera, scene, renderer;
var mouseX = 0, mouseY = 0;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
var camera, scene, renderer, stats;
init();
animate();
function init() {
container = document.createElement( 'div' );
var container = document.createElement( 'div' );
document.body.appendChild( container );
renderer = new THREE.WebGLRenderer( { antialias: true } );
camera = new THREE.PerspectiveCamera( 35, SCREEN_WIDTH / SCREEN_HEIGHT, 10, 2000 );
camera.position.z = 200;
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 2000 );
camera.position.set( 0, 50, 250 );
scene = new THREE.Scene();
scene.add( new THREE.AmbientLight( 0xffffff, 0.4 ) );
var light = new THREE.DirectionalLight( 0xffffff, 1 );
light.position.set( 1, 1, 1 );
scene.add( light );
//
var loader = new THREE.TGALoader();
var geometry = new THREE.BoxBufferGeometry( 50, 50, 50 );
// add box 1 - grey8 texture
var texture1 = loader.load( 'textures/crate_grey8.tga' );
var texture1 = loader.load( 'textures/crate_grey8.tga' );
var material1 = new THREE.MeshPhongMaterial( { color: 0xffffff, map: texture1 } );
var geometry = new THREE.BoxGeometry( 50, 50, 50 );
var mesh1 = new THREE.Mesh( geometry, material1 );
mesh1.position.x = - 50;
scene.add( mesh1 );
// add box 2 - tga texture
var texture2 = loader.load( 'textures/crate_color8.tga' );
var texture2 = loader.load( 'textures/crate_color8.tga' );
var material2 = new THREE.MeshPhongMaterial( { color: 0xffffff, map: texture2 } );
var mesh2 = new THREE.Mesh( geometry, material2 );
......@@ -91,26 +86,43 @@
scene.add( mesh2 );
// RENDERER
//
var ambientLight = new THREE.AmbientLight( 0xffffff, 0.4 );
scene.add( ambientLight );
var light = new THREE.DirectionalLight( 0xffffff, 1 );
light.position.set( 1, 1, 1 );
scene.add( light );
//
renderer.setClearColor( 0xf2f7ff );
var controls = new THREE.OrbitControls( camera );
//
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
renderer.domElement.style.position = "relative";
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
// STATS1
//
stats = new Stats();
container.appendChild( stats.dom );
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
//
window.addEventListener( 'resize', onWindowResize, false );
}
function onDocumentMouseMove( event ) {
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
mouseX = ( event.clientX - windowHalfX );
mouseY = ( event.clientY - windowHalfY );
renderer.setSize( window.innerWidth, window.innerHeight );
}
......@@ -126,10 +138,6 @@
function render() {
camera.position.x += ( mouseX - camera.position.x ) * .05;
camera.position.y = THREE.Math.clamp( camera.position.y + ( - ( mouseY - 200 ) - camera.position.y ) * .05, 50, 1000 );
camera.lookAt( scene.position );
renderer.render( scene, camera );
}
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册