From fcc01747173de18308885de1d436726ec7370ad2 Mon Sep 17 00:00:00 2001
From: Gianmarco <gianmarcosimone89@gmail.com>
Date: Wed, 13 May 2020 20:06:17 +0200
Subject: [PATCH] Small changes to recipes (#391)

* removes loader example - since now useLoader is a thing; reworks shader example with useLoader

* Adds a react-spring recipe
---
 recipes.md | 41 +++++++++++++++++++++++++++++++++--------
 1 file changed, 33 insertions(+), 8 deletions(-)

diff --git a/recipes.md b/recipes.md
index 122f27f..7b73bfa 100644
--- a/recipes.md
+++ b/recipes.md
@@ -1,14 +1,39 @@
 # Recipes
 
-## Handling loaders
+## Animating with react-spring
 
-You can use React's built-in memoizing-features (as well as suspense) to build async dependency graphs.
+[react-spring](https://www.react-spring.io/) supports react-three-fiber out of the box:
 
 ```jsx
-const texture = useMemo(() => new THREE.TextureLoader().load(url), [url])
+import { Canvas } from 'react-three-fiber'
+// this example is using react-spring@9
+import { useSpring } from '@react-spring/core'
+import { a } from '@react-spring/three'
 
-<meshLambertMaterial attach="material" map={texture}>
+function Box(props) {
+  const [active, setActive] = useState(0)
+
+  // create a common spring that will be used later to interpolate other values
+  const { spring } = useSpring({
+    spring: active,
+    config: { mass: 5, tension: 400, friction: 50, precision: 0.0001 }
+  })
+
+  // interpolate values from commong spring
+  const scale = spring.to([0, 1], [1, 5])
+  const rotation = spring.to([0, 1], [0, Math.PI])
+  const color = spring.to([0, 1], ['#6246ea', '#e45858'])
+
+  return (
+    // using a from react-spring will animate our component
+    <a.mesh rotation-y={rotation} scale-x={scale} scale-z={scale} onClick={() => setActive(Number(!active))}>
+      <boxBufferGeometry attach="geometry" args={[1, 1, 1]} />
+      <a.meshStandardMaterial roughness={0.5} attach="material" color={color} />
+    </a.mesh>
+  )
+}
 ```
+[CodeSandbox](https://8ckyf.csb.app/)
 
 ## Dealing with effects (hijacking main render-loop)
 
@@ -116,10 +141,8 @@ function Extrusion({ start = [0,0], paths, ...props }) {
 
 ```jsx
 function CrossFade({ url1, url2, disp }) {
-  const [texture1, texture2, dispTexture] = useMemo(() => {
-    const loader = new THREE.TextureLoader()
-    return [loader.load(url1), loader.load(url2), loader.load(disp)]
-  }, [url1, url2, disp])
+  const [texture1, texture2, dispTexture] = useLoader(THREE.TextureLoader, [url1, url2, disp])
+  
   return (
     <mesh>
       <planeBufferGeometry attach="geometry" args={[1, 1]} />
@@ -130,6 +153,8 @@ function CrossFade({ url1, url2, disp }) {
         uniforms-texture2-value={texture2}
         uniforms-disp-value={dispTexture}
         uniforms-dispFactor-value={0.5} />
+    </mesh>
+  )
 ```
 
 ## Re-parenting