THREE.Points image sprites have transparency wrong and raycasting is not consistent

问题

I have switched from using THREE.Sprite to THREE.Points for my POI, but now I am facing two issues. As you can see on the screenshots, each point has a unique png image as a texture, but now a transparent part of the point is covering other points. Main object could be seen through the points, but other points are occluded. And the other problem, raycasting for mouseover (the green colored point) works weird. When a scene is loaded and no camera move has been done, it works ok. But when I zoom in or out the camera, then raycasting is catching smaller or even bigger area of the point, than it should.

Here is my code for creating single point:

var spriteMap = new THREE.TextureLoader().load(`imgs/sprites/spr${index+1}.png`);

var spriteMaterial = new THREE.PointsMaterial({
        map: spriteMap
});

spriteMaterial.sizeAttenuation = false;
spriteMaterial.size = 60;
spriteMaterial.transparent = true;

var dotGeometry = new THREE.Geometry();
dotGeometry.vertices.push(new THREE.Vector3(item.x, item.y, item.z));

var sprite = new THREE.Points(dotGeometry , spriteMaterial);

来源：https://stackoverflow.com/questions/59964531/three-points-image-sprites-have-transparency-wrong-and-raycasting-is-not-consist