With threejs example (vercel#10301)

* With threejs example

* static folder replaced with public folder - linting issues resolved

* CR- gitignore removed- readmea updated- css files and package removed

* used plain css file insteaded of styled component

* built in css added

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

examples/with-three-js/README.md

@@ -0,0 +1,49 @@
+# With Three js
+
+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):
+
+[![Deploy with ZEIT Now](https://zeit.co/button)](https://zeit.co/new/project?template=https://github.com/zeit/next.js/tree/canary/examples/with-three-js)
+
+## How to use
+
+### Using `create-next-app`
+
+Execute [`create-next-app`](https://github.com/zeit/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example:
+
+```bash
+npx create-next-app --example with-three-js
+# or
+yarn create next-app --example with-three-js
+```
+
+### Download manually
+
+Download the example:
+
+```bash
+curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-three-js
+cd with-three-js
+```
+
+Install it and run:
+
+```bash
+npm install
+npm run dev
+# or
+yarn
+yarn dev
+```
+
+Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)):
+
+```bash
+now
+```

examples/with-three-js/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "with-three-js",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "next": "9.2.1",
+    "react": "16.12.0",
+    "react-dom": "16.12.0",
+    "react-three-fiber": "4.0.12",
+    "three": "0.112.1"
+  },
+  "devDependencies": {}
+}

examples/with-three-js/pages/_app.js

@@ -0,0 +1,8 @@
+import React from 'react'
+import './index.css'
+
+function MyApp({ Component, pageProps }) {
+  return <Component {...pageProps} />
+}
+
+export default MyApp

examples/with-three-js/pages/birds.js

@@ -0,0 +1,84 @@
+import React, { useRef, useState, useEffect, Suspense } from 'react'
+import * as THREE from 'three'
+import { Canvas, useFrame, useLoader } from 'react-three-fiber'
+
+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(),
+    [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={`/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>
+    </>
+  )
+}
+
+export default BirdsPage

examples/with-three-js/pages/boxes.js

@@ -0,0 +1,46 @@
+import React, { useRef, useState, Suspense } from 'react'
+import { Canvas, useFrame } from 'react-three-fiber'
+
+const Box = props => {
+  const mesh = useRef()
+
+  const [hovered, setHover] = useState(false)
+  const [active, setActive] = useState(false)
+
+  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>
+  )
+}
+
+const BirdsPage = () => {
+  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

examples/with-three-js/pages/index.css

@@ -0,0 +1,43 @@
+body {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  background: lavender;
+}
+
+canvas {
+  width: 100%;
+  height: 100vh;
+}
+
+h1 {
+  display: flex;
+  justify-content: center;
+  align-content: center;
+  color: hotpink;
+}
+
+.main {
+  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;
+}
+
+a:hover {
+  color: #3f51b5;
+}

examples/with-three-js/pages/index.js

@@ -0,0 +1,17 @@
+import React from 'react'
+import Link from 'next/link'
+
+const Index = () => {
+  return (
+    <div className="main">
+      <Link href="/birds">
+        <a>Birds Example</a>
+      </Link>
+      <Link href="/boxes">
+        <a>Boxes Example</a>
+      </Link>
+    </div>
+  )
+}
+
+export default Index