Flickering planes

I have an application with large 2D planes with textures, but I am experience some flickering problems. It is possible to see the flickering problem here (planes are withouth textures): EXAMPLE CODE Is this depth buffer (z-buffer) precision issues or something else? Is the solution to scale down everything, not to allow large planes/objects? What is the best practice? I know that z near and far also influence the precision, so setting z near to 1000 fixes the flickering in this example. The code: ``` /* * Scale = 1, no flickering. Scale = 1000, flickering. */ var scale = 1000; var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1000, 1000000); camera.position.x = 0; camera.position.y = 0; camera.position.z = 100 * scale; var renderer = new THREE.WebGLRenderer({ antialias: false }); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); var light = new THREE.AmbientLight(0xFFFFFF); scene.add(light); var material = new THREE.MeshBasicMaterial({ transparent: false, side: THREE.DoubleSide, fog: false, color: 0xFFFF00, opacity: 1.0 }); var cubeGeometry = new THREE.PlaneGeometry(50 * scale, 50 * scale, 1, 1); var cubeMesh = new THREE.Mesh(cubeGeometry, material); cubeMesh.position.set(0, 0, 1 * scale); scene.add(cubeMesh); var material = new THREE.MeshBasicMaterial({ transparent: false, side: THREE.DoubleSide, fog: false, color: 0xFF0000, opacity: 1.0 }); var cubeGeometry = new THREE.PlaneGeometry(100 * scale, 100 * scale, 1, 1); var cubeMesh = new THREE.Mesh(cubeGeometry, material); scene.add(cubeMesh); function render() { var time = Date.now() * 0.5; camera.position.x = Math.sin(time / 1000) * 150 * scale; camera.position.y = 0; camera.position.z = Math.cos(time / 1000) * 150 * scale; camera.lookAt(scene.position); renderer.render(scene, camera); requestAnimationFrame(render); } render(); ```