Accessing the Needle context from the React three fiber template

How do I get access to the “Needle” component from a React three fiber component?

Looking through the needle-engine.ts file it seems to be setting globalthis[“Needle”] to a Context but if i try to use this to access the scene for example it comes in as null

Basically I want to get access to the component as described here so I can call the NT methods from React functions:

Original Post on Discord

by user 563549194137239552

You’re using the R3F template, is that right?

correct

by user 563549194137239552

The r3F template does not have a element in the HTML, it has a ‘root’ element so the instructions in the link I posted above do not apply.

by user 563549194137239552

@VRSpatialist do you have an example of an access pattern that you’d like to use and that doesn’t work?

At the very least you should be able to copy the needle-react-three-fiber folder from Core\Editor\Projects\Templates\needle-react-three-fiber~ (and the corresponding NpmDef) and extend that as you need - inside NeedleScene.ts you have full access to the Context etc.

I think the question here is “how and what should we expose from there to make it accessible from the outside as well” - would love your input on that.

.
I think you can also use
import { Context } from "@needle-tools/engine"
and then
const needleContext = Context.Current
as long as you only have one instance of it

I’m not fussy… I was trying not to copy and modify your stock source code but if I was going to modify anything it would probably be that component

by user 563549194137239552

I am currently trying to use the Context.Current as you showed above… if that should work I will keep going down that path… i am probably trying to access it before it gets set up

by user 563549194137239552

This one I mean - if you copy this (in Explorer) and the accompanying folder and modify it, if you can come up with something you like happy to incorporate it back. It’s part of the Templates section because we thought it very likely that people may want/need to extend it
image.png

I’m importing Context from engine_setup … not engine… but that’s probably what you meant

by user 563549194137239552

Thanks for the pointers! I should be able to figure something out with this info

by user 563549194137239552

Let me know how it goes!

I managed to clone the NeedleScene component and get it working with the ability to access the Needle component and get at the context and scene but in the end I decided R3F was more trouble than it was worth and didn’t bring much to the table since I need/want to do most of the logic in NT behaviours so I won’t be using r3F for this project.

by user 563549194137239552

Feel free to still share your changes here, would be curious to see in which style you ended up exposing the context

Well the NeedleScene actually creates the context so it’s pretty easy to access everything from there since it was created there. I didn’t really figure out a way to expose it - sending stuff IN to a react component seems straight forward but without ‘instances’ I don’t know how to expose properties and methods generated inside a component to other bits that are just using that component and its probably bad practice as far as React philosphy is concerned.
I could deal with grabbing it from the global store ?globalThis[‘Needle’] but a lot of the trouble i had even when i could get access to the context was knowing when the scene was loaded and valid for example. React has that weird behaviour of getting called once to render, then only getting called again if you have useRef or other helpers in your component and browsers have that weird behaviour of re-fetching things when you click them in the debugger so i might log that the scene is empty but if i print the scene graph to the log by the time i go back to look at it it’s no longer empty. That’s not a you thing - it’s just one more reason r3F is difficult to use.
Finally, the main the main parts of my app will need to live in the engine space and work with the engine components so there wasn’t going to be a lot of logic in R3F anyway.
Why did I use the r3F template in the first place? Bruno Simons made me do it! :grin:

by user 563549194137239552

Haha, that’s a good reason!
Thanks for the additional details