Question:

I'm facing a issue to render cubes using CanvasRenderer, depends the camera position any cubes lost same parts and show a part of face other cube, as the below images:

In this example, there are two cubes, when the camera in front there aren't problem:

<img alt="enter image description here" class="b-lazy" data-src="https://i.stack.imgur.com/PXFBR.png" data-original="https://i.stack.imgur.com/PXFBR.png" src="https://etrip.eimg.top/images/2019/05/07/timg.gif" />

But, when I change de camera:

<img alt="enter image description here" class="b-lazy" data-src="https://i.stack.imgur.com/ZkmdM.png" data-original="https://i.stack.imgur.com/ZkmdM.png" src="https://etrip.eimg.top/images/2019/05/07/timg.gif" />

To render I use a array of materials, this is one of:

new THREE.MeshLambertMaterial({ color: 0x006600, ambient: 0xffff00, side: THREE.DoubleSide, overdraw: 0.5 }),

What you are seeing is an artifact of CanvasRenderer. The best you can do is tessellate your geometry. For example,

var geometry = new THREE.BoxGeometry( 100, 100, 100, 4, 4, 4 );

Or better yet, switch to WebGLRenderer.

three.js r.70