THREE.JS Cube Rendering - three.js

Question

Is it possible to change some stuff around with the Three/Cube rendering?
This is a rotating cube on the Y axis.
Is it possible to keep the stuff that is on the back of the cube loaded ?
Something like this
(poor drawing ftw)
Is it also possible to remove those small white lines?
I find those pretty annoying
Code I used a very long time ago. R34 or something if i am not mistaking.
Anyone knows if this is still possible in the R65?
var camera, scene, renderer;
init();
setInterval( loop, 1000 / 60 );
function init() {
var height = 300;
var width = 300;
camera = new THREE.Camera(10, height/width,10, 1000);
scene = new THREE.Scene();
var hat_materials = [
new THREE.MeshBasicMaterial({map:ImageUtils.loadTexture('crate1.png') }),
new THREE.MeshBasicMaterial({map:ImageUtils.loadTexture('crate1.png') }),
new THREE.MeshBasicMaterial({map:ImageUtils.loadTexture('crate1.png') }),
new THREE.MeshBasicMaterial({map:ImageUtils.loadTexture('crate1.png') }),
new THREE.MeshBasicMaterial({map:ImageUtils.loadTexture('crate1.png') }),
new THREE.MeshBasicMaterial({map:ImageUtils.loadTexture('crate1.png') })
];
hat = new THREE.Mesh( new Cube(8, 8, 8, 1, 1, hat_materials), new THREE.MeshFaceMaterial());
hat.position.x = 0;
hat.position.y = -10;
hat.position.z = 0;
scene.addObject(hat);
renderer = new THREE.CanvasRenderer();
renderer.setSize( width,height);
document.getElementById("holder").appendChild(renderer.domElement);
}
var xvar = 0;
function loop() {
var speed = $("#speed").val()
xvar += Math.PI/speed
camera.target.position.x = 0;
camera.target.position.y = -11;
camera.target.position.z = 0;
camera.position.x = 0 - 100*Math.sin(xvar);
camera.position.y = 20;
camera.position.z = 0 - 100*Math.cos(xvar);
renderer.render( scene, camera );
}

Answer 1

Try making the material two sided:
var material = new THREE.MeshBasicMaterial({map:ImageUtils.loadTexture('crate1.png'),side:THREE.DoubleSide});
so you're code would be:
var camera, scene, renderer;
init();
setInterval( loop, 1000 / 60 );
function init() {
var height = 300;
var width = 300;
camera = new THREE.Camera(10, height/width,10, 1000);
scene = new THREE.Scene();
var hat_materials = [
new THREE.MeshBasicMaterial({map:ImageUtils.loadTexture('crate1.png') },side:THREE.DoubleSide),
new THREE.MeshBasicMaterial({map:ImageUtils.loadTexture('crate1.png') },side:THREE.DoubleSide),
new THREE.MeshBasicMaterial({map:ImageUtils.loadTexture('crate1.png') },side:THREE.DoubleSide),
new THREE.MeshBasicMaterial({map:ImageUtils.loadTexture('crate1.png') },side:THREE.DoubleSide),
new THREE.MeshBasicMaterial({map:ImageUtils.loadTexture('crate1.png') },side:THREE.DoubleSide),
new THREE.MeshBasicMaterial({map:ImageUtils.loadTexture('crate1.png') ,side:THREE.DoubleSide})
];
hat = new THREE.Mesh( new Cube(8, 8, 8, 1, 1, hat_materials), new THREE.MeshFaceMaterial());
hat.position.x = 0;
hat.position.y = -10;
hat.position.z = 0;
scene.addObject(hat);
renderer = new THREE.CanvasRenderer();
renderer.setSize( width,height);
document.getElementById("holder").appendChild(renderer.domElement);
}
var xvar = 0;
function loop() {
var speed = $("#speed").val()
xvar += Math.PI/speed
camera.target.position.x = 0;
camera.target.position.y = -11;
camera.target.position.z = 0;
camera.position.x = 0 - 100*Math.sin(xvar);
camera.position.y = 20;
camera.position.z = 0 - 100*Math.cos(xvar);
renderer.render( scene, camera );
}