Improve threejs tree shaking

tedx-nkcswx · May 6, 2020 · ca44204 · ca44204
1 parent 70eaf32
commit ca44204
Show file tree

Hide file tree

Showing 9 changed files with 125 additions and 132 deletions.
diff --git a/public/favicon.png b/public/favicon.png
diff --git a/public/favicon.svg b/public/favicon.svg
diff --git a/public/index.html b/public/index.html
@@ -1,55 +1,69 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
+  <head>
+    <meta charset="utf-8" />
 
-<head>
-  <meta charset="utf-8">
+    <script>
+      if (navigator.doNotTrack !== '1' && navigator.userAgent !== 'ReactSnap') {
+        const script = document.createElement('script');
+        script.src = 'https://www.googletagmanager.com/gtag/js?id=UA-38720984-1';
+        script.async = true;
+        document.head.appendChild(script);
+        window.dataLayer = window.dataLayer || [];
+        function gtag() {
+          dataLayer.push(arguments);
+        }
+        gtag('js', new Date());
+        gtag('config', 'UA-38720984-1');
+      }
+    </script>
 
-  <script>
-    if (navigator.doNotTrack !== '1' && navigator.userAgent !== 'ReactSnap') {
-      const script = document.createElement('script');
-      script.src = 'https://www.googletagmanager.com/gtag/js?id=UA-38720984-1';
-      script.async = true;
-      document.head.appendChild(script);
-      window.dataLayer = window.dataLayer || [];
-      function gtag(){dataLayer.push(arguments);}
-      gtag('js', new Date());
-      gtag('config', 'UA-38720984-1');
-    }
-  </script>
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover"
+    />
+    <meta name="theme-color" content="#111111" />
+    <meta name="author" content="Hamish Williams" />
 
-  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover">
-  <meta name="theme-color" content="#111111">
-  <meta name="author" content="Hamish Williams">
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.svg" />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/icon-256.png" />
+    <link type="text/plain" rel="author" href="%PUBLIC_URL%/humans.txt" />
 
-  <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
-  <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.png">
-  <link rel="apple-touch-icon" href='%PUBLIC_URL%/icon-256.png'>
-  <link type="text/plain" rel="author" href='%PUBLIC_URL%/humans.txt'>
+    <meta
+      property="og:image"
+      content="https://hamishw.com%PUBLIC_URL%/social-image.png"
+    />
+    <meta property="og:image:type" content="image/png" />
+    <meta property="og:image:width" content="1200" />
+    <meta property="og:image:height" content="549" />
 
-  <meta property="og:image" content='https://hamishw.com%PUBLIC_URL%/social-image.png'>
-  <meta property="og:image:type" content='image/png'>
-  <meta property="og:image:width" content='1200'>
-  <meta property="og:image:height" content='549'>
+    <meta property="og:title" content="Hamish Williams | Designer + Developer" />
+    <meta property="og:site_name" content="hamishw.com" />
+    <meta property="og:url" content="https://hamishw.com" />
+    <meta
+      property="og:description"
+      content="User interface, illustration, and user experience designer"
+    />
 
-  <meta property="og:title" content='Hamish Williams | Designer + Developer'>
-  <meta property="og:site_name" content='hamishw.com'>
-  <meta property="og:url" content='https://hamishw.com'>
-  <meta property="og:description" content='User interface, illustration, and user experience designer'>
-
-  <meta name="twitter:card" content="summary">
-  <meta name="twitter:description" content='User interface, illustration, and user experience designer'>
-  <meta name="twitter:title" content='Hamish Williams | Designer + Developer'>
-  <meta name="twitter:site" content='@hamishMW'>
-  <meta name="twitter:image" content='https://hamishw.com%PUBLIC_URL%/social-image.png'>
-</head>
-
-<body>
-  <script>
-    const preferredTheme = JSON.parse(localStorage.getItem('theme'));
-    document.body.className = preferredTheme || 'dark';
-  </script>
-  <noscript>You need to enable JavaScript to run this app.</noscript>
-  <div id="root"></div>
-</body>
+    <meta name="twitter:card" content="summary" />
+    <meta
+      name="twitter:description"
+      content="User interface, illustration, and user experience designer"
+    />
+    <meta name="twitter:title" content="Hamish Williams | Designer + Developer" />
+    <meta name="twitter:site" content="@hamishMW" />
+    <meta
+      name="twitter:image"
+      content="https://hamishw.com%PUBLIC_URL%/social-image.png"
+    />
+  </head>
 
+  <body>
+    <script>
+      const preferredTheme = JSON.parse(localStorage.getItem('theme'));
+      document.body.className = preferredTheme || 'dark';
+    </script>
+    <div id="root"></div>
+  </body>
 </html>
diff --git a/public/sitemap.xml b/public/sitemap.xml
@@ -36,4 +36,10 @@
     <changefreq>monthly</changefreq>
     <priority>0.8</priority>
   </url>
+  <url>
+    <loc>https://trueblue.hamishw.com</loc>
+    <lastmod>2020-02-01</lastmod>
+    <changefreq>monthly</changefreq>
+    <priority>0.8</priority>
+  </url>
 </urlset>
