How to add a "uv2" attribute to enable ambient occlusion map?

[fnick851]

Basically, how to translate imperative code like this:

const material = new THREE.MeshStandardMaterial();
const sphere = new THREE.Mesh(new THREE.SphereGeometry(0.5, 64, 64), material);
sphere.geometry.setAttribute(
  "uv2",
  new THREE.BufferAttribute(sphere.geometry.attributes.uv.array, 2)
);
material.aoMap = doorAmbientOcclusionTexture;
material.aoMapIntensity = 1;
scene.add(sphere);

with r3f?

I tried useUpdate() but it shows setAttribute undefined.

Thanks.

[joshuaellis]

I'd probably do something like this as a translation.

const MySphere = () => {
  const [geom] = React.useState(() => {
    const geometry = new SphereBufferGeometry(0.5, 64, 64)
    geometry.setAttribute("uv2", new BufferAttribute(geometry.attributes.uv.array, 2))
    return geometry
  })

  return (
    <mesh>
      <primtive object={geom} />
      <meshStandardMaterial aoMap={doorAmbientOcclusionTexture} aoMapIntensity={1} />
    </mesh>
  )
}

There are a few ways to do this, this is just my way because I'd rather transform in one go, you could use useRef to access the geometry in useEffect as well. I've specifically used useState because I don't expect my geometry to change by an external factor. If I did, instead I would use useMemo.

[fnick851]

Thank you. Do you know what is the difference between useRef and useUpdate?

[joshuaellis]

useUpdate looks like a useLayoutEffect wrapper. So where if you wrote it with useRef you'd have to write:

const MySphere = () => {
  const geomRef = React.useRef()

  React.useLayoutEffect(() => {
     if(geomRef.current){
       geomRef.current.setAttribute("uv2", new BufferAttribute(geomRef.current.attributes.uv.array, 2))
     }
  }, [])

  return (
    <mesh>
      <sphereBufferGeometry ref={geomRef} args={[0.5, 64, 64]}  />
      <meshStandardMaterial aoMap={doorAmbientOcclusionTexture} aoMapIntensity={1} />
    </mesh>
  )
}

useUpdate extracts some of this and also calls an invalidate function, so in theory you'd only have to write this.

const MySphere = () => {
  const geomRef = useUpdate((geometry) => {
     geometry.setAttribute("uv2", new BufferAttribute(geometry.attributes.uv.array, 2))
  }, [])

  return (
    <mesh>
      <sphereBufferGeometry ref={geomRef} args={[0.5, 64, 64]}  />
      <meshStandardMaterial aoMap={doorAmbientOcclusionTexture} aoMapIntensity={1} />
    </mesh>
  )
}

If I'm honest, I've never used useUpdate.

[Devang47]

Try this method: https://github.com/jwtea/three-viewer/blob/20744c53faf7ece7ee1bd19bc593a6322f39d002/components/Shapes/Points.jsx#L7