ThreeJS Load and Add Objects to Scene in useVisibleTask$()

[elfin sorrel]

I have a problem when loading 3D objects and materials to the scene. The current implementation that I have is to put everything regarding the loading of the 3D models, materials and such in the useVisibleTask$() -I now a bad idea since it blocks the main thread. Anyway, I want a way to create a 3JS scene but without freezing the entire page.

SOO, Is there a good/best practice for when working with THREEJS and QWIK?

THANK YOU

[fossil gyro]

I think threeJS is something that hasn't been explored too much yet with Qwik. If everything is super client heavy, and the necessary interaction is visibility in the viewport itself:

https://x.com/manucorporat/status/1657419808336486400

https://www.builder.io/blog/worker-multi-thread-JSX

https://www.npmjs.com/package/@builder.io/qwik-worker?activeTab=readme

this is an experimental API, but I think it could potentially help your use case if you play around with it a bit

Manu (Qwik) (@manucorporat) on X

What if you could use web workers directly from JSX? 🤯

<button
onClick$={worker$(() => expensiveStuff())}

Run in web worker!
</button>

Twitter · May 13, 2023, 4:17 PM

[elfin sorrel]

Was Experimenting the entire day with worker$. The main issue is that, after running npm run build (using the SSG) adapter), and deploying it on github, I get code(14) qwik errors (use*() is not in the right context).

Note: it runs perfectly on developer watchmode (npm start). Also, when I remove the worker$ and rebuild, it works like magic :)..

[stray lintel]

You cannot use a hook inside a worker for sure, and I'm not even sure you can use state in the worker neither. If this is what you do, try to pass the data as props.

As far as I recall, the problem with worker$ is that it's a one time call, you cannot stream data in and out.

[elfin sorrel]

Thank you @stray lintel , but I am not streaming data nor passing any states. Mainly, I am just letting the worker to create a Threejs scene and prase it as JSON and return it. My worker is kinda looking like this:

// Webworker that doesn't use any of the component's state!
const myWorker$ = Worker$(() =>{
  const scene = new THREE.Scene();
  // Do some object loading magic...
  //...
  return {scene: pare(scene)}
})


useVisibleTask$(() => {
 myWorker$().then(({scene}) => {
   // change scene to object instead of string
   // Save the Scene in a signal or a store...
 })
})

I tried to replicate the code structure and logic from my memory because I scrapped the idea of web workers since it had problems. The issue was as I recall: You can't use a "use*" function in this scope. It manipulates the hierarchy. I think the main issue was that Qwik Webworkers package must be called from a JSX code only. But I am surprised why it worked in development server but not in production

Sorry for the limited information.

[elfin sorrel]

I just tried to replicate it but it works. Probably, I had a bug earlier in my project.

[true crow]

Interesting that you got that error. If you ever feel like exploring it some more, try to figure out which code makes it fail (just look at the call stack in web devtools)

that's great news then 🙂

[elfin sorrel]

Thank you all for your help. Qwik community is the best!

[stray lintel]

oh ok. I'm glad you manage to make it work, on a test environment at least.
I built a hook to read state in a webworker this weekend in case you needed it. It's based on the code from qwik-worker. I understand you don't need the state, but I might as well share it :
https://gist.github.com/GrandSchtroumpf/cf06e37f9d8d73988a1e48d187599cc4

[true crow]

Seems nice to add to qwik-worker, no?

[stray lintel]

It would require more testing, but I could do a PR indeed 👍