Updates thre three-js example with drei and modules transpilation (#14864)

Hi, we received some issues on the `react-three-fiber` and `drei` repos, mentioning broken ssr because of some examples where we import three's examples - like to implement loaders or controls. 

This PR adds a next.config suggested by many that transpiles everything in three, drei and postprocessing.

I also added some code from `drei` that shows how controls and effects can be easily added.

examples/with-three-js/README.md

@@ -4,6 +4,7 @@ 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.
+`drei`: A growing collection of useful helpers and abstractions for react-three-fiber.
 
 ## Deploy your own
 

examples/with-three-js/components/Bird.js

@@ -1,5 +1,6 @@
 import { useRef, useState, useEffect } from 'react'
 import * as THREE from 'three'
+
 import { useFrame, useLoader } from 'react-three-fiber'
 import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
 
@@ -7,15 +8,18 @@ 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}>

examples/with-three-js/next.config.js

@@ -0,0 +1,7 @@
+const withTM = require('next-transpile-modules')([
+  'drei',
+  'three',
+  'postprocessing',
+])
+
+module.exports = withTM()

examples/with-three-js/package.json

@@ -8,11 +8,14 @@
     "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"
+    "drei": "0.0.60",
+    "next": "9.4.4",
+    "react": "16.13.1",
+    "react-dom": "16.13.1",
+    "react-three-fiber": "4.2.12",
+    "three": "0.118.3"
   },
-  "devDependencies": {}
+  "devDependencies": {
+    "next-transpile-modules": "3.3.0"
+  }
 }

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

@@ -1,6 +1,8 @@
 import dynamic from 'next/dynamic'
 import { Suspense } from 'react'
 import { Canvas } from 'react-three-fiber'
+import { OrbitControls, StandardEffects } from 'drei'
+
 const Bird = dynamic(() => import('../components/Bird'), { ssr: false })
 
 const Birds = () => {
@@ -16,6 +18,7 @@ const Birds = () => {
         : bird === 'flamingo'
         ? 0.25 + Math.random()
         : 1 + Math.random() - 0.5
+
     return (
       <Bird
         key={i}
@@ -35,8 +38,10 @@ const BirdsPage = (props) => {
       <Canvas camera={{ position: [0, 0, 35] }}>
         <ambientLight intensity={2} />
         <pointLight position={[40, 40, 40]} />
+        <OrbitControls />
         <Suspense fallback={null}>
           <Birds />
+          <StandardEffects smaa />
         </Suspense>
       </Canvas>
     </>

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

@@ -1,7 +1,8 @@
 import { useRef, useState, Suspense } from 'react'
 import { Canvas, useFrame } from 'react-three-fiber'
+import { OrbitControls, StandardEffects, Box } from 'drei'
 
-const Box = (props) => {
+const MyBox = (props) => {
   const mesh = useRef()
 
   const [hovered, setHover] = useState(false)
@@ -10,20 +11,20 @@ const Box = (props) => {
   useFrame(() => (mesh.current.rotation.x = mesh.current.rotation.y += 0.01))
 
   return (
-    <mesh
+    <Box
+      args={[1, 1, 1]}
       {...props}
       ref={mesh}
       scale={active ? [6, 6, 6] : [5, 5, 5]}
-      onClick={(e) => setActive(!active)}
-      onPointerOver={(e) => setHover(true)}
-      onPointerOut={(e) => setHover(false)}
+      onClick={() => setActive(!active)}
+      onPointerOver={() => setHover(true)}
+      onPointerOut={() => setHover(false)}
     >
-      <boxBufferGeometry attach="geometry" args={[1, 1, 1]} />
       <meshStandardMaterial
         attach="material"
         color={hovered ? '#2b6c76' : '#720b23'}
       />
-    </mesh>
+    </Box>
   )
 }
 
@@ -33,11 +34,13 @@ const BirdsPage = () => {
     <Canvas camera={{ position: [0, 0, 35] }}>
       <ambientLight intensity={2} />
       <pointLight position={[40, 40, 40]} />
+      <MyBox position={[10, 0, 0]} />
+      <MyBox position={[-10, 0, 0]} />
+      <MyBox position={[0, 10, 0]} />
+      <MyBox position={[0, -10, 0]} />
+      <OrbitControls />
       <Suspense fallback={null}>
-        <Box position={[10, 0, 0]} />
-        <Box position={[-10, 0, 0]} />
-        <Box position={[0, 10, 0]} />
-        <Box position={[0, -10, 0]} />
+        <StandardEffects smaa />
       </Suspense>
     </Canvas>,
   ]