import { useRef, useState } from 'react'
|
import { Canvas, useFrame } from '@react-three/fiber'
|
import { OrbitControls } from '@react-three/drei'
|
import { Environment, Sky } from '@react-three/drei'
|
import Help from '../components/help'
|
import Lights from '../components/light'
|
import Camera from '../components/camera'
|
import Buildings from '../components/buidings'
|
import TreeGroup from '../components/tree-group'
|
import House from '../components/house'
|
import Warehouse from '../core/warehouse'
|
import Left from './left'
|
import Right from './right'
|
|
const Fiber = (props) => {
|
return (
|
<div style={{ height: '100%', width: '100%', position: 'relative', overflow: 'hidden' }}>
|
<Canvas
|
shadows
|
gl={{
|
logarithmicDepthBuffer: true,
|
}}
|
onCreated={(state) => (state.gl.shadowMap.autoUpdate = false)}
|
>
|
<Lights />
|
<Camera />
|
<Sky distance={450000} sunPosition={[0, 1, 0]} inclination={0} azimuth={0.25} />
|
<Buildings />
|
<TreeGroup />
|
<House />
|
<Warehouse />
|
<OrbitControls />
|
{/* <Environment background preset="night" /> */}
|
<Help />
|
</Canvas>
|
<Left />
|
<Right />
|
</div>
|
|
)
|
}
|
|
const Demo = (props) => {
|
const ref = useRef()
|
const [hovered, hover] = useState(false)
|
const [clicked, click] = useState(false)
|
useFrame((state, delta) => (ref.current.rotation.x += delta))
|
return (
|
<mesh
|
{...props}
|
ref={ref}
|
scale={clicked ? 1.5 : 1}
|
onClick={(event) => click(!clicked)}
|
onPointerOver={(event) => (event.stopPropagation(), hover(true))}
|
onPointerOut={(event) => hover(false)}>
|
<boxGeometry args={[10, 10, 10]} />
|
<meshStandardMaterial color={hovered ? 'hotpink' : 'orange'} />
|
</mesh>
|
)
|
}
|
|
export default Fiber;
|