diff --git a/src/components/Carousel/index.js b/src/components/Carousel/index.js
@@ -1,23 +1,16 @@
 import React, { useState, useEffect, useRef, useCallback } from 'react';
-import {
-  WebGLRenderer,
-  OrthographicCamera,
-  Scene,
-  Mesh,
-  Color,
-  ShaderMaterial,
-  LinearFilter,
-  TextureLoader,
-  PlaneBufferGeometry,
-  LoadingManager,
-} from 'three';
+import { WebGLRenderer } from 'three/src/renderers/WebGLRenderer';
+import { LinearFilter } from 'three/src/constants';
+import { OrthographicCamera } from 'three/src/cameras/OrthographicCamera';
+import { Scene } from 'three/src/scenes/Scene';
+import { PlaneBufferGeometry } from 'three/src/geometries/PlaneGeometry';
+import { TextureLoader } from 'three/src/loaders/TextureLoader';
+import { LoadingManager } from 'three/src/loaders/LoadingManager';
+import { ShaderMaterial } from 'three/src/materials/ShaderMaterial';
+import { Mesh } from 'three/src/objects/Mesh';
+import { Color } from 'three/src/math/Color';
 import styled from 'styled-components/macro';
-import {
-  Easing,
-  Tween,
-  update as updateTween,
-  remove as removeTween,
-} from 'es6-tween';
+import { Easing, Tween, update as updateTween, remove as removeTween } from 'es6-tween';
 import Swipe from 'react-easy-swipe';
 import Icon from 'components/Icon';
 import { cornerClip } from 'utils/style';
@@ -61,12 +54,7 @@ export default function Carousel(props) {
   }`;
 
   const goToIndex = useCallback(
-    ({
-      index,
-      direction = 1,
-      duration = 1200,
-      easing = Easing.Exponential.InOut,
-    }) => {
+    ({ index, direction = 1, duration = 1200, easing = Easing.Exponential.InOut }) => {
       if (!sliderImages) return;
       setImageIndex(index);
       const uniforms = material.current.uniforms;
@@ -109,12 +97,7 @@ export default function Carousel(props) {
         return;
       }
 
-      const finalIndex = determineIndex(
-        imageIndex,
-        index,
-        sliderImages,
-        direction
-      );
+      const finalIndex = determineIndex(imageIndex, index, sliderImages, direction);
       goToIndex({ index: finalIndex, direction: direction, ...rest });
     },
     [goToIndex, imageIndex, loaded, sliderImages]
@@ -153,14 +136,7 @@ export default function Carousel(props) {
 
   useEffect(() => {
     const containerElement = container.current;
-    const cameraOptions = [
-      width / -2,
-      width / 2,
-      height / 2,
-      height / -2,
-      1,
-      1000,
-    ];
+    const cameraOptions = [width / -2, width / 2, height / 2, height / -2, 1, 1000];
     renderer.current = new WebGLRenderer({ antialias: false });
     camera.current = new OrthographicCamera(...cameraOptions);
     scene.current = new Scene();
@@ -294,10 +270,7 @@ export default function Carousel(props) {
 
       return function cleanUp() {
         if (placeholderElement) {
-          placeholderElement.removeEventListener(
-            'transitionend',
-            purgePlaceholder
-          );
+          placeholderElement.removeEventListener('transitionend', purgePlaceholder);
         }
       };
     }
@@ -312,14 +285,8 @@ export default function Carousel(props) {
       if (absoluteX > 20) event.preventDefault();
       lastSwipePosition.current = x;
       swipeDirection.current = x > 0 ? -1 : 1;
-      const swipePercentage =
-        1 - ((absoluteX - containerWidth) / containerWidth) * -1;
-      const nextIndex = determineIndex(
-        imageIndex,
-        null,
-        images,
-        swipeDirection.current
-      );
+      const swipePercentage = 1 - ((absoluteX - containerWidth) / containerWidth) * -1;
+      const nextIndex = determineIndex(imageIndex, null, images, swipeDirection.current);
       const uniforms = material.current.uniforms;
       const displacementClamp = Math.min(Math.max(swipePercentage, 0), 1);
 
@@ -385,11 +352,7 @@ export default function Carousel(props) {
   return (
     <SliderContainer onKeyDown={handleKeyDown} {...rest}>
       <SliderContainer>
-        <Swipe
-          allowMouseEvents
-          onSwipeEnd={onSwipeEnd}
-          onSwipeMove={onSwipeMove}
-        >
+        <Swipe allowMouseEvents onSwipeEnd={onSwipeEnd} onSwipeMove={onSwipeMove}>
           <SliderImageWrapper>
             <SliderCanvasWrapper
               aria-atomic

diff --git a/src/components/Header/ThemeToggle.js b/src/components/Header/ThemeToggle.js
@@ -4,7 +4,7 @@ import { Button } from 'components/Button';
 import { useAppContext, useId } from 'hooks';
 import { media } from 'utils/style';
 
-export default function ThemeToggle({ isMobile, ...rest }) {
+const ThemeToggle = ({ isMobile, ...rest }) => {
   const theme = useTheme();
   const { dispatch } = useAppContext();
   const isDark = theme.id === 'dark';
@@ -44,7 +44,7 @@ export default function ThemeToggle({ isMobile, ...rest }) {
       </ThemeToggleSvg>
     </ThemeToggleButton>
   );
-}
+};
 
 const ThemeToggleButton = styled(Button)`
   position: fixed;
