diff --git a/README.md b/README.md index ece540877..044f804b0 100644 --- a/README.md +++ b/README.md @@ -78,6 +78,7 @@ The `native` route of the library **does not** export `Html` or `Loader`. The de
  • MarchingCubes
  • Decal
  • Svg
  • +
  • Gltf
  • AsciiRenderer
  • Shaders
  • @@ -1295,6 +1296,18 @@ Accepts an SVG url or svg raw data. ``` +#### Gltf + +

    + Demo +

    + +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 + +``` + #### AsciiRenderer

    diff --git a/src/core/Clone.tsx b/src/core/Clone.tsx index f285f2717..512e6c677 100644 --- a/src/core/Clone.tsx +++ b/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 & { +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 + }: Omit & Partial ) { 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 & CloneProps, forwardRef: React.Ref ) => { const config = { keys, deep, inject, castShadow, receiveShadow } diff --git a/src/core/Gltf.tsx b/src/core/Gltf.tsx new file mode 100644 index 000000000..77cae6859 --- /dev/null +++ b/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(({ src, ...props }, ref) => { + const { scene } = useGLTF(src) + return +}) diff --git a/src/core/index.ts b/src/core/index.ts index 3f9dd3a27..084d1ea31 100644 --- a/src/core/index.ts +++ b/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