chore: add story

.storybook/stories/Grid.stories.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react'
+import { Vector3 } from 'three'
+
+import { Setup } from '../Setup'
+import { Grid, Box } from '../../src'
+
+export default {
+  title: 'Gizmos/Grid',
+  component: Grid,
+  decorators: [(storyFn) => <Setup cameraPosition={new Vector3(-5, 5, 10)}>{storyFn()}</Setup>],
+}
+
+function UseGridScene() {
+  return (
+    <React.Suspense fallback={null}>
+      <Grid cellColor="white" args={[10, 10]} />
+      <Box position={[0, 0.5, 0]}>
+        <meshStandardMaterial />
+      </Box>
+      <directionalLight position={[10, 10, 5]} />
+    </React.Suspense>
+  )
+}
+
+export const UseGridSceneSt = () => <UseGridScene />
+UseGridSceneSt.story = {
+  name: 'Default',
+}

README.md

@@ -650,6 +650,8 @@ If you are using other controls (Orbit, Trackball, etc), you will notice how the
 
 #### Grid
 
+[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.vercel.app/?path=/story/gizmos-grid--use-grid-scene-st)
+
 <p>
   <a href="https://codesandbox.io/s/imreeu"><img width="20%" src="https://codesandbox.io/api/v1/sandboxes/imreeu/screenshot.png" alt="Demo"/></a>
 </p>

src/core/Grid.tsx

@@ -56,43 +56,43 @@ const GridMaterial = shaderMaterial(
     infiniteGrid: 0,
     followCamera: 0,
   },
-  ` varying vec3 worldPosition;
-      uniform float fadeDistance;
-      uniform float infiniteGrid;
-      uniform float followCamera;
-      void main() {
-        vec3 pos = position.xzy * (1. + fadeDistance * infiniteGrid);
-        pos.xz += (cameraPosition.xz * followCamera);
-        worldPosition = pos;
-        gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0);
-      }`,
-  ` varying vec3 worldPosition;
-      uniform float cellSize;
-      uniform float sectionSize;
-      uniform vec3 cellColor;
-      uniform vec3 sectionColor;
-      uniform float fadeDistance;
-      uniform float fadeStrength;
-      uniform float cellThickness;
-      uniform float sectionThickness;
-      uniform float infiniteGrid;
-      float getGrid(float size, float thickness) {
-        vec2 r = worldPosition.xz / size;
-        vec2 grid = abs(fract(r - 0.5) - 0.5) / fwidth(r);
-        float line = min(grid.x, grid.y) + 1. - thickness;
-        return 1.0 - min(line, 1.);
-      }
-      void main() {
-        float g1 = getGrid(cellSize, cellThickness);
-        float g2 = getGrid(sectionSize, sectionThickness);
-        float d = 1.0 - min(distance(cameraPosition.xz, worldPosition.xz) / fadeDistance, 1.);
-        vec3 color = mix(cellColor, sectionColor, min(1.,sectionThickness * g2));
-        gl_FragColor = vec4(color, (g1 + g2) * pow(d,fadeStrength));
-        gl_FragColor.a = mix(0.75 * gl_FragColor.a, gl_FragColor.a, g2);
-        if (gl_FragColor.a <= 0.0) discard;
-        #include <tonemapping_fragment>
-        #include <encodings_fragment>
-      }`
+  `varying vec3 worldPosition;
+   uniform float fadeDistance;
+   uniform float infiniteGrid;
+   uniform float followCamera;
+   void main() {
+     vec3 pos = position.xzy * (1. + fadeDistance * infiniteGrid);
+     pos.xz += (cameraPosition.xz * followCamera);
+     worldPosition = pos;
+     gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0);
+   }`,
+  `varying vec3 worldPosition;
+   uniform float cellSize;
+   uniform float sectionSize;
+   uniform vec3 cellColor;
+   uniform vec3 sectionColor;
+   uniform float fadeDistance;
+   uniform float fadeStrength;
+   uniform float cellThickness;
+   uniform float sectionThickness;
+   uniform float infiniteGrid;
+   float getGrid(float size, float thickness) {
+     vec2 r = worldPosition.xz / size;
+     vec2 grid = abs(fract(r - 0.5) - 0.5) / fwidth(r);
+     float line = min(grid.x, grid.y) + 1. - thickness;
+     return 1.0 - min(line, 1.);
+   }
+   void main() {
+     float g1 = getGrid(cellSize, cellThickness);
+     float g2 = getGrid(sectionSize, sectionThickness);
+     float d = 1.0 - min(distance(cameraPosition.xz, worldPosition.xz) / fadeDistance, 1.);
+     vec3 color = mix(cellColor, sectionColor, min(1.,sectionThickness * g2));
+     gl_FragColor = vec4(color, (g1 + g2) * pow(d,fadeStrength));
+     gl_FragColor.a = mix(0.75 * gl_FragColor.a, gl_FragColor.a, g2);
+     if (gl_FragColor.a <= 0.0) discard;
+     #include <tonemapping_fragment>
+     #include <encodings_fragment>
+   }`
 )
 
 export const Grid = React.forwardRef(
@@ -101,8 +101,8 @@ export const Grid = React.forwardRef(
       args,
       cellColor = '#000000',
       sectionColor = '#2080ff',
-      cellSize = 1,
-      sectionSize = 10,
+      cellSize = 0.5,
+      sectionSize = 1,
       followCamera = false,
       infiniteGrid = false,
       fadeDistance = 100,