static folder replaced with public folder - linting issues resolved

vercel · Jan 28, 2020 · 4a0f340 · 4a0f340
1 parent a181ee1
commit 4a0f340
Show file tree

Hide file tree

Showing 9 changed files with 157 additions and 156 deletions.
diff --git a/examples/with-three-js/README.md b/examples/with-three-js/README.md
@@ -2,12 +2,9 @@
 
 This example uses:
 
-
 `threejs`: A lightweight, 3D library with a default WebGL renderer. The library also provides Canvas 2D, SVG and CSS3D renderers in the examples.
 `react-three-fiber`: A React renderer for Threejs on the web and react-native.
 
-
-
 ## Deploy your own
 
 Deploy the example using [ZEIT Now](https://zeit.co/now):

diff --git a/examples/with-three-js/next.config.js b/examples/with-three-js/next.config.js
@@ -1,4 +1,4 @@
-const withCSS = require('@zeit/next-css');
+const withCSS = require('@zeit/next-css')
 module.exports = withCSS({
-    cssModules: true
-});
+  cssModules: true,
+})
diff --git a/examples/with-three-js/pages/birds.js b/examples/with-three-js/pages/birds.js
@@ -1,83 +1,83 @@
-import React, { useRef, useState, useEffect, Suspense } from "react";
-import * as THREE from "three";
-import { Canvas, useFrame, useLoader } from "react-three-fiber";
-import './index.css';
+import React, { useRef, useState, useEffect, Suspense } from 'react'
+import * as THREE from 'three'
+import { Canvas, useFrame, useLoader } from 'react-three-fiber'
+import './index.css'
 
-let GLTFLoader;
+let GLTFLoader
 
 const Bird = ({ speed, factor, url, ...props }) => {
-    const gltf = useLoader(GLTFLoader, url);
-    const group = useRef();
-    const [mixer] = useState(() => new THREE.AnimationMixer());
-    useEffect(
-        () => void mixer.clipAction(gltf.animations[0], group.current).play(),
-        []
-    );
-    useFrame((state, delta) => {
-        group.current.rotation.y +=
-            Math.sin((delta * factor) / 2) * Math.cos((delta * factor) / 2) * 1.5;
-        mixer.update(delta * speed);
-    });
-    return (
-        <group ref={group}>
-            <scene name="Scene" {...props}>
-                <mesh
-                    name="Object_0"
-                    morphTargetDictionary={gltf.__$[1].morphTargetDictionary}
-                    morphTargetInfluences={gltf.__$[1].morphTargetInfluences}
-                    rotation={[1.5707964611537577, 0, 0]}
-                >
-                    <bufferGeometry attach="geometry" {...gltf.__$[1].geometry} />
-                    <meshStandardMaterial
-                        attach="material"
-                        {...gltf.__$[1].material}
-                        name="Material_0_COLOR_0"
-                    />
-                </mesh>
-            </scene>
-        </group>
-    );
+  const gltf = useLoader(GLTFLoader, url)
+  const group = useRef()
+  const [mixer] = useState(() => new THREE.AnimationMixer())
+  useEffect(
+    () => void mixer.clipAction(gltf.animations[0], group.current).play(),
+    [gltf.animations, mixer]
+  )
+  useFrame((state, delta) => {
+    group.current.rotation.y +=
+      Math.sin((delta * factor) / 2) * Math.cos((delta * factor) / 2) * 1.5
+    mixer.update(delta * speed)
+  })
+  return (
+    <group ref={group}>
+      <scene name="Scene" {...props}>
+        <mesh
+          name="Object_0"
+          morphTargetDictionary={gltf.__$[1].morphTargetDictionary}
+          morphTargetInfluences={gltf.__$[1].morphTargetInfluences}
+          rotation={[1.5707964611537577, 0, 0]}
+        >
+          <bufferGeometry attach="geometry" {...gltf.__$[1].geometry} />
+          <meshStandardMaterial
+            attach="material"
+            {...gltf.__$[1].material}
+            name="Material_0_COLOR_0"
+          />
+        </mesh>
+      </scene>
+    </group>
+  )
 }
 
 const Birds = () => {
-    return new Array(5).fill().map((_, i) => {
-        const x = (15 + Math.random() * 30) * (Math.round(Math.random()) ? -1 : 1);
-        const y = -10 + Math.random() * 20;
-        const z = -5 + Math.random() * 10;
-        const bird = ["stork", "parrot", "flamingo"][Math.round(Math.random() * 2)];
-        let speed = bird === "stork" ? 0.5 : bird === "flamingo" ? 2 : 5;
-        let factor =
-            bird === "stork"
-                ? 0.5 + Math.random()
-                : bird === "flamingo"
-                ? 0.25 + Math.random()
-                : 1 + Math.random() - 0.5;
-        return (
-            <Bird
-                key={i}
-                position={[x, y, z]}
-                rotation={[0, x > 0 ? Math.PI : 0, 0]}
-                speed={speed}
-                factor={factor}
-                url={`/static/glb/${bird}.glb`}
-            />
-        );
-    });
+  return new Array(5).fill().map((_, i) => {
+    const x = (15 + Math.random() * 30) * (Math.round(Math.random()) ? -1 : 1)
+    const y = -10 + Math.random() * 20
+    const z = -5 + Math.random() * 10
+    const bird = ['stork', 'parrot', 'flamingo'][Math.round(Math.random() * 2)]
+    let speed = bird === 'stork' ? 0.5 : bird === 'flamingo' ? 2 : 5
+    let factor =
+      bird === 'stork'
+        ? 0.5 + Math.random()
+        : bird === 'flamingo'
+        ? 0.25 + Math.random()
+        : 1 + Math.random() - 0.5
+    return (
+      <Bird
+        key={i}
+        position={[x, y, z]}
+        rotation={[0, x > 0 ? Math.PI : 0, 0]}
+        speed={speed}
+        factor={factor}
+        url={`/glb/${bird}.glb`}
+      />
+    )
+  })
 }
 
 const BirdsPage = props => {
-    useEffect(() => {
-        GLTFLoader = require("three/examples/jsm/loaders/GLTFLoader").GLTFLoader;
-    }, []);
-    return (
-        <Canvas camera={{ position: [0, 0, 35] }}>
-            <ambientLight intensity={2} />
-            <pointLight position={[40, 40, 40]} />
-            <Suspense fallback={null}>
-                <Birds />
-            </Suspense>
-        </Canvas>
-    );
-};
+  useEffect(() => {
+    GLTFLoader = require('three/examples/jsm/loaders/GLTFLoader').GLTFLoader
+  }, [])
+  return (
+    <Canvas camera={{ position: [0, 0, 35] }}>
+      <ambientLight intensity={2} />
+      <pointLight position={[40, 40, 40]} />
+      <Suspense fallback={null}>
+        <Birds />
+      </Suspense>
+    </Canvas>
+  )
+}
 
