I added grid helper to the scene but it does not look very good, as can be seen on pictures ( one picture shows the helper on the plane and the other on plane with image ). This changes slightly on zoom but it is never 100% good.
Any idea how to improve it?
Is the grid helper on the same level as the ground plane?
what do you mean by ‘same level’? I use this code to add GridHelper:
gridHelper = new THREE.GridHelper( $('#canvas').width()*2, 500 );
I mean the y-axis - try moving the grid helper a little above the level 0:
gridHelper.position.y += 0.1;
Parts of grid helper may be disappearing due to z-fighting (that may explain why the grid looks nice outside of the scene on the black background.)
(If you want the y-axis change not to be visible, but still work, you can also try
Thanks! Position change solves the problem!