Using a simple 3x3.png file to extract color/opacity data from, where each of the 9 pixels represents a different color/opacity level.
The .png is supposed to be loaded onto an off-screen canvas, following which the 9 cubes are drawn in a 3x3 grid pattern.
Although it seems like it's almost working, there must be something amiss in the implementation.
<!DOCTYPE html>
<head>
<title>Rendering cubes based on pixel values from a png</title>
<style>body {margin: 0px;background-color: #99F;overflow: hidden;}</style>
<script src="js/three.min.js"></script>
</head>
<body>
<!-- Pre-loading the 3x3 png image -->
<img id='image1' src='3x3.png' onload="javascript:loaded();">
<canvas id='canvas'></canvas>
<script>
function loaded(){
var img = new Image();
img.src = document.getElementById("image1").src;
var ctx = document.getElementById("canvas").getContext("2d");
ctx.drawImage(img, 0, 0);
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
camera.position.z = 5;
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
for (ix = 0; ix < img.width; ix++) {
for (iy = 0; iy < img.height; iy++) {
// get next pixel data
var data = ctx.getImageData( ix, iy, 1, 1 ).data;
var floats = data.slice( 0, 4 ).map( function( val ) { return val / 255; });
var computedcolor = THREE.Color( floats[0], floats[1], floats[2] );
var computedopacity = floats[4];
var material = new THREE.MeshBasicMaterial( { color: computedcolor, opacity: computedopacity, side: THREE.DoubleSide } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );
cube.position.x = ix; //move the cube positions to rebuild the image using cubes instead of pixels
cube.position.y = iy;
}
}
var render = function () {
requestAnimationFrame( render );
camera.position.z = camera.position.z + .01;
renderer.render(scene, camera);
}
render();
}
</script>
</body>
</html>