-export default BirdsPage;
+export default BirdsPage
diff --git a/examples/with-three-js/pages/boxes.js b/examples/with-three-js/pages/boxes.js
@@ -1,47 +1,47 @@
-import React, { useRef, useState, Suspense } from "react";
-import { Canvas, useFrame } from "react-three-fiber";
-import './index.css';
+import React, { useRef, useState, Suspense } from 'react'
+import { Canvas, useFrame } from 'react-three-fiber'
+import './index.css'
 
-const Box = (props) => {
-    const mesh = useRef();
+const Box = props => {
+  const mesh = useRef()
 
-    const [hovered, setHover] = useState(false);
-    const [active, setActive] = useState(false);
+  const [hovered, setHover] = useState(false)
+  const [active, setActive] = useState(false)
 
-    useFrame(() => (mesh.current.rotation.x = mesh.current.rotation.y += 0.01));
+  useFrame(() => (mesh.current.rotation.x = mesh.current.rotation.y += 0.01))
 
-    return (
-        <mesh
-            {...props}
-            ref={mesh}
-            scale={active ? [6, 6, 6] : [5, 5, 5]}
-            onClick={e => setActive(!active)}
-            onPointerOver={e => setHover(true)}
-            onPointerOut={e => setHover(false)}
-        >
-            <boxBufferGeometry attach="geometry" args={[1, 1, 1]} />
-            <meshStandardMaterial
-                attach="material"
-                color={hovered ? "#2b6c76" : "#720b23"}
-            />
-        </mesh>
-    );
-};
+  return (
+    <mesh
+      {...props}
+      ref={mesh}
+      scale={active ? [6, 6, 6] : [5, 5, 5]}
+      onClick={e => setActive(!active)}
+      onPointerOver={e => setHover(true)}
+      onPointerOut={e => setHover(false)}
+    >
+      <boxBufferGeometry attach="geometry" args={[1, 1, 1]} />
+      <meshStandardMaterial
+        attach="material"
+        color={hovered ? '#2b6c76' : '#720b23'}
+      />
+    </mesh>
+  )
+}
 
 const BirdsPage = props => {
-    return[
-        <h1>Click on me - Hover me :)</h1>,
-        <Canvas camera={{ position: [0, 0, 35] }}>
-            <ambientLight intensity={2} />
-            <pointLight position={[40, 40, 40]} />
-            <Suspense fallback={null}>
-                <Box position={[10, 0, 0]} />
-                <Box position={[-10, 0, 0]} />
-                <Box position={[0, 10, 0]} />
-                <Box position={[0, -10, 0]} />
-            </Suspense>
-        </Canvas>,
-    ]
-};
+  return [
+    <h1>Click on me - Hover me :)</h1>,
+    <Canvas camera={{ position: [0, 0, 35] }}>
+      <ambientLight intensity={2} />
+      <pointLight position={[40, 40, 40]} />
+      <Suspense fallback={null}>
+        <Box position={[10, 0, 0]} />
+        <Box position={[-10, 0, 0]} />
+        <Box position={[0, 10, 0]} />
+        <Box position={[0, -10, 0]} />
+      </Suspense>
+    </Canvas>,
+  ]
+}
 
