useTres

The useTres composable provides access to a simplified version of the TresJS context. It is a wrapper around the useTresContext composable that provides a more convenient API for common use cases.

Usage

import { useTres } from '@tresjs/core'

const { scene, renderer, camera, invalidate } = useTres()

WARNING

useTres can be only be used inside a child component of a TresCanvas since this component acts as the provider for the context data.

App.vue

<script setup>
import { TresCanvas } from '@tresjs/core'
import SubComponent from './SubComponent.vue'
</script>

<template>
  <TresCanvas>
    <SubComponent />
  </TresCanvas>
</template>

SubComponent.vue

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

const { camera } = useTres()

watchEffect(() => {
  console.log(camera.value)
})
</script>

Properties

Property	Description
camera	the currently active camera
scene	the scene
renderer	Contains the WebGLRenderer
sizes	contains width, height and aspect ratio of your canvas
loop	the renderer loop
controls	the controls of your scene
raycaster	the global raycaster used for pointer events
perf	the performance monitor
extend	Extends the component catalogue. See extending.

Methods

Method	Description
invalidate	Marks the scene as needing an update in the next frame. This is used in on-demand rendering mode to schedule a render.
advance	Manually advances the render loop by one frame. This is particularly useful in manual rendering mode where you want explicit control over when frames are rendered.