TresJS 3D Test

<script setup lang="ts">
import { OrbitControls } from '@tresjs/cientos'

// Reference to our mesh for animation
const cubeRef = ref()
const camera = ref()

// Animation loop
const { onBeforeRender } = useLoop()

onBeforeRender(({ elapsed }) => {
  if (cubeRef.value) {
    // Rotate the cube on both X and Y axes
    cubeRef.value.rotation.x = elapsed * 0.5
    cubeRef.value.rotation.y = elapsed * 0.3

    // normalized value 0 → 1 → 0 repeating
    const speed = 1 / 30
    let t = (elapsed * speed) % 2
    if (t > 1) t = 2 - t

    const minZ = 5
    const maxZ = 10

    camera.value.position.z = minZ + t * (maxZ - minZ)
    camera.value.rotation.z = elapsed * 0.5
  }
})
</script>

<template>
  <TresPerspectiveCamera
    ref="camera"
    :position="[3, 3, 3]"
    :look-at="[0, 0, 0]"
  />
  <OrbitControls />
  <TresMesh ref="cubeRef">
    <TresBoxGeometry :args="[1, 1, 1]" />
    <TresMeshNormalMaterial />
  </TresMesh>
  <TresGridHelper />
</template>