-export default BirdsPage;
+export default BirdsPage
diff --git a/examples/with-three-js/pages/index.css b/examples/with-three-js/pages/index.css
@@ -1,43 +1,43 @@
 body {
-    margin: 0;
-    padding: 0;
-    width: 100%;
-    height: 100vh;
-    background: lavender;
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  background: lavender;
 }
 
 canvas {
-    width: 100%;
-    height: 100vh;
+  width: 100%;
+  height: 100vh;
 }
 
 .main {
-    background: hotpink;
-    padding: 50px;
-    border-radius: 4px;
-    display: flex;
-    margin: 200px;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    color: white;
+  background: hotpink;
+  padding: 50px;
+  border-radius: 4px;
+  display: flex;
+  margin: 200px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  color: white;
 }
 
 a {
-    color: white;
-    display: block;
-    text-decoration: unset;
-    font-size: 20px;
-    margin: 5px 0;
+  color: white;
+  display: block;
+  text-decoration: unset;
+  font-size: 20px;
+  margin: 5px 0;
 }
 
 a:hover {
-    color: #3f51b5;
+  color: #3f51b5;
 }
 
 h1 {
-    display: flex;
-    justify-content: center;
-    align-content: center;
-    color: hotpink;
+  display: flex;
+  justify-content: center;
+  align-content: center;
+  color: hotpink;
 }
diff --git a/examples/with-three-js/pages/index.js b/examples/with-three-js/pages/index.js
@@ -1,14 +1,18 @@
-import React from 'react';
-import Link from "next/link";
-import style from './index.css';
+import React from 'react'
+import Link from 'next/link'
+import style from './index.css'
 
 const Index = () => {
-    return (
-        <div className={style.main}>
-            <Link href="/birds"><a>Birds Example</a></Link>
-            <Link href="/boxes"><a>Boxes Example</a></Link>
-        </div>
-    );
-};
+  return (
+    <div className={style.main}>
+      <Link href="/birds">
+        <a>Birds Example</a>
+      </Link>
+      <Link href="/boxes">
+        <a>Boxes Example</a>
+      </Link>
+    </div>
+  )
+}
 
-export default Index;
+export default Index
diff --git a/...les/with-three-js/static/glb/flamingo.glb → ...les/with-three-js/public/glb/flamingo.glb b/...les/with-three-js/static/glb/flamingo.glb → ...les/with-three-js/public/glb/flamingo.glb
diff --git a/examples/with-three-js/static/glb/parrot.glb → examples/with-three-js/public/glb/parrot.glb b/examples/with-three-js/static/glb/parrot.glb → examples/with-three-js/public/glb/parrot.glb
diff --git a/examples/with-three-js/static/glb/stork.glb → examples/with-three-js/public/glb/stork.glb b/examples/with-three-js/static/glb/stork.glb → examples/with-three-js/public/glb/stork.glb