|  |  | 
 |  |  | 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 Base = (props) => { | 
 |  |  |     return ( | 
 |  |  |         <div style={{ height: '100%', width: '100%' }}> | 
 |  |  |         <div style={{ height: '100%', width: '100%', position: 'relative', overflow: 'hidden' }}> | 
 |  |  |             <Canvas | 
 |  |  |                 shadows | 
 |  |  |                 gl={{ | 
 |  |  | 
 |  |  |                 <Buildings /> | 
 |  |  |                 <TreeGroup /> | 
 |  |  |                 <House /> | 
 |  |  |                 <Box position={[0, 0, 0]} /> | 
 |  |  |                 <Warehouse /> | 
 |  |  |                 <OrbitControls /> | 
 |  |  |                 <Environment background preset="warehouse" /> | 
 |  |  |                 <Environment background preset="night" /> | 
 |  |  |                 <Help /> | 
 |  |  |             </Canvas> | 
 |  |  |             <Left /> | 
 |  |  |             <Right /> | 
 |  |  |         </div> | 
 |  |  |  | 
 |  |  |     ) | 
 |  |  | } | 
 |  |  |  | 
 |  |  | const Box = (props) => { | 
 |  |  | const Demo = (props) => { | 
 |  |  |     const ref = useRef() | 
 |  |  |     const [hovered, hover] = useState(false) | 
 |  |  |     const [clicked, click] = useState(false) |