BREAKING CHANGE: v3.0.0

* [Feature] move stories to TS (#223) (#231)

* feat: setup TS for stories

* fix: eslint was ignore .storybook

* feat: add TS to storybook

* refactor: move stories to TS (WIP)

* refactor: move more stories to TS (WIP)

* refactor: src changes for TS move over

I think these were TS problems that were missed.

* fix: ContactShadows story

* refactor: move more stories to TS

* refactor: add MapControls.tsx after raising issues in three

Two errors linked to three.js:
mrdoob/three.js#21058
mrdoob/three.js#21059

* fix: TS errors for passing refs & children

* refactor: add more stories (WIP)

* fix: useContextBridge TS to accept array of children

fixed using DefinitelyTyped/DefinitelyTyped#44572 (comment) because microsoft/TypeScript#14729

* refactor: convert more stories to TS

also useGLTF does not need to declare it's type

* chore: update storybook

* fix: revert useTexture

accidentally committed a WIP change

* refactor: move stories to TS (WIP)

* refactor: revert useGLTF story

* Minor type fixes

* chore: update react-three-fiber to latest

Required for Types

* refactor: move stories to TS

* fix: shaderMaterial on init returns void, not null

* refactor: remove unnecessary type in useFBX

* refactor: type Environment stronger

there was issues with useAsset not understanding it's types....

* Fixes CSB CI (#230)

Co-authored-by: Gianmarco Simone <[email protected]>

Co-authored-by: Josh <[email protected]>

* 2.2.16

* chore: add templates (#232)

* chore: add react-dom as optional peer depency

if you're using react-native you don't need it.

* docs: update readme

* fix: fix storybook imports that should have been done before

* BREAKING CHANGE: refactor internal to solve react-native imports

my bad.

Co-authored-by: Gianmarco <[email protected]>

* 2.3.0-beta.0

* fix: edit transformOutputPath to remove .ts from files

* 2.3.0-beta.1

* fix: useAnimations ref type & chore: add storybook entry for useAnimations

* Added THREE.Group to useAnimations types

* Small refactor

* Added useAnimations story

* Clean up storybook

* Fix null ref typing on useAnimations

* Forgot to change typing on useAnimations api

* chore: add storybook entry to README

Co-authored-by: Josh Ellis <[email protected]>

* [fix] Blob is undefined when using SSR (#239)

* fix: #233 Blob is undefined in SSR

* refactor: it appears Billboard is fixed

Looks like Typescript does not suck.

* 2.3.0-beta.2

* fix: create polyfill for atob

* 2.3.0-beta.3

* chore: update readme in response to #240

* fix: #242 Frustum has incorrect spelling in softshadows (#243)

* fix: suggestion for fixing #242

* refactor: default should be other way round

* chore: update readme with correct spelling

* 2.3.0-beta.4

* feat: Add MeshoptDecoder support to useGLTF (#246)

* Add MeshoptDecoder support to useGLTF

* chore: move center

Co-authored-by: Josh Ellis <[email protected]>

* 2.3.0-beta.5

* feat: #181 – adding points to line (#247)

* feat: re-create geometry on new points

* refactor: useMemo the geometry instead of useEffect

* 2.3.0-beta.6

* 3.0.0-beta.1

* 3.0.0-beta.2

* feat: update troika with new features (#255)

* 3.0.0-beta.3

* feat: add ability to add custom scene as prop (#256)

* feat: add ability to add custom scene as prop

* docs: update Environment with new feats

* 3.0.0-beta.4

* refactor: shuffle imports for beta

* 3.0.0-beta.5

* docs: clearly specify name of package & old has been deprecated

* BREAKING CHANGE: Upgrade Three.js to r125 (#262)

* chore: update Three.js dependency

* refactor: remove subdivision modifier

* fix: remove use of FaceNormalsHelper as it no longer exists in Three

* fix: update typings for THREE

* fix: update modifiers to work without THREE.Geometry

* docs: update README

* chore: add Three.js peer dependency

* fix: change install instructions to use yarn instead of npm (#265)

* repurpose reflector, make it capable to blur (#260)

* repurpose reflector, make it capable to blur

* refactor: move materials out to reduce noise & fix types

* refactor: merge beta

* fix: add child propType

* refactor: update reflector story & fix children type

* changes

* fix: shuffle types so reflectorProps come from what the material expects

* docs

Co-authored-by: Josh Ellis <[email protected]>

* chore: add workflows to beta release

* BREAKING CHANGE force build

* 3.0.0-beta.6

Co-authored-by: Gianmarco Simone <[email protected]>
Co-authored-by: Tanner Hartwig <[email protected]>
Co-authored-by: Matt Rossman <[email protected]>
Co-authored-by: Renaud Rohlinger <[email protected]>
Co-authored-by: Jure Triglav <[email protected]>
Co-authored-by: Jason Bixon <[email protected]>
Co-authored-by: Paul Henschel <[email protected]>

.github/workflows/release.yml

@@ -2,6 +2,7 @@ name: release
 on:
   push:
     branches:
+      - 'master'
       - 'beta'
       - 'alpha'
   pull_request: {}
@@ -27,7 +28,7 @@ jobs:
   release:
     needs: main
     runs-on: ubuntu-latest
-    if: ${{ github.repository == 'pmndrs/drei' && contains('refs/heads/beta,refs/heads/alpha',github.ref) && github.event_name == 'push' }}
+    if: ${{ github.repository == 'pmndrs/drei' && contains('refs/heads/master,refs/heads/beta,refs/heads/alpha',github.ref) && github.event_name == 'push' }}
     steps:
       - name: Cancel Previous Runs
         uses: styfle/[email protected]

.storybook/Setup.tsx

@@ -2,7 +2,7 @@ import * as React from 'react'
 import * as THREE from 'three'
 import { Canvas } from 'react-three-fiber'
 
-import { OrbitControls } from '../src/OrbitControls'
+import { OrbitControls } from '../src'
 
 export function Setup({ children, cameraPosition = new THREE.Vector3(-5, 5, 5), controls = true, ...restProps }) {
   return (

.storybook/stories/ContactShadows.stories.tsx

@@ -23,9 +23,7 @@ function ContactShadowScene() {
       <Icosahedron ref={mesh} args={[1, 2]} position-y={2}>
         <meshBasicMaterial attach="material" color="lightblue" />
       </Icosahedron>
-
-      <ContactShadows width={10} height={10} far={20} rotation={[Math.PI / 2, 0, 0]} />
-
+      <ContactShadows position={[0, 0, 0]} width={10} height={10} far={20} rotation={[Math.PI / 2, 0, 0]} />
       <Plane args={[10, 10]} position={[0, -0.01, 0]} rotation={[-Math.PI / 2, 0, 0]}>
         <meshBasicMaterial attach="material" color="white" />
       </Plane>

.storybook/stories/PositionalAudio.stories.tsx

@@ -2,8 +2,7 @@ import * as React from 'react'
 import { Vector3 } from 'three'
 
 import { Setup } from '../Setup'
-import { OrbitControls } from '../../src/OrbitControls'
-import { PositionalAudio } from '../../src/PositionalAudio'
+import { OrbitControls, PositionalAudio } from '../../src'
 
 export default {
   title: 'Abstractions/PositionalAudio',

.storybook/stories/Reflector.stories.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { useFrame } from 'react-three-fiber'
-import { Color, Vector3, Mesh } from 'three'
+import { Vector3, Mesh } from 'three'
 
 import { Setup } from '../Setup'
 
@@ -12,8 +12,6 @@ export default {
   decorators: [(storyFn) => <Setup cameraPosition={new Vector3(-2, 2, 6)}> {storyFn()}</Setup>],
 }
 
-const reflectorCol = new Color('#333')
-
 function ReflectorScene() {
   const $box = React.useRef<Mesh>(null!)
   useFrame(({ clock }) => {
@@ -24,13 +22,14 @@ function ReflectorScene() {
   return (
     <>
       <Reflector
-        clipBias={0.1}
-        textureWidth={1024}
-        textureHeight={1024}
-        rotation={[-Math.PI / 2, 0, 0]}
-        color={reflectorCol}
+        position={[0, 0, 0]}
+        resolution={512}
+        args={[10, 10]}
+        mirror={0.5}
+        rotation={[-Math.PI / 2, 0, Math.PI / 2]}
+        blur={[400, 100]}
       >
-        <planeBufferGeometry args={[10, 10]} attach="geometry" />
+        {(Material, props) => <Material color="#a0a0a0" metalness={0.5} normalScale={[1, 1]} {...props} />}
       </Reflector>
 
       <Box position={[-2, 1, -1]} material-color="hotpink" material-wireframe />

.storybook/stories/Shapes.stories.tsx

@@ -4,7 +4,7 @@ import { Mesh } from 'three'
 
 import { Setup } from '../Setup'
 
-import * as shapes from '../../src/shapes'
+import * as shapes from '../../src/core/shapes'
 
 export default {
   title: 'Shapes',

.storybook/stories/Text.stories.tsx

@@ -66,6 +66,60 @@ function TextOutlineScene() {
   )
 }
 
+function TextStrokeScene() {
+  const ref = useTurntable()
+
+  return (
+    <Text
+      ref={ref}
+      fontSize={12}
+      maxWidth={200}
+      lineHeight={1}
+      letterSpacing={0.02}
+      textAlign={'left'}
+      font="https://fonts.gstatic.com/s/raleway/v14/1Ptrg8zYS_SKggPNwK4vaqI.woff"
+      anchorX="center"
+      anchorY="middle"
+      fillOpacity={0}
+      strokeWidth={'2.5%'}
+      strokeColor="#ffffff"
+    >
+      LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT, SED DO EIUSMOD TEMPOR INCIDIDUNT UT LABORE ET DOLORE
+      MAGNA ALIQUA. UT ENIM AD MINIM VENIAM, QUIS NOSTRUD EXERCITATION ULLAMCO LABORIS NISI UT ALIQUIP EX EA COMMODO
+      CONSEQUAT. DUIS AUTE IRURE DOLOR IN REPREHENDERIT IN VOLUPTATE VELIT ESSE CILLUM DOLORE EU FUGIAT NULLA PARIATUR.
+      EXCEPTEUR SINT OCCAECAT CUPIDATAT NON PROIDENT, SUNT IN CULPA QUI OFFICIA DESERUNT MOLLIT ANIM ID EST LABORUM.
+    </Text>
+  )
+}
+
+function TextShadowScene() {
+  const ref = useTurntable()
+
+  return (
+    <Text
+      ref={ref}
+      color={'#EC2D2D'}
+      fontSize={12}
+      maxWidth={200}
+      lineHeight={1}
+      letterSpacing={0.02}
+      textAlign={'left'}
+      font="https://fonts.gstatic.com/s/raleway/v14/1Ptrg8zYS_SKggPNwK4vaqI.woff"
+      anchorX="center"
+      anchorY="middle"
+      outlineOffsetX={'10%'}
+      outlineOffsetY={'10%'}
+      outlineBlur={'30%'}
+      outlineOpacity={0.3}
+      outlineColor="#EC2D2D"
+    >
+      LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT, SED DO EIUSMOD TEMPOR INCIDIDUNT UT LABORE ET DOLORE
+      MAGNA ALIQUA. UT ENIM AD MINIM VENIAM, QUIS NOSTRUD EXERCITATION ULLAMCO LABORIS NISI UT ALIQUIP EX EA COMMODO
+      CONSEQUAT. DUIS AUTE IRURE DOLOR IN REPREHENDERIT IN VOLUPTATE VELIT ESSE CILLUM DOLORE EU FUGIAT NULLA PARIATUR.
+      EXCEPTEUR SINT OCCAECAT CUPIDATAT NON PROIDENT, SUNT IN CULPA QUI OFFICIA DESERUNT MOLLIT ANIM ID EST LABORUM.
+    </Text>
+  )
+}
 function CustomMaterialTextScene() {
   const ref = useTurntable()
   const defaultColor = '#EC2D2D'
@@ -100,5 +154,11 @@ function CustomMaterialTextScene() {
 export const TextOutlineSt = () => <TextOutlineScene />
 TextOutlineSt.storyName = 'Outline'
 
+export const TextStrokeSt = () => <TextStrokeScene />
+TextStrokeSt.storyName = 'Transparent with stroke'
+
+export const TextShadowSt = () => <TextShadowScene />
+TextShadowSt.storyName = 'Text Shadow'
+
 export const CustomMaterialTextSt = () => <CustomMaterialTextScene />
 CustomMaterialTextSt.storyName = 'Custom Material'

.storybook/stories/useAnimations.stories.tsx

@@ -0,0 +1,90 @@
+import * as React from 'react'
+import { Vector3 } from 'three'
+import { GLTF } from 'three/examples/jsm/loaders/GLTFLoader'
+import { withKnobs, select, number } from '@storybook/addon-knobs'
+
+import { Setup } from '../Setup'
+
+import { useAnimations, useGLTF, useMatcapTexture } from '../../src'
+
+export default {
+  title: 'Abstractions/useAnimations',
+  component: useAnimations,
+  decorators: [(storyFn) => <Setup cameraPosition={new Vector3(0, 0, 3)}>{storyFn()}</Setup>, withKnobs],
+}
+
+type GLTFResult = GLTF & {
+  nodes: {
+    YB_Body: THREE.SkinnedMesh
+    YB_Joints: THREE.SkinnedMesh
+    mixamorigHips: THREE.Bone
+  }
+  materials: {
+    YB_Body: THREE.MeshStandardMaterial
+    YB_Joints: THREE.MeshStandardMaterial
+  }
+}
+
+type AnimationControllerProps = {
+  ybotRef: React.MutableRefObject<THREE.Group | undefined | null>
+  animations: THREE.AnimationClip[]
+}
+
+function AnimationController(props: AnimationControllerProps) {
+  const { actions } = useAnimations(props.animations, props.ybotRef)
+
+  // Storybook Knobs
+  const actionOptions = Object.keys(actions)
+  const selectedAction = select('Animation', actionOptions, actionOptions[2])
+  const blendDuration = number('Blend duration', 0.5, {
+    range: true,
+    min: 0,
+    max: 2,
+    step: 0.1,
+  })
+
+  React.useEffect(() => {
+    actions[selectedAction].reset().fadeIn(blendDuration).play()
+    return () => void actions[selectedAction].fadeOut(blendDuration)
+  }, [actions, selectedAction, blendDuration])
+
+  return null
+}
+
+function YBotModel(props: JSX.IntrinsicElements['group']) {
+  const ybotRef = React.useRef<THREE.Group>(null)
+  const { nodes, animations } = useGLTF('ybot.glb') as GLTFResult
+  const [matcapBody] = useMatcapTexture('293534_B2BFC5_738289_8A9AA7', 1024)
+  const [matcapJoints] = useMatcapTexture('3A2412_A78B5F_705434_836C47', 1024)
+
+  return (
+    <>
+      <group ref={ybotRef} {...props} dispose={null}>
+        <group rotation={[Math.PI / 2, 0, 0]} scale={[0.01, 0.01, 0.01]}>
+          <primitive object={nodes.mixamorigHips} />
+          <skinnedMesh geometry={nodes.YB_Body.geometry} skeleton={nodes.YB_Body.skeleton}>
+            <meshMatcapMaterial attach="material" matcap={matcapBody} skinning={true} />
+          </skinnedMesh>
+          <skinnedMesh geometry={nodes.YB_Joints.geometry} skeleton={nodes.YB_Joints.skeleton}>
+            <meshMatcapMaterial attach="material" matcap={matcapJoints} skinning={true} />
+          </skinnedMesh>
+        </group>
+      </group>
+
+      <AnimationController ybotRef={ybotRef} animations={animations} />
+    </>
+  )
+}
+
+useGLTF.preload('ybot.glb')
+
+function UseAnimationsScene() {
+  return (
+    <React.Suspense fallback={null}>
+      <YBotModel position={[0, -1, 0]} />
+    </React.Suspense>
+  )
+}
+
+export const UseAnimationsSt = () => <UseAnimationsScene />
+UseAnimationsSt.storyName = 'Default'

.storybook/stories/useContextBridge.stories.tsx

@@ -2,10 +2,7 @@ import * as React from 'react'
 import { Canvas } from 'react-three-fiber'
 import { withKnobs } from '@storybook/addon-knobs'
 
-import { OrbitControls } from '../../src/OrbitControls'
-import { Box } from '../../src/shapes'
-import { useContextBridge } from '../../src/useContextBridge'
-import { Text } from '../../src/Text'
+import { OrbitControls, Box, useContextBridge, Text } from '../../src'
 
 export default {
   title: 'Misc/useContextBridge',

.storybook/stories/useEdgeSplit.stories.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { useLoader } from 'react-three-fiber'
 import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader'
-import { withKnobs, number } from '@storybook/addon-knobs'
+import { withKnobs, number, boolean } from '@storybook/addon-knobs'
 
 import { Setup } from '../Setup'
 
@@ -17,8 +17,9 @@ function CerberusModel() {
   const { children } = useLoader(OBJLoader, 'cerberus.obj')
 
   const cutoffEdge = number('Cut Off Edge', 20, { range: true, min: 0, max: 180, step: 1 })
+  const tryKeepNormals = boolean('Keep normals', true)
 
-  const meshRef = useEdgeSplit(cutoffEdge * (Math.PI / 180))
+  const meshRef = useEdgeSplit(cutoffEdge * (Math.PI / 180), tryKeepNormals)
 
   return (
     <mesh scale={[8, 8, 8]} ref={meshRef} geometry={(children[0] as THREE.Mesh).geometry}>

.storybook/stories/useFBO.stories.tsx

@@ -4,9 +4,7 @@ import { createPortal, useFrame } from 'react-three-fiber'
 
 import { Setup } from '../Setup'
 
-import { useFBO } from '../../src/useFBO'
-import { TorusKnot, Box } from '../../src/shapes'
-import { PerspectiveCamera } from '../../src/PerspectiveCamera'
+import { useFBO, TorusKnot, Box, PerspectiveCamera } from '../../src'
 
 export default {
   title: 'Misc/useFBO',

.storybook/stories/useHelper.stories.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react'
 import { BoxHelper, CameraHelper } from 'three'
 import { VertexNormalsHelper } from 'three/examples/jsm/helpers/VertexNormalsHelper'
-import { FaceNormalsHelper } from 'three/examples/jsm/helpers/FaceNormalsHelper'
 
 import { Setup } from '../Setup'
 
@@ -17,7 +16,6 @@ function Scene() {
   const mesh = React.useRef()
   useHelper(mesh, BoxHelper, 'royalblue')
   useHelper(mesh, VertexNormalsHelper, 1, 'red')
-  useHelper(mesh, FaceNormalsHelper, 1, 'hotpink')
 
   return (
     <Sphere ref={mesh}>

.storybook/stories/useTessellation.stories.tsx

@@ -15,7 +15,7 @@ export default {
 
 const VertexDisplaceMaterial = shaderMaterial(
   {
-    amplitude: 1,
+    amplitude: 1.0,
   },
   `
   uniform float amplitude;
@@ -60,8 +60,8 @@ declare global {
 }
 
 function UseTessellationScene() {
-  const passes = number('passes', 3)
-  const maxEdgeLength = number('maxEdgeLength', 3)
+  const passes = number('passes', 4)
+  const maxEdgeLength = number('maxEdgeLength', 0.1)
   const meshRef = useTessellation(passes, maxEdgeLength)
 
   React.useEffect(() => {
@@ -86,7 +86,7 @@ function UseTessellationScene() {
       geometry.setAttribute('displacement', new THREE.BufferAttribute(displacement, 3))
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [])
+  }, [meshRef.current && meshRef.current.geometry])
 
   useFrame(({ clock }) => {
     const { current: mesh } = meshRef

CONTRIBUTING.md

@@ -5,7 +5,7 @@ Thanks for wanting to make a contribution and wanting to improve this library fo
 ## How to Contribute
 
 1.  Fork and clone the repo
-2.  Run `npm install` to install dependencies
+2.  Run `yarn install` to install dependencies
 3.  Create a branch for your PR with `git checkout -b pr-type/issue-number-your-branch-name beta
 4.  Let's get cooking! 👨🏻‍🍳🥓