@@ -110,3 +110,5 @@ const ThemeTogglePath = styled.path`
   transition-delay: ${props => (props.isDark ? '0s' : '0.3s')};
   opacity: ${props => (props.isDark ? 0 : 1)};
 `;
+
+export default ThemeToggle;
diff --git a/src/index.js b/src/index.js
@@ -4,6 +4,7 @@ import App from './app';
 import * as serviceWorker from './serviceWorker';
 
 const rootElement = document.getElementById('root');
+
 if (rootElement.hasChildNodes()) {
   hydrate(<App />, rootElement);
 } else {

diff --git a/src/pages/Home/DisplacementSphere.js b/src/pages/Home/DisplacementSphere.js
@@ -1,20 +1,17 @@
 import React, { useEffect, useRef, memo } from 'react';
 import styled, { useTheme } from 'styled-components/macro';
-import {
-  Vector2,
-  WebGLRenderer,
-  PerspectiveCamera,
-  Scene,
-  DirectionalLight,
-  AmbientLight,
-  UniformsUtils,
-  UniformsLib,
-  ShaderLib,
-  SphereBufferGeometry,
-  Mesh,
-  Color,
-  ShaderMaterial,
-} from 'three';
+import { Vector2 } from 'three/src/math/Vector2';
+import { WebGLRenderer } from 'three/src/renderers/WebGLRenderer';
+import { PerspectiveCamera } from 'three/src/cameras/PerspectiveCamera';
+import { Scene } from 'three/src/scenes/Scene';
+import { DirectionalLight } from 'three/src/lights/DirectionalLight';
+import { AmbientLight } from 'three/src/lights/AmbientLight';
+import { UniformsUtils } from 'three/src/renderers/shaders/UniformsUtils';
+import { UniformsLib } from 'three/src/renderers/shaders/UniformsLib';
+import { MeshPhongMaterial } from 'three/src/materials/MeshPhongMaterial';
+import { SphereBufferGeometry } from 'three/src/geometries/SphereGeometry';
+import { Mesh } from 'three/src/objects/Mesh';
+import { Color } from 'three/src/math/Color';
 import { Easing, Tween, update as updateTween, remove as removeTween } from 'es6-tween';
 import innerHeight from 'ios-inner-height';
 import vertShader from './shaders/sphereVertShader';
@@ -53,19 +50,21 @@ function DisplacementSphere(props) {
     camera.current = new PerspectiveCamera(55, width.current / height.current, 0.1, 200);
     scene.current = new Scene();
 
-    uniforms.current = UniformsUtils.merge([
-      UniformsLib['ambient'],
-      UniformsLib['lights'],
-      ShaderLib.phong.uniforms,
-      { time: { type: 'f', value: 0 } },
-    ]);
-
-    material.current = new ShaderMaterial({
-      uniforms: uniforms.current,
-      vertexShader: vertShader,
-      fragmentShader: fragShader,
-      lights: true,
-    });
+    material.current = new MeshPhongMaterial();
+
+    material.current.onBeforeCompile = shader => {
+      uniforms.current = UniformsUtils.merge([
+        UniformsLib['ambient'],
+        UniformsLib['lights'],
+        shader.uniforms,
+        { time: { type: 'f', value: 0 } },
+      ]);
+
+      shader.uniforms = uniforms.current;
+      shader.vertexShader = vertShader;
+      shader.fragmentShader = fragShader;
+      shader.lights = true;
+    };
 
     geometry.current = new SphereBufferGeometry(32, 128, 128);
     sphere.current = new Mesh(geometry.current, material.current);
@@ -184,7 +183,9 @@ function DisplacementSphere(props) {
 
     const animate = () => {
       animation = requestAnimationFrame(animate);
-      uniforms.current.time.value = 0.00005 * (Date.now() - start.current);
+      if (uniforms.current !== undefined) {
+        uniforms.current.time.value = 0.00005 * (Date.now() - start.current);
+      }
       sphere.current.rotation.z += 0.001;
       renderer.current.render(scene.current, camera.current);
       updateTween();

diff --git a/src/pages/Home/Profile.js b/src/pages/Home/Profile.js
@@ -71,6 +71,8 @@ function Profile(props) {
                 srcSet={`${ProfileImg} 480w, ${ProfileImgLarge} 960w`}
                 sizes={`(max-width: ${media.mobile}px) 100vw, 480px`}
                 alt="Me at the Torii (gate) on Miyajima, an island off the coast of Hiroshima in Japan"
+                width={480}
+                height={560}
               />
               <ProfileSvg svg="profile" status={status} />
             </ProfileColumn>