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.
This commit is contained in:
parent
87ce591014
commit
3fa5e589be
6 changed files with 40 additions and 17 deletions
|
@ -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
|
||||
|
||||
|
|
|
@ -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}>
|
||||
|
|
7
examples/with-three-js/next.config.js
Normal file
7
examples/with-three-js/next.config.js
Normal file
|
@ -0,0 +1,7 @@
|
|||
const withTM = require('next-transpile-modules')([
|
||||
'drei',
|
||||
'three',
|
||||
'postprocessing',
|
||||
])
|
||||
|
||||
module.exports = withTM()
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
</>
|
||||
|
|
|
@ -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>,
|
||||
]
|
||||
|
|
Loading…
Reference in a new issue