useLoader to load ArrayBuffer

[karimi]

I have an arraybuffer of a .glb file in memory and would like to load its contents into my scene. Unfortunately it's not an option to write the file to disk and get a path. But the buffer can be parsed using the .parse() method of THREE's GLTFloader to something like:

asset: {version: "2.0", generator: "GLTFExporter"}
cameras: []
parser: GLTFParser {json: {…}, extensions: {…}, options: {…}, cache: {…}, primitiveCache: {…}, …}
scene: Group {uuid: "AF270FCC-2664-40E4-B9F1-8EB5AD4D3286", name: "", type: "Group", parent: null, children: Array(4), …}
scenes: [Group]
userData: {}
__proto__: Object

How do I go about using this in a R3F Canvas component?
Alternatively, can useLoader() hook take an arraybuffer instead of a path?

[drcmda]

useloader is for async fetch requests.

const [gltf, set] = useState()
useEffect(() => new GLTFLoader().parse(url, "/", set), [url])

this is what useloader does internally anyway.

try not to think of these hooks as something that changes threejs rules. when in doubt, use threejs as you always would.

[Ashay27]

Hey @karimi and @drcmda,

I also want to let the user import a 3D model in the browser. I am using react-three-fiber as well, but could not manage to achieve this.
If you could help me with an example of how you did that, it would be super helpful.

[drcmda]

you need to look into threejs docs, how it can load an array buffer and then you just do the same thing inside a useeffect

[karimi]

Thank you for the clarification, I did get this far with parse(), now what would be the best course of action adding the gltf scene to my canvas?
Using primitive component seems to work:
<primitive object={gltfScene} position={[0, 0, 0]} />
I had to set the cast/receive shadows to true for every nested object, but my scene is still missing the shadows.

[drcmda]

<Canvas shadowMap it needs to be enabled.

[drcmda]

heres an example using shadows https://codesandbox.io/s/r3f-soft-shadows-dh2jc