Instantiate threejs objects with typescript?

Questions
, ,
3

Thank you so much!

I also have some custom geometries which extends BufferGeometry, do you have a suggestion there too how I could resolve the issue?

class CustomGeometry extends BufferGeometry{


...
    // build geometry
    this.setAttribute("position", new Float32BufferAttribute(verticesArray, 3));
    this.setAttribute("uv", new Float32BufferAttribute(uvArray, 2));
...
}

And how I try to use it:

const materialFront = new THREE.MeshPhysicalMaterial({
  color: new THREE.Color("red"),
  ...
});
const materialSide = new THREE.MeshPhysicalMaterial({
  color: new THREE.Color("blue"),
  ...
});


const CustomMesh = () => {
  const geom = useMemo(() => {
    const geom = new CustomGeometry();

   //some faces need different materials
    geom.groups.forEach((g, idx) => {
      if (idx === 1) g.materialIndex = 1;
      else g.materialIndex = 0;
    });

    return geom;
  }, []);

  return (
    <group>
      <mesh
        material={[materialFront, materialSide]} 
         geometry={geom}
      >
      </mesh>
    </group>
  );
};

This custom geometry retrieves error:

CustomGeometry.js:15 Uncaught TypeError: Class extends value undefined is not a constructor or null

And I think I will also have issues with material declaration like I did above (tried to avoid to create it as a component, because later on I want it to be reusable in order to save some memory.