I wrote a JavaScript function that loads an image as a texture:
var loader = new THREE.TextureLoader();
loader.load( 'textures/canvas1.png', function ( texture ) {
var geometry = new THREE.SphereGeometry( 200, 20, 20 );
var material = new THREE.MeshBasicMaterial( { map: texture, overdraw: 0.5 } );
var mesh = new THREE.Mesh( geometry, material );
group.add( mesh );
} );
This function works perfectly fine. But now, I want to load a dynamically created image map instead. This image map is generated through the following code snippet:
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
var image = context.createImageData(map_width, map_height);
var data = image.data;
var scale = 5.18;
for (var x = 0; x < map_width; x++) {
for (var y = 0; y < map_height; y++) {
var nx = x/map_width-0.5;
var ny = y/map_height-0.5;
var value = Math.abs(noise.perlin2(scale*nx, scale * ny));
value *= 256;
var cell = (x + y * map_width) * 4;
data[cell] = data[cell + 1] = data[cell + 2] = Math.pow(1.2, value);
data[cell + 3] = 255; // alpha.
}
}
I attempted to use the below piece of code (including creating a Uint8Array based on the suggestions in the comments), but all I see is a completely black sphere:
var buffer = new ArrayBuffer(data.length);
var udata = new Uint8Array(buffer);
for (var i=0; i<data.length; i++) {
udata[i] = data[i];
}
var geometry = new THREE.SphereGeometry( 200, 20, 20 );
var texture = new THREE.DataTexture(udata, map_width, map_height, THREE.RGBAFormat );
var material = new THREE.MeshBasicMaterial( { map: texture, overdraw: 0.5 } );
var mesh = new THREE.Mesh( geometry, material );
group.add( mesh );
I wonder if the data needs to be provided in a different format?