<script setup lang="ts">
import { ACESFilmicToneMapping, Color, Fog, RectAreaLight, Scene, sRGBEncoding } from 'three'
import { GLTFLoader } from '/@/loaders/GLTFLoader'

const scene = new Scene()
const { createCamera } = useCamera()

const camera = createCamera(CameraType.Perspective)

const bgColor = new Color('#111')
// Fog
scene.fog = new Fog(bgColor, 0.1, 75)
scene.background = bgColor

camera.position.set(15, 15, 15)
scene.add(camera)

// Lights
const rectAreaLight = new RectAreaLight(0xffffff, 0.4, 4, 4)
rectAreaLight.rotation.set(Math.PI / 2, 0, 0)

scene.add(rectAreaLight)

// Model
/* const { loadModel } = useModel()

const akuAku = await loadModel('/models/AkuAku.gltf')

scene.add(akuAku) */
// Model
const gltfLoader = new GLTFLoader()

gltfLoader.load('/models/AkuAku.gltf', gltf => {
  console.log(gltf.scene)
  scene.add(gltf.scene)
})

// Renderer

const { experience, initRenderer, updateRenderer, renderScene, updateControls, disposeRenderer } = useRenderer()

const loop = () => {
  // Update renderer

  updateControls()

  renderScene(scene, camera)
  requestAnimationFrame(loop)
}

onMounted(() => {
  initRenderer(camera, {
    renderer: {
      antialias: true,
      alpha: true,
      preserveDrawingBuffer: true,
    },
    shadows: true,
    controls: true,
    physicallyCorrectLights: true,
    outputEncoding: sRGBEncoding,
    toneMapping: ACESFilmicToneMapping,
  })
  loop()
  updateRenderer()
})

onBeforeUnmount(() => {
  disposeRenderer()
})
</script>

<template>
  <canvas ref="experience" />
</template>

<route lang="yaml">
meta:
  layout: experiment
  title: GLTFLoader
  media: '/models/gltf_basic.png'
  status: published
  description: 'Load a glTF model using the GLTFLoader'
  tags: ['gltf', 'loader', 'model']
</route>
