Three.js Depth problem

[FJGuerrero]

Has anybody any idea about what I'm doing wrong?

 

I'm using Cannon.js and the positions of the elements seem correctly placed, but the rendering order is false.

 

In the attached Image, the number 4 should be rendered before than 2 and 3.

 

 

Renderer:

//Creates the renderer            this.renderer = new THREE.WebGLRenderer();            this.renderer.setClearColor(0xff00ff);            if (window.devicePixelRatio) {                this.renderer.setPixelRatio(window.devicePixelRatio);            }            this.renderer.setSize(this.width, this.height);                        this.$wrapper.append(this.renderer.domElement);

Textures (I also tried with another kind of materials and the result was the same):

 

 

Balls:

this.ballTexture = THREE.ImageUtils.loadTexture(this.path + "ball.jpg");            this.ballGeometry = new THREE.SphereGeometry(0.11, 32, 32);            this.ballMaterial = new THREE.MeshPhongMaterial({                map: this.ballTexture,                bumpMap: this.ballTexture,                bumpScale: 0.01            });            var ball = new THREE.Mesh(this.ballGeometry, this.ballMaterial);            this.scene.add(ball);

[FJGuerrero]

Solution:

this.renderer = new THREE.WebGLRenderer({    logarithmicDepthBuffer: true});

And more polygons for the floor's plane.