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

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()

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

1 Like

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

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.

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

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));
2 Likes

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()

image

1 Like