TresJS 3D Test

Component Source

<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>