feat: gltf convenience component

README.md

@@ -78,6 +78,7 @@ The `native` route of the library **does not** export `Html` or `Loader`. The de
           <li><a href="#marchingcubes">MarchingCubes</a></li>
           <li><a href="#decal">Decal</a></li>
           <li><a href="#svg">Svg</a></li>
+          <li><a href="#gltf">Gltf</a></li>
           <li><a href="#asciirenderer">AsciiRenderer</a></li>
         </ul>
         <li><a href="#shaders">Shaders</a></li>
@@ -1295,6 +1296,18 @@ Accepts an SVG url or svg raw data.
 <Svg src={urlOrRawSvgString} />
 ```
 
+#### Gltf
+
+<p>
+  <a href="https://codesandbox.io/s/if9crg"><img width="20%" src="https://codesandbox.io/api/v1/sandboxes/if9crg/screenshot.png" alt="Demo"/></a>
+</p>
+
+This is a convenience component that will load a gltf file and clone the scene using drei/Clone. That means you can re-use and mount the same gltf file multiple times. It accepts all props that Clone does.
+
+```js
+<Gltf src="/model.glb" receiveShadow castShadow />
+```
+
 #### AsciiRenderer
 
 <p>

src/core/Clone.tsx

@@ -4,7 +4,7 @@ import pick from 'lodash.pick'
 import { MeshProps } from '@react-three/fiber'
 import { SkeletonUtils } from 'three-stdlib'
 
-type Props = Omit<JSX.IntrinsicElements['group'], 'children'> & {
+export type CloneProps = {
   /** Any pre-existing THREE.Object3D (groups, meshes, ...), or an array of objects */
   object: THREE.Object3D | THREE.Object3D[]
   /** Children will be placed within the object, or within the group that holds arrayed objects */
@@ -57,7 +57,7 @@ function createSpread(
     inject,
     castShadow,
     receiveShadow,
-  }: Partial<Props>
+  }: Omit<JSX.IntrinsicElements['group'], 'children'> & Partial<CloneProps>
 ) {
   let spread = pick(child, keys)
   if (deep) {
@@ -79,7 +79,17 @@ function createSpread(
 
 export const Clone = React.forwardRef(
   (
-    { isChild = false, object, children, deep, castShadow, receiveShadow, inject, keys, ...props }: Props,
+    {
+      isChild = false,
+      object,
+      children,
+      deep,
+      castShadow,
+      receiveShadow,
+      inject,
+      keys,
+      ...props
+    }: Omit<JSX.IntrinsicElements['group'], 'children'> & CloneProps,
     forwardRef: React.Ref<THREE.Group>
   ) => {
     const config = { keys, deep, inject, castShadow, receiveShadow }

src/core/Gltf.tsx

@@ -0,0 +1,13 @@
+import * as React from 'react'
+import { useGLTF } from './useGLTF'
+import { Clone, CloneProps } from './Clone'
+
+type GltfProps = JSX.IntrinsicElements['primitive'] &
+  CloneProps & {
+    src: string
+  }
+
+export const Gltf = React.forwardRef<THREE.Group, GltfProps>(({ src, ...props }, ref) => {
+  const { scene } = useGLTF(src)
+  return <Clone ref={ref} {...props} object={scene} />
+})

src/core/index.ts

@@ -19,6 +19,7 @@ export * from './Clone'
 export * from './MarchingCubes'
 export * from './Decal'
 export * from './Svg'
+export * from './Gltf'
 export * from './AsciiRenderer'
 
 // Cameras