The raindrops appear when zooming in the camera

Hi there, just a simple question.
I’ve created a simple scene where raindrops fall down toward a plane, it works perfectly when opening up the page. However, raindrops disappear when you pull the camera closer at some certain angles, which make me really confused.


Above is the normal effect, while below is the abnormal case.

Below is my snippet,

<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../libs/three/three.js"></script>
    <script type="text/javascript" charset="UTF-8" src="../libs/three/controls/TrackballControls.js"></script>
</head>
<body>
<div id="three-container"></div>


<script>
    const PLANE_WIDTH = 60;
    const PLANE_HEIGHT = 40;

    function initRenderer() {
        var renderer = new THREE.WebGLRenderer();
        renderer.setClearColor(0x000000);
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.shadowMapEnabled = true;
        document.getElementById('three-container').appendChild(renderer.domElement);
        return renderer;
    }

    function initCamera() {
        var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, .5, 10000);
        scene.add(camera);
        camera.position.set(-40, 70, 30);
        camera.lookAt(new THREE.Vector3(0, 0, 0));
        return camera;
    }

    function initPlane() {
        var meshBasicMaterial = new THREE.MeshPhongMaterial({
            color: '#00ff00',
        });
        var planeGeometry = new THREE.PlaneGeometry(PLANE_WIDTH, PLANE_HEIGHT);
        var plane = new THREE.Mesh(planeGeometry, meshBasicMaterial);
        plane.rotation.x = -Math.PI / 2;
        plane.position.x = 15;
        plane.receiveShadow = true;
        scene.add(plane);
        return plane;
    }

    function initTrackballControls(camera, renderer) {
        var trackballControls = new THREE.TrackballControls(camera, renderer.domElement);
        trackballControls.rotateSpeed = 1.0;
        trackballControls.zoomSpeed = 1.2;
        trackballControls.panSpeed = 0.8;
        trackballControls.noZoom = false;
        trackballControls.noPan = false;
        trackballControls.staticMoving = true;
        trackballControls.dynamicDampingFactor = 0.3;
        trackballControls.keys = [65, 83, 68];

        return trackballControls;
    }

    function initDirectionalLight(scene) {
        var directionalLight = new THREE.DirectionalLight('#ffffff', .5);
        scene.add(directionalLight);
        return directionalLight;
    }

    // for the convenience of debugging
    function addCoordinateSystem(scene) {
        const axesHelper = new THREE.AxesHelper(40);
        scene.add(axesHelper);
    }

    function addCameraHelper(scene, camera) {
        const helper = new THREE.CameraHelper(camera);
        scene.add(helper);
        return helper;
    }

    function initRainDrops(scene) {
        const rainMaterial = new THREE.PointsMaterial({
            color: 0xff00ff,
            transparent: true,
            size: 1,
            opacity: .5,
            vertexColors: THREE.NoColors,
            blending: THREE.AdditiveBlending,
            depthWrite: false,
        });
        const rainDropGeometry = new THREE.Geometry();
        const rainDropsVertices = rainDropGeometry.vertices;
        const xRange = PLANE_WIDTH;
        const yRange = 120;
        const zRange = PLANE_HEIGHT;
        for (let i = 0; i < 20000; i++) {
            const x = Math.random() * xRange - xRange / 2 + 15;
            const y = Math.random() * yRange + 30;
            const z = Math.random() * zRange - zRange / 2;
            const dropPosition = new THREE.Vector3(x, y, z);
            rainDropsVertices.push(dropPosition);
        }
        const rainDrops = new THREE.Points(rainDropGeometry, rainMaterial);
        scene.add(rainDrops);
        return rainDrops;
    }


    const renderer = initRenderer();
    var scene = new THREE.Scene();
    const camera = initCamera();
    addCoordinateSystem(scene);
    const directionalLight = initDirectionalLight(scene);


    // act as a table
    const plane = initPlane();
    // rain drops initialization
    const rainDrops = initRainDrops(scene);

    // in order that the camera can move around
    var trackballController = initTrackballControls(camera, renderer);
    var clock = new THREE.Clock();

    var step = 0;

    function loop() {
        trackballController.update(clock.getDelta());
        renderer.render(scene, camera);

        rainDrops.geometry.vertices.forEach((v) => {
            v.y -= Math.random() * .5;
            if (v.y < -3) {
                v.y = Math.random() * 120 + 30;
            }
        });

        rainDrops.geometry.verticesNeedUpdate = true;
        requestAnimationFrame(loop);
    }

    loop();
</script>

</body>
</html>

Thanks in advance

Does it help if you add the following line of code when are creating your point cloud?

rainDrops.frustumCulled = false;

i am using the instance buffer geometry but this parameter is not helping me same scenerio i have in with i have set of planes but at certain extent the planes disappear

Can you try to increase the far parameter of your camera? Keep in mind that 3D objects outside of your view frustum are not visible.

Thanks for quick reply i am zooming in so i think far is not an issue issue is with near but it is already 0.0001 still the instanced geo gone other simple geo is there

Consider to demonstrate the issue with a live example in this case.