<script setup lang="ts">
import { TresCanvas } from '@tresjs/core'
import { OrbitControls } from '@tresjs/cientos'
import Item from './model/item.vue';

const onClick = (e: MouseEvent) => {
    console.log(e)
}
const controlsState = reactive({
    minDistance: 0,
    maxDistance: 100,
})

// Import necessary three.js classes
import { Mesh, BoxGeometry, MeshBasicMaterial, MeshStandardMaterial } from 'three'

// Create a box geometry and a basic material
const geometry = new BoxGeometry(1, 1, 1)
const material = new MeshStandardMaterial({ color: 0x00ff00 })
const meshWithMaterial = new Mesh(geometry, material)

</script>
<template>
    <div class="container">
        <TresCanvas clear-color="#82DBC5">
            <TresPerspectiveCamera :position="[5, 5, 5]" />
            <OrbitControls v-bind="controlsState" make-default />
            <TresMesh @click="onClick" :position="[-1, -1, -1]">
                <primitive :object="meshWithMaterial" />
            </TresMesh>
            <Suspense>
                <TresGroup>
                    <Item model-url="/models/kosynka.glb" />
                    <Item model-url="/models/kreplaniye_planok.glb" />
                    <Item model-url="/models/planki.glb" />
                    <Item model-url="/models/stolb.glb" />
                    <Item model-url="/models/verh.glb" />
                    <Item model-url="/models/zakliopki.glb" />
                </TresGroup>
            </Suspense>
            <TresDirectionalLight />
            <TresAmbientLight />
        </TresCanvas>
    </div>
</template>

<style scoped>
.container {
    height: 100vh;
    max-height: 50vw;
    display: block;
}
</style>