Updated to new version of Three and R3F- buffer attributes are broken

[leone6]

Hi all I recently updated a project from Three v135 to v141 and R3F to the latest version, but my project is broken now.

I had some custom shaders for some cubes and had attached buffer attributes to the box geometry used to make the cubes. When I console.logged the geometry in the old versions of Three & R3F, these custom buffer attributes would show under geometry -> attributes -> custom attributes. But with the new versions of Three and R3F, I only see the default attributes under geometry -> attributes. The only attributes I see are normal, position, and uv.

Did custom buffer attributes get moved somewhere else? i.e. are they no longer attached to the geometry? Or do I need to change the way I am attaching attributes?

Here is a code sample:

<boxGeometry args={[2, 2, 2]}>
<bufferAttribute
attachObject={["attributes", "vertexID"]}
array={vertexIDs}
itemSize={1}
/>
<bufferAttribute
attachObject={["attributes", "instanceID"]}
array={instanceIDs}
itemSize={1}
/>

Normally these attributes show up here when I console.log the geometry:

But now they are gone:

So, in my layout effect when I update the attributes, I get the error saying the attribute is undefined, which is breaking my project.

I tried looking in threejs version logs and couldn't find an answer anywhere. Any ideas?

[leone6]

Nevermind, I figured out by reading the updated docs.
I needed to change attachObject to just attach, as well as some other minor syntax changes that the docs explain.

attachObject={["attributes", "vertexID"]}

became

attach="attributes-vertexID"

[misterdev]

Could you please post a link to the documentation? I would be really helpful!

[meta456trader]

Hi, @misterdev
search "Unified attach API" here.
https://docs.pmnd.rs/react-three-fiber/tutorials/v8-migration-guide

<bufferGeometry>
-   <bufferAttribute attachObject={['attributes', 'position']} count={count} array={vertices} itemSize={3} />
+   <bufferAttribute attach="attributes-position" count={count} array={vertices} itemSize={3} />
</bufferGeometry>

[kagunecode]

How did you manage to do this? I've been trying to pass a custom attribute to the rawShaderMaterial but couldn't figure a way to do it. I ended up doing this instead and, even if it works, I still believe there is a fiber way to do this:

mesh.current.geometry.setAttribute( 'aRandom', new THREE.BufferAttribute(randoms, 1) );