pass on raf timetag

metrowave · Apr 7, 2019 · f0295fb · f0295fb
1 parent 0b68191
commit f0295fb
Show file tree

Hide file tree

Showing 12 changed files with 618 additions and 96 deletions.
diff --git a/.size-snapshot.json b/.size-snapshot.json
@@ -1,21 +1,21 @@
 {
   "dist/index.js": {
-    "bundled": 23676,
-    "minified": 11175,
-    "gzipped": 4133,
+    "bundled": 23703,
+    "minified": 11185,
+    "gzipped": 4132,
     "treeshaked": {
       "rollup": {
-        "code": 9267,
+        "code": 9277,
         "import_statements": 578
       },
       "webpack": {
-        "code": 10827
+        "code": 10837
       }
     }
   },
   "dist/index.cjs.js": {
-    "bundled": 26689,
-    "minified": 12873,
-    "gzipped": 4347
+    "bundled": 26695,
+    "minified": 12883,
+    "gzipped": 4345
   }
 }
diff --git a/examples/components/Montage.js b/examples/components/Montage.js
@@ -67,18 +67,18 @@ function Effect() {
 
 export default function App() {
   return (
-    <div class="main" style={{ color: '#172717' }}>
+    <div className="main" style={{ color: '#172717' }}>
       <Canvas style={{ background: '#A2CCB6' }} camera={{ position: [0, 0, 30] }}>
         <ambientLight intensity={0.5} />
         <spotLight intensity={0.5} position={[300, 300, 4000]} />
         <Effect />
         <Content />
       </Canvas>
-      <a href="https://github.com/drcmda/react-three-fiber" class="top-left" children="Github" />
-      <a href="https://twitter.com/0xca0a" class="top-right" children="Twitter" />
-      <a href="https://github.com/react-spring/react-spring" class="bottom-left" children="+ react-spring" />
-      <span class="header-left">React Three Fiber</span>
-      <div class="header-major">
+      <a href="https://github.com/drcmda/react-three-fiber" className="top-left" children="Github" />
+      <a href="https://twitter.com/0xca0a" className="top-right" children="Twitter" />
+      <a href="https://github.com/react-spring/react-spring" className="bottom-left" children="+ react-spring" />
+      <span className="header-left">React Three Fiber</span>
+      <div className="header-major">
         <span>2.0</span>
       </div>
     </div>

diff --git a/examples/components/Tina.js b/examples/components/Tina.js
@@ -5,8 +5,9 @@ import { update, useTransition, useSpring, a } from 'react-spring/three'
 import flat from 'lodash-es/flatten'
 import { SVGLoader } from './../resources/loaders/SVGLoader'
 import * as svgs from '../resources/images/svg'
+
 const urls = Object.values(svgs)
-const colors = ['#21242d', '#ea5158', '#0d4663', '#ffbcb7', '#2d4a3e', '#8bd8d2']
+const colors = ['#21242d', '#ea5158', '#0d4663', '#EE786E', '#2d4a3e', '#8bd8d2']
 const deg = THREE.Math.degToRad
 const loaders = urls.map(
   url =>
@@ -23,7 +24,7 @@ const Scene = React.memo(() => {
   const { viewport } = useThree()
   const [page, setPage] = useState(0)
   const [shapes, setShape] = useState([])
-  useEffect(() => void setInterval(() => setPage(i => (i + 1) % urls.length), 4000), [])
+  useEffect(() => void setInterval(() => setPage(i => (i + 1) % urls.length), 3000), [])
   //window.s = setPage
   useEffect(() => void loaders[page].then(setShape), [page])
   const { color } = useSpring({
@@ -33,23 +34,30 @@ const Scene = React.memo(() => {
     config: { mass: 5, tension: 800, friction: 400 },
   })
   const transitions = useTransition(shapes, item => item.shape.uuid, {
-    from: { position: [0, 50, -200], opacity: 0 },
-    enter: { position: [0, 0, 0], opacity: 1 },
-    leave: { position: [0, -400, 200], opacity: 0 },
-    config: { mass: 5, tension: 800, friction: 90, precision: 0.1 },
+    from: { rotation: [-0.2, 0.9, 0], position: [0, 50, -200], opacity: 0 },
+    enter: { rotation: [0, 0, 0], position: [0, 0, 0], opacity: 1 },
+    leave: { rotation: [0.2, -0.9, 0], position: [0, -400, 200], opacity: 0 },
+    config: (item, state) =>
+      state !== 'leave'
+        ? { mass: 50, tension: 800, friction: 190, precision: 0.0001 }
+        : { mass: 20, tension: 800, friction: 190, precision: 0.0001 },
     order: ['leave', 'enter', 'update'],
     lazy: true,
     trail: 15,
+    unique: true,
+    reset: true,
   })
   return (
     <>
+      <ambientLight intensity={0.5} />
+      <spotLight intensity={0.5} position={[300, 300, 4000]} />
       <mesh scale={[viewport.width * 2, viewport.height * 2, 1]} rotation={[0, deg(-20), 0]}>
         <planeGeometry attach="geometry" args={[1, 1]} />
         <a.meshPhongMaterial attach="material" color={color} depthTest={false} />
       </mesh>
       <a.group position={[1600, -700, page]} rotation={[0, deg(180), 0]}>
-        {transitions.map(({ item: { shape, color, index }, key, props: { opacity, position } }) => (
-          <a.mesh key={key} position={position.interpolate((x, y, z) => [x, y, z + -index * 50])}>
+        {transitions.map(({ item: { shape, color, index }, key, props: { opacity, position, rotation } }) => (
+          <a.mesh key={key} rotation={rotation} position={position.interpolate((x, y, z) => [x, y, z + -index * 50])}>
             <a.meshPhongMaterial
               attach="material"
               color={color}
@@ -70,27 +78,25 @@ export default function App() {
   return (
     <div class="main">
       <Canvas
-        invalidateFrameloop={true}
+        invalidateFrameloop
         camera={{
-          fov: 80,
-          position: [0, 0, 2000],
+          fov: 90,
+          position: [0, 0, 1800],
           rotation: [0, deg(-20), deg(180)],
           near: 0.1,
           far: 20000,
         }}>
-        <ambientLight intensity={0.5} />
-        <spotLight intensity={0.5} position={[300, 300, 4000]} />
         <Scene />
       </Canvas>
-      <a href="https://github.com/drcmda/react-three-fiber" class="top-left" children="Github" />
-      <a href="https://twitter.com/0xca0a" class="top-right" children="Twitter" />
-      <a href="https://github.com/react-spring/react-spring" class="bottom-left" children="+ react-spring" />
+      <a href="https://tympanus.net/codrops" class="top-left" children="Article" />
+      <a href="https://github.com/drcmda/react-three-fiber" class="top-right" children="Github" />
+      <a href="https://twitter.com/0xca0a" class="bottom-left" children="Twitter" />
       <a
         href="https://www.instagram.com/tina.henschel/"
         class="bottom-right"
-        children="Illustrations @ Tina Henschel"
+        children="Illustrations / Tina Henschel"
       />
-      <span class="header">React Three Fiber</span>
+      <span class="header">REACT THREE FIBER</span>
     </div>
   )
 }
diff --git a/examples/index.js b/examples/index.js
@@ -1,6 +1,9 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
-import App from './components/Montage'
+import App from './components/Tina'
 import './styles.css'
 
-ReactDOM.render(<App />, document.getElementById('root'))
+console.log(ReactDOM)
+
+ReactDOM.unstable_createRoot(document.getElementById('root')).render(<App />)
+//ReactDOM.render(<App />, document.getElementById('root'))
diff --git a/examples/package.json b/examples/package.json
@@ -26,7 +26,9 @@
     "style-loader": "^0.23.1",
     "terser-webpack-plugin": "1.2.3",
     "webpack": "4.29.6",
+    "webpack-bundle-analyzer": "^3.1.0",
     "webpack-cli": "^3.3.0",
+    "webpack-common-shake": "^2.1.0",
     "webpack-dev-server": "3.2.1"
   },
   "scripts": {

diff --git a/examples/public/index.html b/examples/public/index.html
@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
     <meta name="theme-color" content="#000000" />
-    <link href="https://fonts.googleapis.com/css?family=Playfair+Display:700" rel="stylesheet" />
+    <link href="https://fonts.googleapis.com/css?family=Josefin+Sans:400,700" rel="stylesheet">
     <title>React App</title>
   </head>
   <body>

diff --git a/examples/resources/loaders/SVGLoader.js b/examples/resources/loaders/SVGLoader.js
@@ -82,9 +82,6 @@ SVGLoader.prototype = {
           style = parseStyle(node, style)
           if (isVisible(style)) path = parseLineNode(node, style)
           break
-
-        default:
-          console.log(node)
       }
 
       if (path) {
@@ -424,9 +421,6 @@ SVGLoader.prototype = {
               isFirstPoint = true
             }
             break
-
-          default:
-            console.warn(command)
         }
 
         // console.log( type, parseFloats( data ), parseFloats( data ).length  )
@@ -835,10 +829,6 @@ SVGLoader.prototype = {
             transfVec2(curve.v1)
             transfVec2(curve.v2)
           } else if (curve.isEllipseCurve) {
-            if (isRotated) {
-              console.warn('SVGLoader: Elliptic arc or ellipse rotation or skewing is not implemented.')
-            }
-
             tempV2.set(curve.aX, curve.aY)
             transfVec2(tempV2)
             curve.aX = tempV2.x
@@ -867,8 +857,6 @@ SVGLoader.prototype = {
 
     //
 
-    console.log('THREE.SVGLoader')
-
     var paths = []
 
     var transformStack = []
@@ -880,20 +868,12 @@ SVGLoader.prototype = {
 
     var currentTransform = new Matrix3()
 
-    console.time('THREE.SVGLoader: DOMParser')
-
     var xml = new DOMParser().parseFromString(text, 'image/svg+xml') // application/xml
 
-    console.timeEnd('THREE.SVGLoader: DOMParser')
-
-    console.time('THREE.SVGLoader: Parse')
-
     parseNode(xml.documentElement, { fill: '#000' })
 
     // console.log( paths );
 
-    console.timeEnd('THREE.SVGLoader: Parse')
-
     return paths
   },
 }