THREE.Geometry() is out of date any new one?

[Myth_Xenodo]

So I am following a tutorial here for 3D paticles 3D Space Warp JavaScript Effect - Three.js Tutorial - YouTube

but there is some out of date and I don’t know how to fix it… It says that

index.html:46 Uncaught TypeError: THREE.Geometry is not a constructor
    at init (index.html:46:23)
    at index.html:75:9

And here is what the code looks like

        import * as THREE from 'three';
        import { OrbitControls } from 'https://unpkg.com/three@0.141.0/examples/jsm/controls/OrbitControls.js';

        let scene,camera,renderer,starGeo,stars;

        let windowScreen = window
        
        function init() {
            scene = new THREE.Scene()
            camera = new THREE.PerspectiveCamera(60,windowScreen.innerWidth,windowScreen.innerHeight)
            camera.position.z = 1;
            camera.rotation.x = Math.PI/2

            renderer = new THREE.WebGLRenderer();
            renderer.setSize(windowScreen.innerWidth,windowScreen.innerHeight)
            document.body.appendChild(renderer.domElement)

            starGeo = new THREE.Geometry()

            for (let i = 0; i < 6000; i++) {
                const star = new THREE.Vector3(
                    Math.random() * 600 - 300,
                    Math.random() * 600 - 300,
                    Math.random() * 600 - 300
                );
                starGeo.vertices.push(star)
            }

            let sprite = new THREE.TextureLoader().load('./star.png');
            let starMaterial = new THREE.PointsMaterial({
                color:0xaaaaaa,
                size:0.7,
                map:sprite
            })
            stars = new THREE.Points(starGeo,starMaterial)
            scene.add(stars)

            animate()

        }

        function animate() {
            renderer.render(scene,camera);
            requestAnimationFrame(animate)
        }

        init()

[Chaser_Code]

The deprecated Geometry class has been removed. Maybe use new THREE.BufferGeometry()

Migration Guide · mrdoob/three.js Wiki

[Myth_Xenodo]

I didit with bufferGeometry but this is now the problem

            starGeo = new THREE.BufferGeometry()

index.html:54 Uncaught TypeError: Cannot read properties of undefined (reading 'push')

Please guide me asap haha I wanna done this before the sun downs.
@Chaser_Code

[Mugen87]

@Chaser_Code

The deprecated Geometry class has been removed. Maybe use new THREE.BufferGeometry()

The code of the OP does not work with previous three.js version since THREE.Geometry has been moved out of the core since r125.

THREE.Geometry will be removed from core with r125

The upcoming release r125 will contain a major, potentially breaking change. The class THREE.Geometry will be no longer part of the core but moved to jsm/deprecated/Geometry.js. It will only be available as an ES6 module and not as a global script. What does that mean for me? If you are loading your assets with one of the official loaders like GLTFLoader or procedurally generate geometry data with THREE.BufferGeometry, this change won’t affect you. If you are using THREE.Geometry, please note …

r141 just deleted the deprecated file in examples/jsm/deprecated/Geometry.js.

[Mugen87]

@Myth_Xenodo

Please guide me asap haha I wanna done this before the sun downs.

THREE.BufferGeometry has no vertices property. Write your code like so:

const vertices = [];

for (let i = 0; i < 6000; i++) {
    const x = Math.random() * 600 - 300;
    const y = Math.random() * 600 - 300;
    const z = Math.random() * 600 - 300;

    vertices.push(x, y, z);
}
starGeo.setAttribute('position', new THREE.Float32BufferAttribute(vertices, 3));

[Chaser_Code]

Also need add camera near and far.
camera = new THREE.PerspectiveCamera(60,windowScreen.innerWidth,windowScreen.innerHeight);
to
camera = new THREE.PerspectiveCamera(60,windowScreen.innerWidth,windowScreen.innerHeight, 1, 1000 );
Full code:

import * as THREE from 'three';
        import { OrbitControls } from 'https://unpkg.com/three@0.141.0/examples/jsm/controls/OrbitControls.js';

        let scene,camera,renderer,starGeo,stars;

        let windowScreen = window

        function init() {
            scene = new THREE.Scene()
            camera = new THREE.PerspectiveCamera(60,windowScreen.innerWidth,windowScreen.innerHeight, 1, 1000 );
            camera.position.z = 1;
            camera.rotation.x = Math.PI/2

            renderer = new THREE.WebGLRenderer();
            renderer.setSize(windowScreen.innerWidth,windowScreen.innerHeight)
            document.body.appendChild(renderer.domElement)

            starGeo = new THREE.BufferGeometry ()
            const vertices = [];
            for (let i = 0; i < 6000; i++) {
            const x = Math.random() * 600 - 300;
            const y = Math.random() * 600 - 300;
            const z = Math.random() * 600 - 300;
            vertices.push(x, y, z);
            }
            starGeo.setAttribute('position', new THREE.Float32BufferAttribute(vertices, 3));
            let sprite = new THREE.TextureLoader().load('./star.png');
            let starMaterial = new THREE.PointsMaterial({
                color:0xaaaaaa,
                size:0.7,
                map:sprite
            })
            stars = new THREE.Points(starGeo,starMaterial)
            scene.add(stars)

            animate()

        }

        function animate() {
            renderer.render(scene,camera);
            requestAnimationFrame(animate)
        }

        init()

[akharabi]

Hi, I need to add velocity as well such as:

                rain.velocity ={};
                rain.velocity = 0;

Should I do another array or should I create an object and then push the whole thing?
Thanks,