<Center /> (#237)

* center

* feat: add center story

* refactor: remove any from ref typecast

Co-authored-by: Josh Ellis <joshua.ellis18@gmail.com>

.storybook/stories/Center.stories.tsx

@@ -0,0 +1,36 @@
+import * as React from 'react'
+import { Vector3 } from 'three'
+
+import { Setup } from '../Setup'
+import { useTurntable } from '../useTurntable'
+
+import { Box, Center, useGLTF } from '../../src'
+
+export default {
+  title: 'Misc/Center',
+  component: Center,
+  decorators: [(storyFn) => <Setup cameraPosition={new Vector3(0, 0, -10)}>{storyFn()}</Setup>],
+}
+
+const SimpleExample = () => {
+  const { scene } = useGLTF('LittlestTokyo.glb')
+
+  const ref = useTurntable()
+
+  return (
+    <Center position={[5, 5, 10]}>
+      <Box args={[10, 10, 10]}>
+        <meshNormalMaterial attach="material" wireframe />
+      </Box>
+      <primitive ref={ref} object={scene} scale={[0.01, 0.01, 0.01]} />
+    </Center>
+  )
+}
+
+export const DefaultStory = () => (
+  <React.Suspense fallback={null}>
+    <SimpleExample />
+  </React.Suspense>
+)
+
+DefaultStory.storyName = 'Default'

README.md

@@ -69,6 +69,7 @@ import { PerspectiveCamera, PositionalAudio, ... } from '@react-three/drei'
           <li><a href="#html">Html</a></li>
           <li><a href="#shadow">Shadow</a></li>
           <li><a href="#stats">Stats</a></li>
+          <li><a href="#center">Center</a></li>
           <li><a href="#meshbounds">meshBounds</a></li>
           <li><a href="#usecamera">useCamera</a></li>
           <li><a href="#usedetectgpu">useDetectGPU</a></li>
@@ -648,6 +649,16 @@ useEffect(() => {
 return <Stats parent={parent} />
 ```
 
+#### Center
+
+Calculates a boundary box and centers its children accordingly.
+
+```jsx
+<Center>
+  <mesh />
+</Center>
+```
+
 #### meshBounds
 
 [![](https://img.shields.io/badge/-codesandbox-blue)](https://codesandbox.io/s/r3f-basic-demo-8fpip)

src/Center.tsx

@@ -0,0 +1,26 @@
+import { Box3, Vector3, Group } from 'three'
+import * as React from 'react'
+
+export const Center = React.forwardRef<Group, JSX.IntrinsicElements['group']>(function Center(
+  { children, ...props },
+  ref
+) {
+  const outer = React.useRef<Group>()
+  const inner = React.useRef<Group>()
+  React.useLayoutEffect(() => {
+    if (inner.current && outer.current) {
+      const box = new Box3()
+      box.setFromObject(inner.current)
+      const center = new Vector3()
+      box.getSize(center)
+      outer.current.position.set(-center.x / 2, -center.y / 2, -center.z / 2)
+    }
+  }, [children])
+  return (
+    <group ref={ref} {...props}>
+      <group ref={outer}>
+        <group ref={inner}>{children}</group>
+      </group>
+    </group>
+  )
+})

src/Environment.tsx

@@ -46,7 +46,7 @@ export function Environment({
 
   // PMREMGenerator takes its sweet time to generate the env-map,
   // Let's make this part of suspense, or else it just yields a frame-skip
-  const texture = useAsset<Texture, [Texture, boolean]>(
+  const texture = useAsset<Texture, [Texture]>(
     () =>
       new Promise((res) => {
         const gen = new PMREMGenerator(gl)
@@ -55,8 +55,7 @@ export function Environment({
         map.dispose()
         res(texture)
       }),
-    map,
-    background
+    map
   )
 
   React.useLayoutEffect(() => {
@@ -69,7 +68,7 @@ export function Environment({
       scene.background = oldbg
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [texture])
+  }, [texture, background])
 
   return null
 }

src/index.tsx

@@ -35,6 +35,7 @@ export * from './meshBounds'
 export * from './Reflector'
 export * from './Shadow'
 export * from './Stats'
+export * from './Center'
 export * from './useAspect'
 export * from './useCamera'
 export * from './useDetectGPU'