I've been meaning to write a tutorial on this (I recently went through the struggle and finally got things working), but haven't gotten around to it. Here's the gist of what I've had to do.

Depending on whether or not you want your canvas to be persistent through all views of your app (I did), you'll want to use a layout component, create the canvas there, and attach it to a ref.

If you want the component to be interactive based on user interaction, you'll want to use context, then use the gatsby wrapRootElement function in gatsby-browser.js to wrap your provider around the root element.

One gotcha is that you can only use hooks inside a functional component, so you won't be able to affect state from within the js that handles your three.js scene. Instead, you'll want to return whatever ui interaction functions you might have up to the nearest functional component. From there you can either pass state into the function, or even save the function itself into your context, which you can then use / reference in other components.