1. I have created a 4*4*4 cube, all smaller cubes are blue.
2. Depending on what is clicked on the screen, the corresponding smaller cube should change from blue to red.
I have managed to accomplish this but as more and more of the cubes are colour changed the 3d view slows to a crawl, what am I doing wrong. FYI The below code is the 'bastadised' version of your JS
Thanks
David
var renderer = false;
var cubes = [];
function generateCube( cubeId ) {
var black = new Pre3d.RGBA(0, 0, 0, 1);
var white = new Pre3d.RGBA(1, 1, 1, 1);
var screen_canvas = document.getElementById('canvas');
if (renderer == false){
renderer = new Pre3d.Renderer(screen_canvas);
for (var i = 0; i < 4; ++i) {
for (var j = 0; j < 4; ++j) {
for (var k = 0; k < 4; ++k) {
var cube = Pre3d.ShapeUtils.makeCube(0.1);
var transform = new Pre3d.Transform();
transform.translate(i - 1.5, j - 1.5, k - 1.5);
cubes.push({
shape: cube,
color: new Pre3d.RGBA(0, 0, 255, 0.40),
trans: transform});
}
}
}
try {
cubes[parseInt(cubeId)].color.setRGB(255, 0, 0);
} catch(e) {};
} else {
try {
theCube = cubes[parseInt(cubeId)]
if (theCube.color.b == 255) {
theCube.color.setRGB(255, 0, 0);
} else {
theCube.color.setRGB(0, 0, 255);
};
} catch(e) {};
}
var num_cubes = cubes.length;
var cur_white = true;
function draw() {
for (var i = 0; i < num_cubes; ++i) {
var cube = cubes[i];
renderer.fill_rgba = cube.color;
renderer.transform = cube.trans;
renderer.bufferShape(cube.shape);
}
if (cur_white) {
renderer.ctx.setFillColor(1, 1, 1, 1);
} else {
renderer.ctx.setFillColor(0, 0, 0, 1);
}
renderer.drawBackground();
renderer.drawBuffer();
renderer.emptyBuffer();
}
renderer.camera.focal_length = 10;
// Have the engine handle mouse / camera movement for us.
DemoUtils.autoCamera(renderer, 0, 0, -30, 0.40, 0.9, 0, draw);
draw();
};