import React, { useRef } from 'react'
import { useGLTF } from '@react-three/drei/useGLTF'
import { useCubeTexture } from '@react-three/drei'

export default function Model(props) {
  const group = useRef()
  const { materials, scene } = useGLTF('/model/plaza.glb')

  const envMap = useCubeTexture(
    ['px.png', 'nx.png', 'py.png', 'ny.png', 'pz.png', 'nz.png'],
    { path: 'env/' },
  )
  materials.metal_glass.envMap = envMap

  return (
    <group ref={group} {...props} dispose={null}>
      <primitive object={scene} dispose={null} matrixAutoUpdate={false} />
    </group>
  )
}

useGLTF.preload('/model/plaza.glb')
