Referencing a model ref from the parent component

[alexlee22]

Hello!

I am trying to duplicate a Three.js example into r3f and I am having a bit of trouble in structuring the components:

• I am not sure how to pass three.js variables as props into child components for example I want to pass the mesh rep in Model.js into the components Cuts and Wireframe. I have attempted to adjust the Wireframe component to reference the mesh/geometry via props but it is not successful on initial start-up. What is the best way to structure the components to reference the original? I'm aiming to rotate and transform the knot.
• I am also passing the clipping plane as props starting from the component App. Should I be assigning the three variable in a state management like Zustand, create the clipping plane as a component to reference or re-creating the clipping plane where required using a state managed variable to control the height?

Thanks for all the work on R3F, i'm having a lot of fun learning! Cheers

Code Sandbox: https://codesandbox.io/s/r3f-stencil-slice-i8kzb?file=/src/Model.js

[drcmda]

maybe this helps, uses clipping planes https://codesandbox.io/s/abracadabra-dl53j

either make some parts imperative, store them in useState or useMemo

or React.children.map through children from the parent so that you can put refs on them

or use react means to communicate the child back up to its parent (parent shares itself via context, child makes itself known in useLayoutEffect, takes itself out in the cleanup phase, the parent can act on them in useEffect, when everything's rendered.

const context = createContext()
function Parent({ children })
  const api = useState([])
  useEffect(() => {
    const [items] = api
    items.forEach( .... )
  }, [])
  return (
    <context.provider value={api} children={children} />

function Child() {
  const ref = useRef()
  const [, set] = useContext(content)
  useLayoutEffect(() => {
    set(state => [...state, ref.current])
    return () => set(state => state.splice(state.indexOf(ref.current), 1))
  }, [])
  return <mesh ref={ref} ... />

as a rule of thumb, these heavier abstractions are often not worth it. i would do that for a library. go with the simplest that suits your usecase.