12a380da23
* 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 <54882055+welcomebackfda@users.noreply.github.com>
46 lines
1.2 KiB
JavaScript
46 lines
1.2 KiB
JavaScript
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
|