Updating the position attribute of point not working

Trying to update the position attribute of a point, but running into some trouble, hopefully an easy fix that I am missing.

I have this code:

        this.rebarObjects.forEach((object) => {
            // Get the position attribute
            let positionAttribute = object.geometry.getAttribute('position');

            // Access the underlying Float32Array
            let p = positionAttribute.array;

            console.log('your z value is', p[2]);

            // Update the z value of the first vertex
            p[2] = 1;

            console.log("Updated position array:", p);

            // Mark the attribute as needing an update
            positionAttribute.needsUpdate = true;

            console.log("Updated attribute:", object.geometry.getAttribute('position').array);
            console.log(object);

Just trying to move the point’s Z coordinate up to 1 from 0.

When I run this code though, the point completely disappears from the scene.

Any ideas? Console.logs appear to be showing the code working, but the scene is not registering the movement.

Recording 2025-02-19 at 20.23.34

Point is initially created here:

// ✅ Create rebar geometry
    const tempDotGeo = new THREE.BufferGeometry();
    tempDotGeo.setAttribute('position', new THREE.Float32BufferAttribute([x, y, 0], 3));

    // ✅ Create rebar material
    const selectedDotMaterial = new THREE.PointsMaterial({
        size: rebarDia[barSize], // ✅ Use correct size from `rebarDia`
        map: sprite,
        transparent: true,
        color: 0xFF7F00 // ✅ Changed from 'blue' to 0xFF7F00
    });

    // ✅ Create Three.js Points object
    const tempDot = new THREE.Points(tempDotGeo, selectedDotMaterial);

    // ✅ Add to the scene
    scene.add(tempDot);
    return tempDot; // ✅ Return the new rebar object

adding the points back to the scene generates the points in the correct position, but I am still hoping to be able to just update the scene and not have to add them again.

this.rebarObjects.forEach((object) => {
            // Get the position attribute
            let positionAttribute = object.geometry.getAttribute('position');

            // Access the underlying Float32Array
            let p = positionAttribute.array;

            console.log('your z value is', p[2]);

            // Update the z value of the first vertex
            p[2] = 1;

            console.log("Updated position array:", p);

            // Mark the attribute as needing an update
            positionAttribute.needsUpdate = true;

            console.log("Updated attribute:", object.geometry.getAttribute('position').array);
            console.log(object);
            scene.add(object)

You’re doing it correctly, and you should see the result.

Make sure you’ve set .frustumCulled = false on your tempDot. It may be getting erroneously frustum culled…

If that doesn’t do it, then make sure you’re on a relatively recent threejs.

1 Like

Thanks for the reply, i have sneaking suspicion that somewhere in my code the points are getting removed in the scene prior to the updating the point position in the scene.