<script setup lang="ts">
import { useFBX, } from '@tresjs/cientos'
import { Environment } from '@tresjs/cientos'
import andreyUrl from '../../assets/promo/models/quadro/andrey.fbx'
import groundUrl from '../../assets/promo/models/quadro/ground.fbx'
import mangalUrl from '../../assets/promo/models/quadro/mangal.fbx'
import pillarUrl from '../../assets/promo/models/quadro/pillar.fbx'
import pointerUrl from '../../assets/promo/models/quadro/pointer.fbx'
import quadUrl from '../../assets/promo/models/quadro/quad.fbx'
import skyUrl from '../../assets/promo/models/quadro/sky.fbx'
import walkbayUrl from '../../assets/promo/models/quadro/walkway.fbx'

import hdrmap from "../../assets/promo/models/sunset.hdr"

const groundModel = await useFBX(groundUrl)

// console.log(groundModel.children[0].material)
</script>
<template>
    <TresGroup>
        <Suspense>
            <Environment background :files="hdrmap" />
        </Suspense>
        <TresMesh :rotate-x="-Math.PI * 0.5">
            <TresPlaneGeometry :args="[50, 50]" />
            <TresMeshPhongMaterial v-bind="groundModel.children[0].material" />
        </TresMesh>

        <ModelItem :modelUrl="andreyUrl" />
        <ModelItem :modelUrl="mangalUrl" />
        <ModelItem :modelUrl="pillarUrl" />
        <ModelItem :modelUrl="pointerUrl" />
        <ModelItem :modelUrl="quadUrl" />
        <ModelItem :modelUrl="walkbayUrl" />

        <!-- <primitive :object="groundModel" /> -->
        <!-- <primitive :object="skyModel" /> -->
    </TresGroup>
</template>