fix(useLoader): loosen GLTF inference check (#3105)

pmndrs · Dec 3, 2023 · e4bbc29 · e4bbc29
1 parent a032377
commit e4bbc29
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 7 deletions.
diff --git a/packages/fiber/src/core/hooks.tsx b/packages/fiber/src/core/hooks.tsx
@@ -1,7 +1,6 @@
 import * as THREE from 'three'
 import * as React from 'react'
 import { StateSelector, EqualityChecker } from 'zustand'
-import { GLTF } from 'three/examples/jsm/loaders/GLTFLoader.js'
 import { suspend, preload, clear } from 'suspend-react'
 import { context, RootState, RenderCallback } from './store'
 import { buildGraph, ObjectMap, is, useMutableCallback, useIsomorphicLayoutEffect } from './utils'
@@ -114,6 +113,8 @@ function loadingFn<L extends LoaderProto<any>>(
   }
 }
 
+type GLTFLike = { scene: THREE.Object3D }
+
 /**
  * Synchronously loads and caches assets with a three loader.
  *
@@ -125,14 +126,14 @@ export function useLoader<T, U extends string | string[], L extends LoaderProto<
   input: U,
   extensions?: Extensions<L>,
   onProgress?: (event: ProgressEvent<EventTarget>) => void,
-): U extends any[] ? BranchingReturn<R, GLTF, GLTF & ObjectMap>[] : BranchingReturn<R, GLTF, GLTF & ObjectMap> {
+): U extends any[] ? BranchingReturn<R, GLTFLike, R & ObjectMap>[] : BranchingReturn<R, GLTFLike, R & ObjectMap> {
   // Use suspense to load async assets
   const keys = (Array.isArray(input) ? input : [input]) as string[]
   const results = suspend(loadingFn<L>(extensions, onProgress), [Proto, ...keys], { equal: is.equ })
   // Return the object/s
   return (Array.isArray(input) ? results : results[0]) as U extends any[]
-    ? BranchingReturn<R, GLTF, GLTF & ObjectMap>[]
-    : BranchingReturn<R, GLTF, GLTF & ObjectMap>
+    ? BranchingReturn<R, GLTFLike, R & ObjectMap>[]
+    : BranchingReturn<R, GLTFLike, R & ObjectMap>
 }
 
 /**

diff --git a/packages/fiber/tests/core/hooks.test.tsx b/packages/fiber/tests/core/hooks.test.tsx
@@ -93,19 +93,23 @@ describe('hooks', () => {
   })
 
   it('can handle useLoader hook', async () => {
+    let gltf!: Stdlib.GLTF & ObjectMap
+
     const MockMesh = new THREE.Mesh()
+    MockMesh.name = 'Scene'
+
     jest.spyOn(Stdlib, 'GLTFLoader').mockImplementation(
       () =>
         ({
           load: jest.fn().mockImplementation((_url, onLoad) => {
-            onLoad(MockMesh)
+            onLoad({ scene: MockMesh })
           }),
         } as unknown as Stdlib.GLTFLoader),
     )
 
     const Component = () => {
-      const model = useLoader(Stdlib.GLTFLoader, '/suzanne.glb')
-      return <primitive object={model} />
+      gltf = useLoader(Stdlib.GLTFLoader, '/suzanne.glb')
+      return <primitive object={gltf.scene} />
     }
 
     let scene: THREE.Scene = null!
@@ -122,6 +126,8 @@ describe('hooks', () => {
     await waitFor(() => expect(scene.children[0]).toBeDefined())
 
     expect(scene.children[0]).toBe(MockMesh)
+    expect(gltf.scene).toBe(MockMesh)
+    expect(gltf.nodes.Scene).toBe(MockMesh)
   })
 
   it('can handle useLoader hook with an array of strings', async () => {