Questions about Rect Three Fiber, Needle and USDZExporter

đŸŒ” Needle Engine
1

Hello Needle Developers,
I’m trying to build a react-AR App, but struggling with the USDZExporter. I already tried different ways, no success right now.

What I did:

  • Using React and the ‘old’ three.js Exporter, but the modified version from you (2022?) which supports keyframe animations. This is working (exept a strange problem with rotation/quaternation, objects get stretches instead of rotating properly)
    The exporter is a bit old now, but the good thing is, it can be used standalone.

  • I found your demo “react-three-fiber-sample”, which is working with react, but trying to use the USDZExporter from that package throws a JavaScript Error: “can’t access property “querySelector”, context.domElement.shadowRoot is null”, in ensureQuicklookLinkIsCreated quicklook.ts:5
    So it expects a shadow root for the download-link, which I cannot find. I tryed to change the code directly in the node module, but the vite cache was blocking this.
    And the demo is already some years old. Using Needle 3.18.0 + npm:@needle-tools/three@^0.154.3

  • Just using React Three Fiber and import the needle-engine (to get the newer Exporter) is not working. Obviously geometrie created via react, without “geometry___needle” get ignored in the usdz-file.

But, as far I understand, the newer UDZExporters are only working in a needle environment. Or is there still a standalone version?
So, what can Id do? Updating the “react-three-fiber-sample”-Sample, removing the Bug? Build on this?

Or maybe there is another, better way?
Of course I would rather use the newer exporter

Any help very appreciated :slight_smile:

btw: What animation-types are supported now? Bones? Shape-key?

2

Hi Max, thanks for the detailed write‐up. It looks like you’ve run into two related issues when trying to use the newer USDZExporter outside the standard Needle runtime.

‱ The error “can’t access property ‘querySelector’, context.domElement.shadowRoot is null” happens because the exporter assumes that the DOM element it’s working with already has a shadow root. In the full Needle environment (as seen in the react-three-fiber sample), a proper container with a shadow DOM is set up automatically (see at react-three-fiber-sample—NeedleEngine.tsx.md). When running outside that setup, you’ll either need to mimic this behavior – for example, by creating a container element and calling its attachShadow({ mode: “open” }) method before passing it as the context’s domElement – or run your export code within a full Needle Engine scene.

‱ The “geometry___needle” issue is related. The newer export workflow is designed to only pick up and process geometries that are tagged with this property. When creating meshes via react-three-fiber outside the Needle runtime, they aren’t automatically marked, so the exporter ignores them. You could work around this by either adding that marker yourself (for example, by extending your mesh creation logic) or by moving your content into a Needle-managed scene.

‱ Regarding animations, the latest USDZExporter automatically collects animations when autoExportAnimations is enabled. Bone (skeletal) animations are fully supported. There is experimental support for shape-key (blend-shape) animations, but we advise testing these thoroughly in your target QuickLook environment as the support might be limited.

At this point, the recommended path is to align your react project more closely with the Needle Engine runtime – that way you get the expected DOM setup (including a proper shadow root) and the tagging necessary for geometries. Alternatively, you could attempt to patch your container element manually, ensuring that the Node’s domElement you pass into the export process has an active shadow root, but that might entail more custom work.

Finally, to address your Vite cache issue when modifying node modules, try clearing the cache or using a custom alias so your changes aren’t overridden.

I hope this helps clarify the underlying issues and guides you toward a solution. Let me know if you need further assistance or more code examples!

1 replies left - Become PRO for more replies.
thread_CYFt45xCMbYwqtwaO678Klsj
Reply to this post directly if you need further help (bottom right button)

3

Hi,

Do you have a specific reason why you’re using react three fiber here instead of Needle Engine? You can use Needle Engine with react as well (without fiber): GitHub - needle-engine/react-sample and you wont have to apply hacks to get it to work + you can export interactive usdz files.

What you’re currently trying to do is using a Needle Engine component (USDZ Exporter) without needle engine itself which is causing these errors you’re seeing.