Adding react three fiber objects manually to scene

[jolgau]

I would like to use react three fiber to create objects and add them manually to the scene.

For example: Let's say we have a GridHelper.jsx file which is configuring the Grid with it's defaults.

import { Grid } from "@react-three/drei";

export const defaultGridHelperConfigs = {
  name: "gridHelper",
  position: [0, -0.01, 0],

  gridSize: [10.5, 10.5],
  cellSize: 0.6,
  cellColor: "#6f6f6f",
  sectionSize: 3.3,
  sectionThickness: 1.5,
  sectionColor: "#9d4b4b",
  fadeDistance: 80,
  fadeStrength: 1,
  followCamera: false,
  infiniteGrid: true,
};

export function GridHelper() {
  return <Grid {...defaultGridHelperConfigs} />;
}

export default GridHelper;

Now, in the another file, I would like to be able to manually create it like this:

const grid = <GridHelper />;
const gridMesh = functionToTransformReactThreeFiberElementToMesh(grid);
scene.add(gridMesh);

Is there a function to transform react three fiber element to threejs Object and manually add it into the scene?
How does react three fiber dinamically turns into new THREE.Mesh() ?

[drcmda]

this is not react im afraid. you never call add/remove imperatively. the whole point of react is that you lay out the scene declaratively, it is always returned in a function, it is the outcome of state. all composition is functional:

function GridHelper({ children }) {
  return (
    <>
      <Grid ... />
      <Center top>
        {children}
      </Center>

<GridHelper>
  <mesh />

[jolgau]

Thank you!