<script setup lang="ts">
import { AmbientLight, Mesh, MeshBasicMaterial, PlaneGeometry, Scene, TorusKnotGeometry } from 'three'
import { useCamera, CameraType } from '@tres/core'

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

const camera = createCamera(CameraType.Perspective, {})

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

const light = new AmbientLight(0xffaaff)
light.position.set(10, 10, 10)
scene.add(light)

// Objects
const TorusKnot = new Mesh(new TorusKnotGeometry(2, 0.5, 100, 16), new MeshBasicMaterial({ color: 'teal' }))

TorusKnot.position.set(0, 4, 0)
scene.add(TorusKnot)

const plane = new Mesh(new PlaneGeometry(10, 10, 10, 10), new MeshBasicMaterial({ color: '#444' }))

plane.rotation.set(-Math.PI / 2, 0, 0)

scene.add(plane)

// 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,
  })
  loop()
  updateRenderer()
})

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

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

<route lang="yaml">
meta:
  layout: experiment
  title: Basic Scene with Composables
  status: published
  media: '/basic/composables.png'
  description: 'Basic ThreeJS Scene with a Geometry, a Plane, Orbit Controls using vue composition API'
  tags: ['basic', 'composition']
</route>
