Buffer overflow when adding positions to buffer geometry

[NicolasRannou]

Hello,

I'm trying to add points to a buffer geometry but somehow it doesn't work out of the box. It seems on first render it works then when adding positions I get WebGL: INVALID_VALUE: bufferSubData: buffer overflow

Code:

    const update = useCallback(self => {
        self.needsUpdate = true
        self.parent.computeBoundingSphere()
    }, []);

        <mesh
            {...props}
            ref={mesh}
        >
            <bufferGeometry
                attach="geometry">
                <bufferAttribute
                    attachObject={["attributes", "position"]}
                    array={bufferPosition}
                    itemSize={3}
                    count={bufferPosition.length / 3}
                    onUpdate={update}
                />
            </bufferGeometry>
            <meshBasicMaterial attach="material" color={'hotpink'} polygonOffset={true} polygonOffsetFactor={10} side={DoubleSide} />
        </mesh>

Is it expected? Should I use refs to update the bufferAttribute instead?

[drcmda]

i dont think you can update buffergeometry. https://threejs.org/docs/#manual/en/introduction/How-to-update-things as in, the amount of points cannot change once you have created a geometry, you can only mutate existing positions. either use a geometry with enough points, the ones you dont use remain stale, or re-make the geometry with keying.

otherwise positions have to be a floatarray.

here's an example: https://codesandbox.io/s/r3f-basic-demo-czhxx

[NicolasRannou]

Indeed that is not allowed. Thanks!