Three.js: using an image texture causes other objects to disappear

Question

I'm trying to visualize a space time cube. As a reference I take this image I found on google: http://www.intechopen.com/source/html/38305/media/image7.jpeg . Actually I managed to do it but there is a weird bug as soon as I start to use a texture for the bottom of the cube (which is a plane in my case). The things that are just above the plane are some how not always visible and the image is sometimes distorted. It is hard to explain so you might check the jfiddle out I created:

http://jsfiddle.net/fGwsB/

I am using the CanvasRenderer and load the texture as folows:

texturemat = new THREE.MeshLambertMaterial({
    side: THREE.DoubleSide,
    map: THREE.ImageUtils.loadTexture(background)});

Where background is a string containing the link to the image file.

Controls are enabled so you might need to zoom and rotate a bit for the bug to arise.

Answer 1

The "disappearing" geometry is caused by a limitation of CanvasRenderer due to the way it handles depth-sorting.

While WebGLRenderer sorts at the pixel level, CanvasRenderer sorts at the polygon level.

The best you can do is to increase the tessellation of your geometry, which you are already doing.

var geometry = new THREE.PlaneGeometry(width, height, 10, 10 );

Also, adding more points to your lines will help.

As far as the distortion goes, that is also improved by increased tessellation. See ThreeJS Cube texture strange visual.

three.js r.64